Home > CRM > Dynamics/ADX Portal – Handling ‘Page flickering’ due to long running scripts

Dynamics/ADX Portal – Handling ‘Page flickering’ due to long running scripts

In our portal, we have a couple of entity forms with JScript registered on page load event, which hide/show or enable/disable controls based on business rules.

Due to the script execution delays, end users were experiencing page flickering on load.

What is flickering:

  • If you have a script with hide/show control logic, on page load event, end user would see the unintended controls momentarily before your script kicks in.
  • Assume that you have an ‘Option Set’ field on Entity form, which you hide based on logged in user’s web role using jscript. What if there is a lag in your script execution, end user would see the ‘Option Set’ for a split second, before it gets hidden.

How to handle flickering in Portals:

  • We have added below statements in both the ‘Custom JavaScript’ and ‘Custom CSS’ to the portal Web Page’s ‘Advanced’ tab.

Portal_Loading

  • The above technique works on a simple rule;
    • Hide all the controls before the page loads (i.e., using CSS).
    • Let the script with your business rules executes.
    • Show the controls only when the Page load completes (i.e., using $(window).load event).
  • Lets dissect the statements added in ‘Custom JavaScript’ and ‘Custom CSS’.
    • #content_form is the OOB portal ‘form’ control’s object, available in all portal pages.

Portal_Loading_2

    • To hide all the controls, set the #content_form { display: none; } in ‘Custom CSS’.
    • Now, show the #content_form only when page load completes, by setting ‘display’ to ‘block’ in $(window).load event.

Notes:

  • Following are the events, as per their order, during any Web Page’s Load.
    • $(document).ready
      • document.ready triggers when the DOM is ready, e.g. all elements are there to be found/used, but not necessarily all the content.
    • $(window).load
      • window.load event is fired after whole content is loaded like page contain images,css etc.
  • We can also show ‘Loader’ symbol during page load. All we need is ‘Spinner’ image and hide/show using the specified technique.

🙂

 

Categories: CRM
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: