Reading and Setting Field Values via Code and Other Basic Concepts for a Creatio Freedom UI Page

If you’re working with a Freedom UI Page in Creatio there are a few new things to understand. Primarily, how to do something so simple such as read and set field values from page code. However, before we get into that, there are some things to discuss first.

What used to be the methods section of a classic page, is now handlers in a Freedom UI page. When things “happen” on a Freedom UI page, it fires requests. The handlers handle those requests. Each request has a name and the system will look for a handler to execute for a named request. The page will chain all the layers of a given request handler and perform them asynchronously (unless you intentionally await). Think of it like how inheritance worked in classic pages. A handler looks like this (in the page’s handlers section):

{
	request: "theRequestName",
	handler: async (request, next) => {
		// add code here
		return next?.handle(request);
	}
}

We will have several articles coming on creating handlers for requests over the next 2 weeks. However, the important thing to understand about that handler above:

1. The return statement executes the next handler in the chain (sort of like the equivalent to this.callParent(arguments) in classic pages)
2. The request object passed in as a parameter

The request object provides some details about the request, for example if it’s a change request, it will provide the name of the field/attribute that triggered the change as well as the old & new values. More importantly is the request.$context – which is the model for the page. That is your “this” context for the page. This is what provides you with all of the “things” on the page, such as the fields bound on the page.

Freedom UI Page Equivalent for this.get

To get page values in a request handler on a Freedom UI page, you’ll use the request.$context object. For example, to get the current record’s Id or Type values:

// get the Id
var id = await request.$context.Id;

// get the Type field
var type = await request.$context.Type;
if (type.displayValue == "Customer") {
	// is a customer
}

Note, that lookup values are just like they are in classic pages, an object with a value & displayValue property.

Freedom UI Page Equivalent for this.set

To set field values, you’ll se the request.$context object. For example, to set the AlternativeName or Type values:

// set the AKA field
request.$context.AlternativeName = "Some AKA";

// set the Type
request.$context.Type = { 
	value: "someId", 
	displayValue: "Some Value"
};

NOTE: Technically, you’re not reading or setting field values using request.$context. You’re reading or setting attributes that have been added to the page’s viewModelConfig. The names of the attributes there could be different than the actual field name.

Important Note About Data Available on a Page

Some things that are important to note about a Freedom UI page:

1. A page can have several different data sources (for example the “primary” page data source, but also a data source for a list, such as attachments, etc, on the page)
2. Not all fields will be available unless they’ve been added to the page (for example, if you’ve not added “UsrField1” to the page somewhere, it won’t be available to read, more on this below)

For the primary data source of the page, only the fields you’ve added to the page will be available. This is a big change from classic pages. However, if you want to have a field available to the code that isn’t displayed on the page, you can add it to the model. Side note, the primary data source is usually referred to in the page code as “PDS”, however, it can be named anything. The name of the primary data source can be found in request.$context._primaryModelName.

Adding a Field to the Page Model

To add a field to the page’s model, so it’s available to code on the page – even if it’s not displayed on the page, locate the viewModelConfig section of the page code. There, you’ll add an attributes block, if it doesn’t already exist, then the attribute for the field along with the path of where it exists in the object. For example, to have the field UsrField1 on the page, you’d add it like this:

viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
	"attributes": {
		"UsrField1": {
			"modelConfig": {
				"path": "PDS.UsrField1"
			}
		}
	}
}/**SCHEMA_VIEW_MODEL_CONFIG*/

Now that field will be always available in the model, meaning, the data will exist for you to read or set. Note the path is specifying it is part of the PDS, or primary data source. You can do the same with the other data sources on the page as well.