Bind Freedom UI component to the attribute value for Mobile Creatio

Level: beginner

Use data bindings to ensure data visualization in Creatio UI and synchronization of this data operate as intended.

The viewConfig schema section of the Freedom UI page implements a tree of Freedom UI components. A Freedom UI component can contain parameters that have constant or dynamic values. Creatio lets you bind the parameter value to the attribute value from the viewModelConfig schema section.

Creatio lets you bind the parameter value to the following attribute types:

attribute that contains nested view model instance
custom attribute
resource attribute

To bind the parameter value to the attribute value, use the following pattern: $SomeAttributeName, where SomeAttributeName is an arbitrary name of the attribute from the viewModelConfig schema section.

Bind Freedom UI component to the attribute that contains nested view model instance

Implement the data source. Instructions: Implement the data source (steps 1-3).
Go to the viewModelConfig schema section.

Add an attribute if needed. To do this, add the column to the attributes configuration object property. For example, add the Account column.

viewModelConfig schema section
"viewModelConfig": {
    ...,
    "attributes": {
        "Account": {
            "modelConfig": {
                "path": "PDS.Account"
            }
        }
    }
},
...

As a result, Creatio will load data from the column and set the corresponding attribute.

Creatio lets you configure the column paths relative to the root schema. Instructions: Configure the column paths relative to the root schema.

For example, add the TimeZone column from the City root schema.

viewModelConfig schema section
"viewModelConfig": {
    ...,
    "attributes": {
        "City.TimeZone": {
            "modelConfig": {
                "path": "PDS.City.TimeZone"
            }
        }
    }
},
...

Go to the viewConfig schema section.
Bind the parameter value to the attribute value. For example, bind the Input component to the $Account attribute value.
viewConfig schema section
```
"viewConfig": {
    ...,
    "type": "crt.EditField",
    "value": "$Account",
    ...
},
...
```

As a result, Creatio will display the attribute value as the value of the bound component parameter. Creatio will update the parameter value when the attribute value changes.

Bind Freedom UI component to the custom attribute

Implement the data source. Instructions: Implement the data source (steps 1-3).
Go to the viewModelConfig schema section.
Add an attribute if needed. To do this, add the custom attribute to the attributes configuration object property. For example, add the SomeAttribute attribute.
viewModelConfig schema section
```
"viewModelConfig": {
    ...,
    "attributes": {
        "SomeAttribute": {}
    }
},
...
```
Creatio lets you configure the default attribute value. To do this, add the default value to the value attribute property.

For example, use the DefaultAttributeValue value as the default attribute property.
viewModelConfig schema section
```
"viewModelConfig": {
    ...,
    "attributes": {
        "SomeAttribute": {
            "value": "DefaultAttributeValue"
        }
    }
},
...
```
Go to the viewConfig schema section.
Bind the parameter value to the attribute value. For example, bind the Button component to the $SomeAttribute attribute value.
viewConfig schema section
```
"viewConfig": {
    ...,
    "type": "crt.Button",
    "value": "$SomeAttribute",
    ...
},
...
```

As a result, Creatio will display the attribute value as the value of the bound component parameter. Creatio will update the parameter value when the attribute value changes.

Bind Freedom UI component to the resource attribute

Implement the data source. Instructions: Implement the data source (steps 1-3).
Add a resource attribute if needed. Instructions: Add a localizable string. For example, add the SomeString localizable string.
Go to the viewConfig schema section.
Bind the parameter value to the resource attribute value. For example, bind the Button component to the SomeString attribute value.
viewConfig schema section
```
"viewConfig": {
    ...,
    "type": "crt.Button",
    "value": "#ResourceString(SomeString)#",
    ...
},
...
```

As a result, Creatio will display the attribute value as the value of the bound component parameter. Creatio will update the parameter value when the attribute value changes.

Bind a converter to the attribute of the Freedom UI component

Implement the data source. Instructions: Implement the data source (steps 1-3).
Go to the viewModelConfig schema section.
Add an attribute if needed. To do this, add the custom attribute to the attributes configuration object property. For example, add the SomeAttribute attribute.
viewModelConfig schema section
```
"viewModelConfig": {
    ...,
    "attributes": {
        "SomeAttribute": {}
    }
},
...
```
Go to the viewConfig schema section.
Bind the converter to the attribute value. For example, bind the crt.ToObjectProp converter to the $SomeAttribute attribute of the Button component.
viewConfig schema section
```
"viewConfig": {
    ...,
    "type": "crt.Button",
    "value": "$SomeAttribute | crt.ToObjectProp : 'someProperty':'somePropertyValue'",
    ...
},
...
```

As a result, Creatio will display the value of the specified object property as the attribute value.

Bind Freedom UI component to the attribute that contains nested view model instance​

Bind Freedom UI component to the custom attribute​

Bind Freedom UI component to the resource attribute​

Bind a converter to the attribute of the Freedom UI component​

See also​

Bind Freedom UI component to the attribute that contains nested view model instance

Bind Freedom UI component to the custom attribute

Bind Freedom UI component to the resource attribute

Bind a converter to the attribute of the Freedom UI component

See also