Refreshing/Reloading Page or List Data on a Creatio Freedom UI Page

For classic Creatio pages, to refresh or reload a page you used a function on the page named reloadEntity. There was a separate method for reloading a detail on a page. However, in Freedom UI Pages, the structure of the page is different and along with this a new way to refresh anything on the page.

In classic Creatio pages, the details were self contained as a separate schema. It was added to the page, but the logic for the detail was all separate. In a Creatio Freedom UI page, there is no longer separate details from the page itself. Instead, a list is just another element in the page that uses a separate data source on the page. When you create a Freedom UI page, there is a primary data source for the page (on out of the box Account and Contact pages in the Customer 360 package for 8.0.6, this primary data source is named “PDS”, however it can be named anything). When you add a list, or 1:many grid of records, to the page it adds another data source for that list. Refreshing the page or list data is just a matter of telling the appropriate data source to reload.

Data Sources on a Freedom UI Page

In order to reload a data source, you need to first determine the name of the data source you want to reload. To see the available data sources on a page you need to look for the modelConfig element in the page code. In the modelConfig you’ll see a node for dataSources. There you’ll see the page’s dataSource (with scope:page) and also the data source for any lists.

Note for identifying the primary data source: The primary data source is the data for the page itself. You can look at modelConfig.primaryDataSourceName. This will provide the name of the primary, or page’s data source. If you want to get this in a handler in the page code, you can use await request.$context.getPrimaryModelName();

Reloading a Data Source

With the data source name, you can now reload that data source. Obviously, to reload the page data, you’ll use the primary data source. To reload a specific list, you’ll use the name of the data source for the list. To reload a datasource, you’ll need to have the DevKit SDK loaded for the page. To use this devkit, you’ll need to add “@creatio-devkit/common” to the modules list of your page. This will look like this (note the “@creatio-devkit/common” in the square brackets and the sdk without quotes in the parenthesis):

define("UsrMyCustomEntity_FormPage", /**SCHEMA_DEPS*/["@creatio-devkit/common"] /**SCHEMA_DEPS*/, 
function/**SCHEMA_ARGS*/(sdk)/**SCHEMA_ARGS*/ {
	return {
		// ... the rest of the page here
	};
});

Now, with that module available, you can access things in the SDK such as the HandlerChainService module, which we’ll be using to reload a data source. As a side note, the HanderChainService is what you use to “trigger” a request. To reload a data source, we’re simply triggering a crt.LoadDataRequest request and supplying the name of the data source to reload. The page has a handler for this request, and when received, will reload the specified data source.

The code to reload the data source is as follows:

const handlerChain = sdk.HandlerChainService.instance;
await handlerChain.process({
	type: "crt.LoadDataRequest",
	$context: request.$context,
	config: {
		loadType: "reload"
	},
	dataSourceName: "DataSourceNameHere"
});

In the code above, obviously, you’ll replace the “DataSourceNameHere” with the name of the data source you want to reload.