Freedom UI page schema for Mobile Creatio
As part of transition to new architecture, the app UI was revamped in Creatio. Freedom UI shell encompasses the latest and greatest UX best practices to streamline the user workflow all while providing extensive personalization capabilities. Learn more: Get started with Creatio Freedom UI (user documentation).
The client module schema is used to implement the front-end part of Creatio. The Freedom UI page type of the client module schema represents the front-end part of Creatio in Freedom UI. The schema structure of Freedom UI pages is the same for Creatio and Mobile Creatio. Learn more: Client schema (Freedom UI).
Unlike the main app, the Freedom UI page schema of the mobile app has the following differences:
- It includes only source code in JSON format.
- You cannot access it to implement business logic using custom source code.
View the Freedom UI page schema sections of the mobile app in the table below.
Schema section | Description | |
|---|---|---|
DesignTime | RunTime | |
viewConfigDiff | viewConfig | Tree of Freedom UI components |
viewModelConfigDiff | viewModelConfig | Simple type attribute ( |
modelConfigDiff | modelConfig | Data sources and their dependencies |
Each schema section is a JSON configuration object that distinguishes the Freedom UI page schema from the parent schema. This lets you customize Freedom UI page schemas using schema inheritance.
View the example that demonstrates the schema structure of Freedom UI pages of the mobile app in the DesignTime mode below.
{
"viewConfigDiff": [{"operation":"insert","name":"ViewConfig","values":{"type":"crt.EditScreen","body":{},"actions":[],"floatActions":[]}}, ...],
"viewModelConfigDiff": [{"operation":"insert","name":"ViewModelConfig","values":{"attributes":{}}}, ...],
"modelConfigDiff": [{"operation":"insert","name":"ModelConfig","values":{"primaryDataSourceName":"PDS","dataSources":{},"dependencies":{}}}, ...]
}
Creatio merges all schemas and converts them into a resulting JSON object in the RunTime mode. You can see the RunTime mode schema sections only in the integrated developer tools provided by all supported browsers. View the example that demonstrates the resulting JSON object in the RunTime mode below.
{
"viewConfig": {
"body": {
"type": "crt.Tabs",
"items": [
{
"body": {
"type": "crt.AdaptiveLayout",
"items": [
{
"type": "crt.Area",
"visible": true,
"items": [
{
"value": "$Account",
"type": "crt.EditField"
}
],
"title": "Profile"
},
{
"type": "crt.Detail",
"items": "ContactCareerDetailV2EmbeddedDetail",
"title": "Job experience",
"itemLayout": {
"type": "crt.DetailItem",
"fields": [
{
"value": "$Account",
"type": "crt.ListItemBodyField"
},
{
"value": "$Job",
"type": "crt.ListItemBodyField"
}
]
},
"editColumns": [
{"columnName": "Account"},
{"columnName": "Job"}
]
}
],
"scrollable": true,
"columns": {"tabletLandscape": [3, 7]},
"padding": {"bottom": "floatingActionBottomPadding"}
},
"position": 0,
"text": "#ResourceSystemString(Screen.DefaultTab)",
"isTransparent": true
}
]
},
"actions": [],
"floatActions": [
{
"title": "#ResourceSystemString(Button.Copy)",
"clicked": {"request": "crt.CopyRecordRequest"}
},
{
"title": "#ResourceSystemString(Button.Delete)",
"clicked": {"request": "crt.DeleteRecordRequest"}
}
],
"header": {"type": "ContactCompactProfile"}
},
"viewModelConfig": {
"attributes": {
"Id": {"modelConfig": {"path": "PDS.Id"}},
"Account": {"modelConfig": {"path": "PDS.Account"}},
"ContactCareerDetailV2EmbeddedDetail": {
"modelConfig": {
"path": "ContactCareerDetailV2EmbeddedDetailDS",
"cacheConfig": {},
"sortingConfig": {
"default": [{"columnName": "CreatedOn", "direction": "asc"}]
}
}
},
"Name": {"modelConfig": {"path": "PDS.Name"}},
}
},
"modelConfig": {
"primaryDataSourceName": "PDS",
"dataSources": {
"PDS": {"config": {"entitySchemaName": "Contact"}},
"ContactCareerDetailV2EmbeddedDetailDS": {
"config": {
"entitySchemaName": "ContactCareer",
"attributes": {
"CreatedOn": {"path": "CreatedOn"},
"Account": {"path": "Account"},
"Job": {"path": "Job"}
}
}
}
},
"dependencies": {
"ContactCareerDetailV2EmbeddedDetailDS": [
{"attributePath": "Contact", "relationPath": "PDS.Id"}
],
"FileDetailV2EmbeddedDetailDS": [
{"attributePath": "Contact", "relationPath": "PDS.Id"}
]
}
}
}