Customize Freedom UI page for Mobile Creatio
Level: beginner
Use the Mobile Application Wizard to customize Freedom UI page.
Mobile Application Wizard lets you execute the following actions:
- Configure the Freedom UI page. Read more >>>
- Use a Freedom UI component that does not have a Classic UI counterpart. Read more >>>
Configure the Freedom UI page
-
Convert existing page to Freedom UI.
- Open the Mobile Application Wizard. To do this, click
→ System setup → Mobile Application Wizard. - Create a new or open an existing workplace. Instructions: Add new workplaces (user documentation).
- Set up the mobile app section page. Instructions: Set up mobile application section page (user documentation).
- Select the Freedom UI checkbox.
- Save the changes.
- Open the Mobile Application Wizard. To do this, click
-
Open the Freedom UI page schema. To do this, open the Configuration section → select the converted Freedom UI page schema. For example,
MobileFUIUsrSectionRecordPageSettingsDefaultWorkplace. Instructions: Open the Configuration section. -
Configure the Freedom UI page using the
viewConfigDiff,viewModelConfigDiff, andmodelConfigDiffschema sections.View the example that configures the Freedom UI page below.
Example that configures the Freedom UI page[
{
"operation": "insert",
"name": "settings",
"values": {
"entitySchemaName": "UsrSection",
"settingsType": "RecordPage",
"localizableStrings": {},
"columnSets": [],
"operation": "insert",
"details": [],
"viewConfigDiff": "[{\"operation\":\"merge\",\"name\":\"ViewConfig\",\"values\":{...}}]",
"viewModelConfigDiff": "[{\"operation\":\"merge\",\"name\":\"Attribute_Items_ModelConfig\",\"values\":{...}}]",
"modelConfigDiff": "[{\"operation\":\"merge\",\"name\":\"PDS_Attribute_Title\",\"values\":{...}}]"
}
}
] -
Save the changes.
As a result, the Freedom UI page will be configured.
Creatio merges all schemas and converts them into a resulting JSON object. View the example that demonstrates the resulting JSON object for the Contact Freedom UI page below.
Example that demonstrates the resulting JSON object for the Contact Freedom UI page
{
"viewConfig": {
"type": "crt.EditScreen",
"body": {
"type": "crt.Tabs",
"items": [
{
"body": {
"type": "crt.AdaptiveLayout",
"items": [
{
"type": "crt.Area",
"visible": true,
"items": [
{
"value": "$Account",
"type": "crt.EditField",
"name": "Contact_PrimaryTab_Body_profileColumnSet_Account"
},
{
"value": "$JobTitle",
"type": "crt.EditField",
"name": "Contact_PrimaryTab_Body_profileColumnSet_JobTitle"
},
{
"type": "crt.CommunicationOptions",
"items": "ContactCommunicationDetailEmbeddedDetail",
"title": "Communication options",
"itemLayout": {
"type": "crt.DetailItem",
"name": "ContactCommunicationDetailEmbeddedDetail_ItemLayout",
"fields": []
},
"editColumns": [],
"name": "ContactCommunicationDetailEmbeddedDetail"
}
],
"title": "Primary column set",
"name": "Contact_PrimaryTab_Body_primaryColumnSet"
},
{
"type": "crt.Area",
"visible": true,
"items": [
{"value": "$Type", "type": "crt.EditField", "name": "Contact_PrimaryTab_Body_infoColumnSet_Type"},
{"value": "$Owner", "type": "crt.EditField", "name": "Contact_PrimaryTab_Body_infoColumnSet_Owner"},
{"value": "$Dear", "type": "crt.EditField", "name": "Contact_PrimaryTab_Body_infoColumnSet_Dear"},
{"value": "$Gender", "type": "crt.EditField", "name": "Contact_PrimaryTab_Body_infoColumnSet_Gender"},
{"value": "$SalutationType", "type": "crt.EditField", "name": "Contact_PrimaryTab_Body_infoColumnSet_SalutationType"},
{"value": "$Language", "type": "crt.EditField", "name": "Contact_PrimaryTab_Body_infoColumnSet_Language"}
],
"title": "Contact info",
"name": "Contact_PrimaryTab_Body_infoColumnSet"
},
{
"type": "crt.Detail",
"items": "ContactAddressDetailV2EmbeddedDetail",
"title": "Addresses",
"itemLayout": {
"type": "AddressPreview",
"name": "ContactAddressDetailV2EmbeddedDetail_ItemLayout",
"fields": []
},
"editColumns": [
{"columnName": "AddressType", "name": "ContactAddressDetailV2EmbeddedDetail_EditPageColumn_AddressType"},
{"columnName": "Address", "name": "ContactAddressDetailV2EmbeddedDetail_EditPageColumn_Address"},
{"columnName": "City", "name": "ContactAddressDetailV2EmbeddedDetail_EditPageColumn_City"},
{"columnName": "Region", "name": "ContactAddressDetailV2EmbeddedDetail_EditPageColumn_Region"},
{"columnName": "Country", "name": "ContactAddressDetailV2EmbeddedDetail_EditPageColumn_Country"},
{"columnName": "Zip", "name": "ContactAddressDetailV2EmbeddedDetail_EditPageColumn_Zip"}
],
"name": "ContactAddressDetailV2EmbeddedDetail",
"useSeparator": false
},
{
"type": "crt.Detail",
"items": "ContactCareerDetailV2EmbeddedDetail",
"title": "Job experience",
"itemLayout": {
"type": "crt.DetailItem",
"name": "ContactCareerDetailV2EmbeddedDetail_ItemLayout",
"fields": [
{"value": "$Account", "type": "crt.ListItemBodyField", "name": "ContactCareerDetailV2EmbeddedDetail_ItemLayout_Account"},
{"value": "$Job", "type": "crt.ListItemBodyField", "name": "ContactCareerDetailV2EmbeddedDetail_ItemLayout_Job"},
{"value": "$Department", "type": "crt.ListItemBodyField", "name": "ContactCareerDetailV2EmbeddedDetail_ItemLayout_Department"},
{"value": "$Primary", "type": "crt.ListItemBodyField", "name": "ContactCareerDetailV2EmbeddedDetail_ItemLayout_Primary"},
{"value": "$StartDate", "type": "crt.ListItemBodyField", "name": "ContactCareerDetailV2EmbeddedDetail_ItemLayout_StartDate"}
]
},
"editColumns": [
{"columnName": "Account", "name": "ContactCareerDetailV2EmbeddedDetail_EditPageColumn_Account"},
{"columnName": "Job", "name": "ContactCareerDetailV2EmbeddedDetail_EditPageColumn_Job"},
{"columnName": "Department", "name": "ContactCareerDetailV2EmbeddedDetail_EditPageColumn_Department"},
{"columnName": "Primary", "name": "ContactCareerDetailV2EmbeddedDetail_EditPageColumn_Primary"},
{"columnName": "StartDate", "name": "ContactCareerDetailV2EmbeddedDetail_EditPageColumn_StartDate"}
],
"name": "ContactCareerDetailV2EmbeddedDetail"
}
],
"scrollable": true,
"columns": {"tabletLandscape": [3, 7]},
"padding": {"bottom": "floatingActionBottomPadding"},
"name": "Contact_PrimaryTab_Body"
},
"position": 0,
"text": "#ResourceSystemString(Screen.DefaultTab)",
"isTransparent": true,
"name": "Contact_PrimaryTab"
}
],
"name": "Contact_Tabs"
},
"actions": [],
"floatActions": [
{"title": "#ResourceSystemString(Button.Copy)", "clicked": {"request": "crt.CopyRecordRequest"}, "name": "Contact_FloatAction_Copy"},
{"title": "#ResourceSystemString(Button.Delete)", "clicked": {"request": "crt.DeleteRecordRequest"}, "name": "Contact_FloatAction_Delete"}
],
"name": "ViewConfig"
},
"viewModelConfig": {
"attributes": {
"Id": {"name": "Attribute_Id", "modelConfig": {"path": "PDS.Id"}},
"Account": {"name": "Attribute_Account", "modelConfig": {"path": "PDS.Account"}},
"JobTitle": {"name": "Attribute_JobTitle", "modelConfig": {"path": "PDS.JobTitle"}},
"ContactCommunicationDetailEmbeddedDetail": {
"modelConfig": {
"path": "ContactCommunicationDetailEmbeddedDetailDS",
"cacheConfig": {},
"sortingConfig": {
"default": [{"columnName": "CreatedOn", "direction": "asc"}],
"name": "Attribute_ContactCommunicationDetailEmbeddedDetail_SortingConfig"
},
"name": "Attribute_ContactCommunicationDetailEmbeddedDetail_ModelConfig"
},
"name": "Attribute_ContactCommunicationDetailEmbeddedDetail"
},
"Type": {"name": "Attribute_Type", "modelConfig": {"path": "PDS.Type"}},
"Owner": {"name": "Attribute_Owner", "modelConfig": {"path": "PDS.Owner"}},
"Dear": {"name": "Attribute_Dear", "modelConfig": {"path": "PDS.Dear"}},
"Gender": {"name": "Attribute_Gender", "modelConfig": {"path": "PDS.Gender"}},
"SalutationType": {"name": "Attribute_SalutationType", "modelConfig": {"path": "PDS.SalutationType"}},
"Language": {"name": "Attribute_Language", "modelConfig": {"path": "PDS.Language"}},
"ContactAddressDetailV2EmbeddedDetail": {
"modelConfig": {
"path": "ContactAddressDetailV2EmbeddedDetailDS",
"cacheConfig": {},
"sortingConfig": {
"default": [{"columnName": "CreatedOn", "direction": "asc"}],
"name": "Attribute_ContactAddressDetailV2EmbeddedDetail_SortingConfig"
},
"name": "Attribute_ContactAddressDetailV2EmbeddedDetail_ModelConfig"
},
"name": "Attribute_ContactAddressDetailV2EmbeddedDetail"
},
"ContactCareerDetailV2EmbeddedDetail": {
"modelConfig": {
"path": "ContactCareerDetailV2EmbeddedDetailDS",
"cacheConfig": {},
"sortingConfig": {
"default": [{"columnName": "CreatedOn", "direction": "asc"}],
"name": "Attribute_ContactCareerDetailV2EmbeddedDetail_SortingConfig"
},
"name": "Attribute_ContactCareerDetailV2EmbeddedDetail_ModelConfig"
},
"name": "Attribute_ContactCareerDetailV2EmbeddedDetail"
},
"name": "Attributes",
"Name": {"modelConfig": {"path": "PDS.Name"}, "name": "Attribute_Name"},
"City.TimeZone": {"modelConfig": {"path": "PDS.City.TimeZone"}, "name": "Attribute_City.TimeZone"},
"Country": {"modelConfig": {"path": "PDS.Country"}, "name": "Attribute_Country"},
"BirthDate": {"modelConfig": {"path": "PDS.BirthDate"}, "name": "Attribute_BirthDate"},
"ContactFeed": {"name": "Attribute_ContactFeed"}
},
"name": "ViewModelConfig"
},
"modelConfig": {
"primaryDataSourceName": "PDS",
"dataSources": {
"PDS": {"config": {"entitySchemaName": "Contact"}, "name": "PDS"},
"ContactCommunicationDetailEmbeddedDetailDS": {
"config": {
"entitySchemaName": "ContactCommunication",
"attributes": {
"CreatedOn": {"path": "CreatedOn", "name": "ContactCommunicationDetailEmbeddedDetailDS_Attribute_CreatedOn"},
"name": "ContactCommunicationDetailEmbeddedDetailDS_Attributes"
},
"name": "ContactCommunicationDetailEmbeddedDetailDS_Config"
},
"name": "ContactCommunicationDetailEmbeddedDetailDS"
},
"ContactAddressDetailV2EmbeddedDetailDS": {
"config": {
"entitySchemaName": "ContactAddress",
"attributes": {
"CreatedOn": {"path": "CreatedOn", "name": "ContactAddressDetailV2EmbeddedDetailDS_Attribute_CreatedOn"},
"AddressType": {"path": "AddressType", "name": "ContactAddressDetailV2EmbeddedDetailDS_Attribute_AddressType"},
"Address": {"path": "Address", "name": "ContactAddressDetailV2EmbeddedDetailDS_Attribute_Address"},
"City": {"path": "City", "name": "ContactAddressDetailV2EmbeddedDetailDS_Attribute_City"},
"Region": {"path": "Region", "name": "ContactAddressDetailV2EmbeddedDetailDS_Attribute_Region"},
"Country": {"path": "Country", "name": "ContactAddressDetailV2EmbeddedDetailDS_Attribute_Country"},
"Zip": {"path": "Zip", "name": "ContactAddressDetailV2EmbeddedDetailDS_Attribute_Zip"},
"name": "ContactAddressDetailV2EmbeddedDetailDS_Attributes"
},
"name": "ContactAddressDetailV2EmbeddedDetailDS_Config"
},
"name": "ContactAddressDetailV2EmbeddedDetailDS"
},
"ContactCareerDetailV2EmbeddedDetailDS": {
"config": {
"entitySchemaName": "ContactCareer",
"attributes": {
"CreatedOn": {"path": "CreatedOn", "name": "ContactCareerDetailV2EmbeddedDetailDS_Attribute_CreatedOn"},
"Account": {"path": "Account", "name": "ContactCareerDetailV2EmbeddedDetailDS_Attribute_Account"},
"Job": {"path": "Job", "name": "ContactCareerDetailV2EmbeddedDetailDS_Attribute_Job"},
"Department": {"path": "Department", "name": "ContactCareerDetailV2EmbeddedDetailDS_Attribute_Department"},
"Primary": {"path": "Primary", "name": "ContactCareerDetailV2EmbeddedDetailDS_Attribute_Primary"},
"StartDate": {"path": "StartDate", "name": "ContactCareerDetailV2EmbeddedDetailDS_Attribute_StartDate"},
"name": "ContactCareerDetailV2EmbeddedDetailDS_Attributes"
},
"name": "ContactCareerDetailV2EmbeddedDetailDS_Config"
},
"name": "ContactCareerDetailV2EmbeddedDetailDS"
},
"name": "DataSources"
},
"dependencies": {
"ContactCommunicationDetailEmbeddedDetailDS": [{"attributePath": "Contact", "relationPath": "PDS.Id", "name": "ContactCommunicationDetailEmbeddedDetailDS_Dependencies"}],
"ContactAddressDetailV2EmbeddedDetailDS": [{"attributePath": "Contact", "relationPath": "PDS.Id", "name": "ContactAddressDetailV2EmbeddedDetailDS_Dependencies"}],
"ContactCareerDetailV2EmbeddedDetailDS": [{"attributePath": "Contact", "relationPath": "PDS.Id", "name": "ContactCareerDetailV2EmbeddedDetailDS_Dependencies"}],
"name": "Dependencies"
},
"name": "ModelConfig"
}
}
Use a Freedom UI component that does not have a Classic UI counterpart
Freedom UI page lets you use a Freedom UI component that does not have a Classic UI counterpart. For example, Contact compact profile. To do this:
-
Open the Freedom UI page schema.
-
Go to the component whose
nameproperty is set tosettings. -
Configure the component. Requirements for source code are as follows:
- Use the
mergetype operation in theviewConfigDiff,viewModelConfigDiff, andmodelConfigDiffschema sections. - Add configuration object as string.
- Use escaped characters.
View the example that configures the Freedom UI component below.
Example that configures the Freedom UI component[
{
"operation": "insert",
"name": "settings",
"values": {
"entitySchemaName": "UsrSection",
"settingsType": "RecordPage",
"localizableStrings": {},
"columnSets": [],
"operation": "insert",
"details": [],
"viewConfigDiff": "[{\"operation\":\"merge\",\"name\":\"ViewConfig\",\"values\":{\"header\":{\"name\":\"Contact_Header\",\"type\":\"ContactCompactProfile\"}}}]",
}
}
] - Use the
-
Save the changes.
As a result, the Freedom UI page will use the Contact compact profile Freedom UI component that does not have a Classic UI counterpart.
See also
Set up mobile app workplaces (user documentation)