Version: 8.2

Customize Freedom UI page for Mobile Creatio

Level: beginner

Use the Mobile application wizard to customize the Freedom UI page.

1. Make sure the page is converted to Freedom UI

Open the Mobile application wizard section. To do this, click in the top right → 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 if needed. Instructions: Set up mobile application section page (user documentation).
Make sure the Freedom UI checkbox is selected. Otherwise, select the checkbox.
Save the changes.

2. Add the schemas that configure manifest and page settings of Mobile Creatio section

Open the Mobile application wizard section. To do this, click in the top right → System setup → Mobile application wizard.
Open the needed workplace in the section list.
Open a list of workplace sections. To do this, click Actions → Set up sections.
Select the needed section in the section list.
Click Page setup.
Save the page.
Save the settings of the Mobile application wizard section.

3. Set up the page UI

1. Define the position of the Freedom UI component

If you want to add an arbitrary Freedom UI component to the Freedom UI page, open the page structure using the emulator. To do this:

Run Mobile Creatio using the emulator created in Android Studio. Instructions: Set up the mobile app emulator.
Synchronize Mobile Creatio with the main Creatio app.
1. Log in to Mobile Creatio using the same user credentials as the main Creatio app.
2. Open the Settings page. To do this, click .
3. Go to the Synchronization block.
4. Click Synchronize.
Open the emulator file system. To do this, go to the Android Studio's toolbar → click → View → Tool Windows → Device Explorer.
Synchronize the emulator file system. To do this, go to the Device Explorer tab → right-click an arbitrary directory → Synchronize.
Open the structure of the Freedom UI page to customize. To do this, click sdcard → Android → data → com.creatio.mobileapp → files → creatio → AppStructure → rev_0 → processed → open the Freedom UI page schema. For example, MobileFUIContactRecordPageSettingsDefaultWorkplace.

If the emulator file system includes a rev directory whose suffix differs from "0," navigate to this directory. The suffix determines the number of up-to-date mobile app properties.
Process the schema code using an arbitrary JSON formatter.
Find the needed page structure item to place the Freedom UI component.
Copy the item code from the name property. For example, Contact_PrimaryTab_Body_infoColumnSet_Type.

2. Configure the Freedom UI component

Keep in mind the following requirements for Freedom UI component code:

Creatio lets you use the Freedom UI component that does not have a Classic UI counterpart on the previously converted Classic UI page. For example, Contact compact profile. If you need to do this, use the merge type operation in the viewConfigDiff, viewModelConfigDiff, and modelConfigDiff schema sections.
Add the configuration object as a string.
Use escaped characters.

To configure the Freedom UI component:

Create a configuration object that configures the Freedom UI component. Learn more about the available Freedom UI components: Common Freedom UI components for Mobile Creatio, Freedom UI layout components for Mobile Creatio.

We recommend creating the object using an arbitrary text editor or external IDE. Use the copied item code as the parentName property value.

View the example that configures the button below.
viewConfigDiff schema section
```
"viewConfigDiff": [{
    "operation": "insert",
    "name": "SomeButton",
    "parentName": "Contact_PrimaryTab_Body_infoColumnSet_Type",
    "propertyName": "items",
    "values": {
        "type": "crt.Button",
        "caption": "Button",
        "clicked":{
            "request": "crt.CreateRecordRequest"
        }
    }
}]
```
Convert the configuration object to a string.
1. Open the Console tab in browser debugging tools.
2. Enter the JSON.stringify JavaScript command.
3. Pass the configuration object as the command value.
4. Press Enter.
View the string-converted configuration object below.
String-converted configuration object
```
'{"operation":"insert","name":"SomeButton","parentName":"Contact_PrimaryTab_Body_infoColumnSet_Type","propertyName":"items","values":{"type":"crt.Button","caption":"Button","clicked":{"request":"crt.CreateRecordRequest"}}}'
```
Escape characters of the string-converted configuration object.
1. Copy the string-converted configuration object inside ''.
2. Paste the string-converted configuration object to an arbitrary text editor or external IDE.
3. Replace " characters using \" characters.
View the escaped configuration object below.
Escaped configuration object
```
{\"operation\":\"insert\",\"name\":\"SomeButton\",\"parentName\":\"Contact_PrimaryTab_Body_infoColumnSet_Type\",\"propertyName\":\"items\",\"values\":{\"type\":\"crt.Button\",\"caption\":\"Button\",\"clicked\":{\"request\":\"crt.CreateRecordRequest\"}}}
```
Create a resulting configuration object that configures the Freedom UI component.
1. Copy the escaped configuration object.
2. Paste the escaped configuration object to the viewConfigDiff schema section in an arbitrary text editor or external IDE.
View the resulting configuration object that configures the Freedom UI component below.
viewConfigDiff schema section
```
"viewConfigDiff": "[{\"operation\":\"insert\",\"name\":\"SomeButton\",\"parentName\":\"Contact_PrimaryTab_Body_infoColumnSet_Type\",\"propertyName\":\"items\",\"values\":{\"type\":\"crt.Button\",\"caption\":\"Button\",\"clicked\":{\"request\":\"crt.CreateRecordRequest\"}}}]"
```

3. Add the Freedom UI component to the Freedom UI page

Open the Freedom UI page schema to customize. To do this, open the Configuration section → select the Freedom UI page schema. For example, MobileFUIContactRecordPageSettingsDefaultWorkplace. Instructions: Open the Configuration section.

Add the Freedom UI component.

Go to the component whose name property is set to "settings."
Add the resulting configuration object created on the previous step to the values configuration object.

View the example that configures the Freedom UI component below.

Example that configures the Freedom UI component
[
    {
        "operation": "insert",
        "name": "settings",
        "values": {
            "entitySchemaName": "Contacts",
            "settingsType": "RecordPage",
            "localizableStrings": {},
            "columnSets": [],
            "operation": "insert",
            "details": [],
            "viewConfigDiff": "[{\"operation\":\"insert\",\"name\":\"SomeButton\",\"parentName\":\"Contact_PrimaryTab_Body_infoColumnSet_Type\",\"propertyName\":\"items\",\"values\":{\"type\":\"crt.Button\",\"caption\":\"Button\",\"clicked\":{\"request\":\"crt.CreateRecordRequest\"}}}]"
            
        }
    }
]

Save the changes.

As a result, the Freedom UI page will be customized. Creatio will merge all schemas and convert them into a resulting JSON object.

1. Make sure the page is converted to Freedom UI​

2. Add the schemas that configure manifest and page settings of Mobile Creatio section​

3. Set up the page UI​

1. Define the position of the Freedom UI component​

2. Configure the Freedom UI component​

3. Add the Freedom UI component to the Freedom UI page​

See also​