Many a time developers complain about XForms being very slow or taking too much time to load. There could be many reasons for this and the most common ones are: huge amounts of data loaded using a table, too many web service operation calls on load, hundreds of lines of code or an improper UI design. Let’s look into each of them to see what exactly the issues are and how to fix them.
Huge amounts of data, loaded using a table
This is one of the most common issues, when huge amounts of data is loaded and the best solution is to use an Xgrid component, instead of a table.
Too many web service operation calls on load
When an XForm loads, there could be many fields or tables that need to be pre-populated and kept ready for use by end user. And for this, developers make a web service operation call to load each piece of information. As the number of calls increase, so does the time to load. Here are the ways to reduce the number of calls:
Verify all the models in your XForm and ensure only those checked as automatic are required on loading
If you are using multiple tabs in your application and there are controls that are not in main tab but are being populated on form load, make them load on tab focus
To reduce the network overhead, leverage multi-call to group all possible requests into single request and fire the request just once. This in turn will fetch the data for all the different models in a single response and we just have to pull the data corresponding to each model from the response and set it to the appropriate controls
If there are multiple models that are being called just to fetch key value pairs from database to load dropdowns, try to make a single query by joining all the tables and just call it once. Iterate through the response and for the desired key value pairs and bind them to the controls
Hundreds of lines of code
Minimize the number of lines of code by separating common utility functions into a utilities.js or any other named file (whichever is appropriate) and import this code into each of the Xforms, where required. The browser loads this js file just once for the first time, for all the XForms where ever this is used.
Improper UI design
Too many controls in a single page could always lead you to complex issues. So the way out of this is to functionally separate the controls by using tabs for each functionality
Leverage an iframe, where ever applicable, inside the tabs to load a different page instead of directly having all the controls in the tab page itself