Customize fields (Freedom UI)
Set up the field display condition
Detailed example: Set up the display condition of a page field.
To set up the field display condition:
-
Add a field to set the display condition if needed. Instructions: Fields and inputs (user documentation).
-
Add an attribute.
- Go to the
viewModelConfigDiffschema section →valuesconfiguration object. - Add an attribute that stores data.
View an example that adds the
SomeAttributeattribute to the Freedom UI page schema below.viewModelConfigDiff schema sectionviewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/[
{
"operation": "merge",
"path": [
"attributes"
],
"values": {
...,
/* An attribute that stores data. */
"SomeAttribute": {}
}
},
...
]/**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/, - Go to the
-
Bind an attribute to the field.
- Go to the
viewConfigDiffschema section → corresponding page element. - Bind the model attribute to the
visibleproperty. The value of this attribute controls whether the page displays or hides the field. Describe the business logic that changes the attribute value in thehandlersschema section. Thevisibleproperty is responsible for the visibility of the field.
View an example that binds the
visibleproperty to the$SomeAttributeattribute below.viewConfigDiff schema sectionviewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
...,
{
...,
"values": {
...,
/* The property that flags the field as visible. Bound to the "SomeAttribute" attribute. */
"visible": "$SomeAttribute"
},
...
}
]/**SCHEMA_VIEW_CONFIG_DIFF*/, - Go to the
-
Implement the base request handler.
-
Go to the
handlersschema section. -
Add a custom implementation of the
crt.HandleViewModelAttributeChangeRequestbase request handler.Run the handler when the value of any attribute changes, including changes made after loading the attribute values from the data source. Depending on the attribute value (
trueorfalse), the handler executes different business logic.
View an example of a
crt.HandleViewModelAttributeChangeRequestrequest handler, whose logic depends on theSomeAttributeattribute, below.handlers schema sectionhandlers: /**SCHEMA_HANDLERS*/[
{
request: "crt.HandleViewModelAttributeChangeRequest",
/* Custom implementation of a system request handler. */
handler: async (request, next) => {
/* Check the attribute value. */
if (request.attributeName === 'SomeAttribute') {
/* Implement the business logic. */
...,
/* If the condition is met, set the "SomeAttribute" attribute to "true." */
request.$context.SomeAttribute = someCondition;
}
/* Call the next handler if it exists and return its result. */
return next?.handle(request);
}
}
]/**SCHEMA_HANDLERS*/, -
Set up a condition that locks the field
Creatio lets you set up a condition that locks the field in the back-end. Instructions: Access management (user documentation).
Detailed example: Set up the condition that locks the field on a page.
To set up a condition that locks the field in the front-end:
- Add a field to set the display condition if needed. Instructions: Fields and inputs (user documentation).
- Add an attribute. Instructions: Set up the field display condition (step 2).
- Bind an attribute to the label. Instructions: Set up the field display condition (similarly to step 3). Instead of the
visibleproperty, use thereadonlyproperty that locks the field from editing. - Implement the base request handler. Instructions: Set up the field display condition (step 3).
Set up a field population condition
Detailed example: Set up the condition that populates a page field.
To set up a field population condition:
- Add a field to set the population condition if needed. Instructions: Fields and inputs (user documentation).
- Implement the base request handler. Instructions: Set up the field display condition (step 3).
Set up a field requirement condition
Detailed example: Set up the requirement condition of a page field.
To set up the field requirement condition:
-
Add a field to set the requirement condition if needed. Instructions: Fields and inputs (user documentation).
-
Bind a validator to the attribute.
- Go to the
viewModelConfigDiffschema section →valuesconfiguration object → corresponding page element. - Bind the
crt.Requiredtype validator that checks the attribute value to therequiredproperty.
View an example that binds the
crt.Requiredtype validator to theSomeAttributeattribute below.viewModelConfigDiff schema sectionviewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/[
{
...,
"values": {
...,
"SomeAttribute": {
...,
/* The property that contains the list of attribute validators. */
"validators": {
/* Flag the field as required. */
"required": {
"type": "crt.Required"
}
}
},
...,
}
},
...,
]/**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/, - Go to the
-
Implement the base request handler. Instructions: Set up the field display condition (step 3).
Implement field value validation
Detailed example: Implement the validation of a field value on a page.
Creatio applies validators to the attributes rather than visual elements, but validators can get the validity status data by using CrtControl. Learn more: validators schema section.
To implement field value validation:
-
Add a field whose value to validate if needed. Instructions: Fields and inputs (user documentation).
-
Implement a validator type.
-
Go to the
validatorsschema section. -
Implement a custom validator type. It must start with a vendor prefix. Format the validator type in PascalCase.
The
validatorsschema section lets you implement:- validator
- validator function (
function (config)) - validator parameters (
"params") - whether the validator is asynchronous (
asyncflag)
View an example that implements a custom
usr.SomeValidatorvalidator type below.validators schema sectionvalidators: /**SCHEMA_VALIDATORS*/{
/* Implement a custom validator type. */
"usr.SomeValidator": {
/* Business logic of the validator. */
"validator": function (config) {
return function (control) {
return control.value !== config.invalidName ? null: {
"usr.SomeValidator": { message: "Some message." }
};
};
},
/* Validator parameters. */
"params": [
{
"name": "parameter1"
},
{
"name": "message"
}
],
"async": false
}
}/**SCHEMA_VALIDATORS*/ -
-
Bind a validator to the attribute. Creatio lets you bind the validator to a dedicated attribute or multiple attributes by setting different parameters for each of the attributes.
- Go to the
viewModelConfigDiffschema section →valuesconfiguration object → corresponding page element. - Bind the custom validator of the dedicated type.
- Set the
parameter1property to the field value that triggers the custom validator. - Set the
messageproperty to the tooltip that Creatio displays when field contains the value specified in theparameter1property. The priority of themessageparameter of the attribute configuration object is higher than the priority of the corresponding validator parameter. I. e., for attributes that have amessageparameter set, Creatio generates the error message from the parameter, not from the validator body.
View an example that binds the
usr.SomeValidatorvalidator to theSomeAttribute1andSomeAttribute2attributes below.viewModelConfigDiff schema sectionviewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/[
{
"operation": "merge",
"path": [
"attributes"
],
"values": {
...,
"SomeField": {
...,
/* The property that contains the list of attribute validators. */
"validators": {
/* Bind a custom validator to an attribute. */
"SomeAttribute1": {
/* Validator type. */
"type": "usr.SomeValidator",
"params": {
/* The field value that triggers the custom validator. */
"parameter1": "Some parameter value 1",
/* The tooltip that Creatio displays when the field contains the value specified in the "parameter1" property. */
"message": "#ResourceString(SomeText)#"
}
},
/* Bind a custom validator to an attribute. */
"SomeAttribute2": {
"type": "usr.SomeValidator",
"params": {
"parameter1": "Some error message"
}
}
}
},
...,
}
},
...,
]/**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/,If an error occurs, the
SomeTextlocalized string specified in theSomeAttribute1attribute is displayed for theSomeAttribute1attribute, and theSome error messagevalue specified in the validator body is displayed for theSomeAttribute2attribute. - Go to the
To disable a validator, set the disabled property of the corresponding validator to true (disabled: true).
Implement field value conversion
Detailed example: Implement the conversion of a field value on a page.
Learn more: converters schema section.
Converters have the following special features:
- applicable only in the
RunTimemode - not applicable to constants
- only work in one direction, cannot be used with
CrtControl
To implement field value conversion:
-
Add a field whose value to convert if needed. Instructions: Fields and inputs (user documentation).
-
Implement a converter.
- Go to the
convertersschema section. - Implement a custom converter. It must start with a vendor prefix. Format the converter type in PascalCase.
View an example that implements a custom
usr.SomeConverterconverter below.converters schema sectionconverters: /**SCHEMA_CONVERTERS*/{
/* Implement a custom converter. */
"usr.SomeConverter": function(value) {
...;
}
}/**SCHEMA_CONVERTERS*/, - Go to the
-
Bind a converter to the attribute.
- Go to the
viewConfigDiffschema section → corresponding page element. - Bind the converter to the attribute. Use the pipe character to set the converter.
View an example that binds the
usr.SomeConverterconverter to the$SomeAttributeattribute below.viewConfigDiff schema sectionviewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
{
"values": {
/* Bind the "usr.SomeConverter" converter to the "$SomeAttribute" attribute. */
"caption": "$SomeAttribute | usr.SomeConverter",
}
}
]/**SCHEMA_VIEW_CONFIG_DIFF*/,Besides simple converters, Creatio provides chains of converters. A converter chain includes multiple converters that are applied to an attribute in a single property.
View an example that binds a chain of converters (
crt.ToBooleanandcrt.InvertBooleanValue) to the$SomeAttributeattribute below.viewConfigDiff schema sectionviewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
{
/* Bind the "crt.ToBoolean" and "crt.InvertBooleanValue" converters to the "$SomeAttribute" attribute. */
"visible": "$SomeAttribute | crt.ToBoolean | crt.InvertBooleanValue",
},
]/**SCHEMA_VIEW_CONFIG_DIFF*/,Creatio lets you set converter parameters. You can use the same converter multiple times by setting different parameter values. To set the converter parameters, specify the parameter value with the
:prefix after the converter type. Place the colon character in front of each converter parameter value.Available values of converter parameters:
- String. Enclose a string value in single quotes.
- Number.
trueorfalse.- A binding to another attribute.
View an example that binds the
exmpl.Concatconverter that has aSomeParameterstring parameter to the$SomeAttributeattribute below. Note thatexmpl.Concatis an example converter and is not available for solving actual business problems.viewConfigDiff schema sectionviewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
{
/* Bind the "exmpl.Concat" converter with the "SomeParameter" parameter to the "$SomeAttribute" attribute. */
"visible": "$SomeAttribute | exmpl.Concat:' ':$SomeParameter",
},
]/**SCHEMA_VIEW_CONFIG_DIFF*/, - Go to the
Converters are not available for the following binding types:
- binding to resource attribute
- function binding
- binding an event to a model method
Change the out-of-the-box sorting of values in a field and column of the "lookup" type
Out of the box, Creatio sorts values of the Dropdown field type and lookup type column in the Expanded list and List components in ascending order but you can change out-of-the-box sorting. General procedure to change out-of-the-box sorting of values differs for Dropdown field type and lookup type column in the Expanded list and List components.
Change the sorting of the Dropdown type field values
-
Add a field of the Dropdown type to change the sorting of values if needed. Instructions: Set up a Dropdown field (user documentation).
View the example that adds a Dropdown field type whose
nameproperty isComboBox_6zreoq8below.viewConfigDiff schema sectionviewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
...,
/* "Dropdown" field type. */
{
"operation": "insert",
"name": "ComboBox_6zreoq8",
"values": {
...,
"control": "$PDS_UsrColumn1_a66kg7i",
...
},
...
},
...
]/**SCHEMA_VIEW_CONFIG_DIFF*/, -
Add an attribute that stores list of Dropdown type field values.
- Go to the
viewConfigDiffschema section → Dropdown page element →controlproperty. - Copy the attribute without the "$" character. For example,
PDS_UsrColumn1_a66kg7i. - Go to the
viewModelConfigDiffschema section →valuesconfiguration object. - Paste the attribute.
- Add the
_Listsuffix to the attribute.
View the example that adds the
PDS_UsrColumn1_a66kg7i_Listattribute to the Freedom UI page schema below.viewModelConfigDiff schema sectionviewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/[
{
"operation": "merge",
"path": [
"attributes"
],
"values": {
...,
"PDS_UsrColumn1_a66kg7i": {
"modelConfig": {
"path": "PDS.UsrColumn1"
}
},
"PDS_UsrColumn1_a66kg7i_List": {}
}
...
}
]/**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/, - Go to the
-
Change the sorting using the
sortingConfignested properties.Property
Property description
columnName
lookuptype column whose values to sort in the Dropdown type field.direction
Sorting order. Available values:
asc(ascending),desc(descending).View the example that sorts the Name column of the
lookuptype in descending order below.viewModelConfigDiff schema sectionviewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/[
{
"operation": "merge",
"path": [
"attributes"
],
"values": {
...,
"PDS_UsrColumn1_a66kg7i_List": {
"modelConfig": {
/* Set up collection sorting.*/
"sortingConfig": {
"default": [
{
/* "Lookup" type column whose values to sort. */
"columnName": "Name",
/* Sorting order. */
"direction": "desc"
}
]
}
}
}
}
...
}
]/**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/,
Change the sorting of the values in the "lookup" type column added to the Expanded list or List component
-
Add an Expanded list or List component that includes the
lookuptype column to change the sorting of values if needed. Instructions: Set up List components (user documentation).View the example that adds an Expanded list component that includes the
lookuptype column whosecodeproperty isPDS_UsrColumn1below.viewConfigDiff schema sectionviewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
...,
/* "Expanded list" component. */
{
"operation": "insert",
"name": "ExpansionPanel_bgfnotq",
"values": {
...
},
"parentName": "GeneralInfoTab",
"propertyName": "items",
"index": 1
},
{
"operation": "insert",
"name": "GridContainer_97wx07j",
"values": {
...
},
"parentName": "ExpansionPanel_bgfnotq",
"propertyName": "tools",
"index": 0
},
{
"operation": "insert",
"name": "FlexContainer_sgydh2s",
"values": {
...
},
"parentName": "GridContainer_97wx07j",
"propertyName": "items",
"index": 0
},
{
"operation": "insert",
"name": "GridDetailAddBtn_ccm1d3b",
"values": {
...
},
"parentName": "FlexContainer_sgydh2s",
"propertyName": "items",
"index": 0
},
{
"operation": "insert",
"name": "GridDetailRefreshBtn_kncmlkw",
"values": {
...
},
"parentName": "FlexContainer_sgydh2s",
"propertyName": "items",
"index": 1
},
{
"operation": "insert",
"name": "GridDetailSettingsBtn_uohba8p",
"values": {
...
},
"parentName": "FlexContainer_sgydh2s",
"propertyName": "items",
"index": 2
},
{
"operation": "insert",
"name": "GridDetailExportDataBtn_jrovafm",
"values": {
...
},
"parentName": "GridDetailSettingsBtn_uohba8p",
"propertyName": "menuItems",
"index": 0
},
{
"operation": "insert",
"name": "GridDetailImportDataBtn_q7yyoe6",
"values": {
...
},
"parentName": "GridDetailSettingsBtn_uohba8p",
"propertyName": "menuItems",
"index": 1
},
{
"operation": "insert",
"name": "GridDetailSearchFilter_q1bmh3d",
"values": {
...
},
"parentName": "FlexContainer_sgydh2s",
"propertyName": "items",
"index": 3
},
{
"operation": "insert",
"name": "GridContainer_6gpjgwm",
"values": {
...
},
"parentName": "ExpansionPanel_bgfnotq",
"propertyName": "items",
"index": 0
},
{
"operation": "insert",
"name": "GridDetail_jic2y17",
"values": {
"type": "crt.DataGrid",
"layoutConfig": {
"colSpan": 2,
"column": 1,
"row": 1,
"rowSpan": 6
},
"features": {
"rows": {
"selection": {
"enable": true,
"multiple": true
}
}
},
"items": "$GridDetail_jic2y17",
"visible": true,
"fitContent": true,
"primaryColumnName": "GridDetail_jic2y17DS_Id",
"columns": [
{
"id": "f252f581-0ccf-44ac-b7c9-c00df2ad9919",
"code": "PDS_UsrName",
"caption": "#ResourceString(PDS_UsrName)#",
"dataValueType": 1
},
{
"id": "558f36b0-07c2-c80d-3e3d-4dec75a18752",
"code": "PDS_UsrColumn3",
"caption": "#ResourceString(PDS_UsrColumn3)#",
"dataValueType": 10
}
],
"placeholder": false
},
"parentName": "GridContainer_6gpjgwm",
"propertyName": "items",
"index": 0
}
...
]/**SCHEMA_VIEW_CONFIG_DIFF*/, -
Add an attribute that stores list of lookup values.
- Go to the
viewConfigDiffschema section → GridDetail page element →valuesconfiguration object →columnsarray → correspondinglookuptype column →codeproperty. - Copy the attribute. For example,
PDS_UsrColumn1. - Go to the
viewModelConfigDiffschema section →valuesconfiguration object →GridDetailconfiguration object →viewModelConfigconfiguration object →attributesconfiguration object. - Paste the attribute.
- Add the
_Listsuffix to the attribute.
View the example that adds the
PDS_UsrColumn1_Listattribute to the Freedom UI page schema below.viewModelConfigDiff schema sectionviewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/[
{
"operation": "merge",
"path": [
"attributes"
],
"values": {
...,
"GridDetail_jic2y17": {
"viewModelConfig": {
"attributes": {
...,
"PDS_UsrColumn1_List": {}
}
}
}
}
...
}
]/**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/, - Go to the
-
Change the sorting using the
sortingConfignested properties.Property
Property description
columnName
lookuptype column whose values to sort in the Expanded list or List component.direction
Sorting order. Available values:
asc(ascending),desc(descending).View the example that sorts the Name column of the
lookuptype in descending order below.viewModelConfigDiff schema sectionviewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/[
{
"operation": "merge",
"path": [
"attributes"
],
"values": {
...,
"GridDetail_jic2y17": {
"viewModelConfigDiff": {
"attributes": {
...,
"PDS_UsrColumn1_List": {
"modelConfig": {
/* Set up collection sorting.*/
"sortingConfig": {
"default": [
{
/* "Lookup" type column whose values to sort. */
"columnName": "Name",
/* Sorting order. */
"direction": "desc"
}
]
}
}
}
}
}
}
}
...
}
]/**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/,
Filter of values in a field and column of the "lookup" type
General procedure to change out-of-the-box sorting of values differs for Dropdown field type and lookup type column in the Expanded list and List components.
Filter of the Dropdown type field values
-
Add a field of the Dropdown type to filter values if needed. Instructions: Set up a Dropdown field (user documentation).
View the example that adds a Dropdown field type whose
nameproperty isComboBox_x7x538ubelow.viewConfigDiff schema sectionviewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
...,
/* "Dropdown" field type. */
{
"operation": "insert",
"name": "ComboBox_x7x538u",
"values": {
...,
"control": "$PDS_UsrColumn1_b7xlx2a",
...
},
...
},
...
]/**SCHEMA_VIEW_CONFIG_DIFF*/, -
Add an attribute that stores list of Dropdown type field values.
- Go to the
viewConfigDiffschema section → Dropdown page element →controlproperty. - Copy the attribute without the "$" character. For example,
PDS_UsrColumn1_b7xlx2a. - Go to the
viewModelConfigDiffschema section →valuesconfiguration object. - Paste the attribute.
- Add the
_Listsuffix to the attribute.
View the example that adds the
PDS_UsrColumn1_b7xlx2a_Listattribute to the Freedom UI page schema below.viewModelConfigDiff schema sectionviewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/[
{
"operation": "merge",
"path": [
"attributes"
],
"values": {
...,
"PDS_UsrColumn1_b7xlx2a": {
"modelConfig": {
"path": "PDS.UsrColumn1"
}
},
"PDS_UsrColumn1_b7xlx2a_List": {}
}
...
}
]/**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/, - Go to the
-
Set up filtering.
-
Specify an attribute that configures the filter using the
filterAttributesnested properties.Property
Property description
name
Attribute that configures the filter.
loadOnChange
true. This enables reloading the collection on filter change. -
Set filter parameters.
View the example that filters the City column values based on the Country column value below.
viewModelConfigDiff schema sectionviewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/[
{
"operation": "merge",
"path": [
"attributes"
],
"values": {
...,
"PDS_UsrColumn1_b7xlx2a_List": {
"modelConfig": {
"filterAttributes": [
{
/* Enable reloading the collection on filter change. */
"loadOnChange": true,
/* An attribute that configures the filter. */
"name": "City_PredefinedFilter"
}
]
}
},
/* Filter parameters. */
"City_PredefinedFilter": {
/* Main container that includes filter parameters. */
"value": {
/* List of filter conditions. */
"items": {
/* Identifier of specific filter condition. */
"0b410605-82dd-4881-a784-6d8164635568": {
/* "Expression filter" filter type. */
"filterType": 4,
/* "Equals" comparison type. */
"comparisonType": 3,
/* Expression of the left side of the filter condition. */
"leftExpression": {
/* "Column" expression type. */
"expressionType": 0,
/* The "Country" column to filter. */
"columnPath": "Country"
},
/* Mark the filter as not aggregative. */
"isAggregative": false,
/* "Lookup" type of data to filter. */
"dataValueType": 10,
/* Object schema name that implements column to filter. */
"referenceSchemaName": "Country",
/* Expression of the right side of the filter condition. */
"rightExpressions": [
{
/* "Parameter" expression type. */
"expressionType": 2,
/* Parameter of the right side of the filter. */
"parameter": {
/* "Lookup" type of data to filter. */
"dataValueType": 10,
/* "Country" column value that filters the "City" column values. */
"value": {
/* Lookup value. */
"Name": "United States",
/* Identifier of lookup value. */
"Id": "e0be1264-f36b-1410-fa98-00155d043204",
/* Identifier of lookup value. */
"value": "e0be1264-f36b-1410-fa98-00155d043204",
/* Lookup value to display. */
"displayValue": "United States"
}
}
}
]
}
},
/* The logical operation type that combines both the filters. */
"logicalOperation": 0,
/* "Group filter" filter type. */
"filterType": 6
}
}
}
...
}
]/**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/,
-
Filter the values in the "lookup" type column added to the Expanded list or List component
-
Add an Expanded list or List component that includes the
lookuptype column if needed. Instructions: Set up List components (user documentation).View the example that adds an Expanded list component that includes the
lookuptype column whosenameproperty isPDS_UsrColumn1below.viewConfigDiff schema sectionviewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
...,
/* "Expanded list" component. */
{
"operation": "insert",
"name": "ExpansionPanel_bgfnotq",
"values": {
...
},
"parentName": "GeneralInfoTab",
"propertyName": "items",
"index": 1
},
{
"operation": "insert",
"name": "GridContainer_97wx07j",
"values": {
...
},
"parentName": "ExpansionPanel_bgfnotq",
"propertyName": "tools",
"index": 0
},
{
"operation": "insert",
"name": "FlexContainer_sgydh2s",
"values": {
...
},
"parentName": "GridContainer_97wx07j",
"propertyName": "items",
"index": 0
},
{
"operation": "insert",
"name": "GridDetailAddBtn_ccm1d3b",
"values": {
...
},
"parentName": "FlexContainer_sgydh2s",
"propertyName": "items",
"index": 0
},
{
"operation": "insert",
"name": "GridDetailRefreshBtn_kncmlkw",
"values": {
...
},
"parentName": "FlexContainer_sgydh2s",
"propertyName": "items",
"index": 1
},
{
"operation": "insert",
"name": "GridDetailSettingsBtn_uohba8p",
"values": {
...
},
"parentName": "FlexContainer_sgydh2s",
"propertyName": "items",
"index": 2
},
{
"operation": "insert",
"name": "GridDetailExportDataBtn_jrovafm",
"values": {
...
},
"parentName": "GridDetailSettingsBtn_uohba8p",
"propertyName": "menuItems",
"index": 0
},
{
"operation": "insert",
"name": "GridDetailImportDataBtn_q7yyoe6",
"values": {
...
},
"parentName": "GridDetailSettingsBtn_uohba8p",
"propertyName": "menuItems",
"index": 1
},
{
"operation": "insert",
"name": "GridDetailSearchFilter_q1bmh3d",
"values": {
...
},
"parentName": "FlexContainer_sgydh2s",
"propertyName": "items",
"index": 3
},
{
"operation": "insert",
"name": "GridContainer_6gpjgwm",
"values": {
...
},
"parentName": "ExpansionPanel_bgfnotq",
"propertyName": "items",
"index": 0
},
{
"operation": "insert",
"name": "GridDetail_jic2y17",
"values": {
"type": "crt.DataGrid",
"layoutConfig": {
"colSpan": 2,
"column": 1,
"row": 1,
"rowSpan": 6
},
"features": {
"rows": {
"selection": {
"enable": true,
"multiple": true
}
}
},
"items": "$GridDetail_jic2y17",
"visible": true,
"fitContent": true,
"primaryColumnName": "GridDetail_jic2y17DS_Id",
"columns": [
{
"id": "f252f581-0ccf-44ac-b7c9-c00df2ad9919",
"code": "PDS_UsrName",
"caption": "#ResourceString(PDS_UsrName)#",
"dataValueType": 1
},
{
"id": "558f36b0-07c2-c80d-3e3d-4dec75a18752",
"code": "PDS_UsrColumn3",
"caption": "#ResourceString(PDS_UsrColumn3)#",
"dataValueType": 10
}
],
"placeholder": false
},
"parentName": "GridContainer_6gpjgwm",
"propertyName": "items",
"index": 0
}
...
]/**SCHEMA_VIEW_CONFIG_DIFF*/, -
Add an attribute that stores list of lookup values.
- Go to the
viewConfigDiffschema section → GridDetail page element →valuesconfiguration object →columnsarray → correspondinglookuptype column →codeproperty. - Copy the attribute. For example,
PDS_UsrColumn1. - Go to the
viewModelConfigDiffschema section →valuesconfiguration object →GridDetailconfiguration object →viewModelConfigconfiguration object →attributesconfiguration object. - Paste the attribute.
- Add the
_Listsuffix to the attribute.
View the example that adds the
PDS_UsrColumn1_Listattribute to the Freedom UI page schema below.viewModelConfigDiff schema sectionviewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/[
{
"operation": "merge",
"path": [
"attributes"
],
"values": {
...,
"GridDetail_jic2y17": {
"viewModelConfigDiff": {
"attributes": {
...,
"PDS_UsrColumn1_List": {}
}
}
}
}
...
}
]/**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/, - Go to the
-
Set up filtering.
-
Specify an attribute that configures the filter using the
filterAttributesnested properties.Property
Property description
name
Attribute that configures the filter.
loadOnChange
true. This enables reloading the collection on filter change. -
Set filter parameters.
View the example that filters the City column values based on the Country column value below.
viewModelConfigDiff schema sectionviewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/[
{
"operation": "merge",
"path": [
"attributes"
],
"values": {
...,
"GridDetail_jic2y17": {
"viewModelConfigDiff": {
"attributes": {
...,
"PDS_UsrColumn1_List": {
"modelConfig": {
"filterAttributes": [
{
/* Enable reloading the collection on filter change. */
"loadOnChange": true,
/* An attribute that configures the filter. */
"name": "City_PredefinedFilter"
}
]
}
},
/* Filter parameters. */
"City_PredefinedFilter": {
/* Main container that includes filter parameters. */
"value": {
/* List of filter conditions. */
"items": {
/* Identifier of specific filter condition. */
"5ec9ffbb-5c00-4cc1-abb4-958b16d45448": {
/* "Expression filter" filter type. */
"filterType": 4,
/* "Equals" comparison type. */
"comparisonType": 3,
/* Expression of the left side of the filter condition. */
"leftExpression": {
/* "Column" expression type. */
"expressionType": 0,
/* The "Country" column to filter. */
"columnPath": "Country"
},
/* Mark the filter as not aggregative. */
"isAggregative": false,
/* "Lookup" type of data to filter. */
"dataValueType": 10,
/* Object schema name that implements column to filter. */
"referenceSchemaName": "Country",
/* Expression of the right side of the filter condition. */
"rightExpressions": [
{
/* "Parameter" expression type. */
"expressionType": 2,
/* Parameter of the right side of the filter. */
"parameter": {
/* "Lookup" type of data to filter. */
"dataValueType": 10,
/* "Country" column value that filters the "City" column values. */
"value": {
/* Lookup value. */
"Name": "United States",
/* Identifier of lookup value. */
"Id": "e0be1264-f36b-1410-fa98-00155d043204",
/* Identifier of lookup value. */
"value": "e0be1264-f36b-1410-fa98-00155d043204",
/* Lookup value to display. */
"displayValue": "United States"
}
}
}
]
}
},
/* The logical operation type that combines both the filters. */
"logicalOperation": 0,
/* "Group filter" filter type. */
"filterType": 6
}
}
}
}
}
}
...
}
]/**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/,
-
Add additional formatting options to the toolbar of the Rich text type field
This functionality is available for Creatio 8.2.2 and later.
Out of the box, when you use the Rich text type field, Creatio displays toolbar that has pre-installed text formatting options. Since version 8.2.2, you can extend out-of-the-box toolbar by adding the following formatting options:
- Table of contents
- Block quote
- Code snippet
To add additional formatting options to the toolbar of the Rich text type field:
-
Add a field of the Rich text type whose toolbar to extend if needed. Instructions: Set up a Rich text field (user documentation).
View the example that adds a Rich text field type below.
viewConfigDiff schema sectionviewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
...,
/* "Rich text" field type. */
{
"operation": "insert",
"name": "RichTextEditor",
"values": {
"layoutConfig": {
"column": 1,
"row": 2,
"colSpan": 1,
"rowSpan": 1
},
"type": "crt.RichTextEditor",
"label": "$Resources.Strings.PDS_UsrRichText_pl3y87t",
"labelPosition": "auto",
"control": "$PDS_UsrRichText_pl3y87t",
"filesStorage": {
"masterRecordColumnValue": "$Id",
"entitySchemaName": "SysFile",
"recordColumnName": "RecordId"
}
},
"parentName": "SideAreaProfileContainer",
"propertyName": "items",
"index": 1
}
...
]/**SCHEMA_VIEW_CONFIG_DIFF*/, -
Add additional formatting options to the toolbar.
-
Go to the
viewConfigDiffschema section →RichTextEditorpage element →valuesproperty. -
Add the
extraPluginsarray. -
Add formatting option based on your business goal.
Property
Additional formatting option
Purpose of additional formatting option
crttableofcontents
Table of contents
Navigate long articles effortlessly using an auto-generated outline.
blockquote
Block quote
Highlight important references and external sources.
codesnippet
Code snippet
Display code examples using proper formatting for better readability.
View the example that adds additional formatting options to the toolbar of the Rich text field type below.
viewConfigDiff schema sectionviewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
...,
/* "Rich text" field type. */
{
"operation": "insert",
"name": "RichTextEditor",
"values": {
...,
/* Additional formatting options. */
"extraPlugins": [
"crttableofcontents",
"blockquote",
"codesnippet"
]
},
...
}
...
]/**SCHEMA_VIEW_CONFIG_DIFF*/, -
As a result, additional formatting options will be added to the toolbar of the Rich text type field and you will be able to use additional formatting options.
Add table of contents to the Rich text type field
- Go to the Rich text type field.
- Click
.
As a result, the Rich text type field will include the table of contents based on the headings on the page. The content is updated when you finish editing the field.
Add block quote to the Rich text type field
- Go to the Rich text type field.
- Click
. This enables quotations and changes the icon to 
.
As a result, the Rich text type field will include the block quote. All text you add is a part of quote until you disable the formatting option by clicking the icon.
Add code snippet to the Rich text type field
-
Go to the Rich text type field.
-
Click
. This opens the Code snippet window. -
Fill out the properties of the code snippet.
Property
Property description
Language
Select language of the code snippet.
Available values
Bash, C++, C#, CSS, HTML, HTTP, Java, JavaScript, JSON, PHP, PostgreSQL, Python, Ruby, SCSS, SQL, TypeScript, XML
Code snippet area
Enter the source code.
-
Click OK.
As a result, the Rich text type field will include the code snippet.
See also
Fields and inputs (user documentation)