top of page
Search
naveenaggarwal12

Customized "Wait" Icon


Nobody wants to wait for a page to load and then view the information on page. But in data centric applications it usually happens when a page is trying to fetch the data from backend and rendering again during that time we see a wait symbol on screen.


In my last APEX application, I customized the usual wait icon and used my own image (.PNG file) in one of the pages. Today in this blog I am going to talk about the same. Let me first show you how the page looks like with new icon.


In this page, these five balls moves up and down as a wait icon.


This is the actual GIF file that I used.

Following are the steps which I followed.


Step 1: Uploaded the GIF file under the Static Application Files component (in Shared Component)


Step 2: I wanted to display a report after the wait is over so in the same report region I created a "Display Image" item. Set the following properties of this item:


  • Name: P370_SORT_GIF

  • Type: Display Image

  • Based On: Image URL stored in Page Item Value

  • Alternative Text: Querying file. Please wait...

  • Custom Attributes: style="width: 80%"

  • Static Value: #APP_IMAGES#sorting.gif

Step 3: Created 2 dynamic actions

1st Dynamic Action Event: Page Load

2nd Dynamic Action Event: After Refresh

​True Action: Show Selection Type: Item(s) Items(s): P370_SORT_GIF Fire on Initialization: Yes True Action: Refresh Selection Type: Region Region: Region_Name Fire on Initialization: No

True Action: Hide Selection Type: Item(s) Items(s): P370_SORT_GIF

Fire on Initialization: No

Step 4: As soon as the page is loaded the GIF image will be displayed as a wait symbol.


Step 5: After the page is refreshed and once the report is displayed the GIF image will be hidden.



This is just a short and simple way of customizing the default components.


As I mentioned initially that nobody wants to wait to see the desired results on the page, but if we customize the icons with some better looking images then definitely our client will not be irritated





I hope this was helpful and understood.


Thanks for giving your time and reading my blog !!




479 views0 comments

Recent Posts

See All

CSS in APEX

Comentarios


bottom of page