Common Freedom UI components for Mobile Creatio
This functionality is available for Creatio 8.0.10 and later.
Button
Use the Button component to add buttons.
View the example of a configuration object that adds the button below.
{
"type": "crt.Button",
"clicked": {
/* Creatio lets you bind the sending of base request to the button click event. Custom requests are not supported. */
"request": "crt.CreateRecordRequest"
},
"icon": "open-button-icon",
"caption": "Button",
"color": "primary",
"size": "medium",
"iconPosition": "left-icon"
}
Common properties
type
Component type. crt.Button for the Button component.
clicked
The request fires when a user clicks the button. Creatio lets you bind the sending of base request to the button click event. Custom requests are not supported.
icon
Icon to display next to the menu item caption.
Available values
caption
Localizable button caption.
Optional properties
color
Button style. By default, default.
Available values
size
Button size. By default, large.
iconPosition
Position of the icon relative to the button caption. By default, left-icon.
Available values
Input
Use the Input component to modify the component data. Before you use the component, make sure that the viewModelConfig schema section includes the attribute bound to the Input component.
View the example that adds an attribute to the Freedom UI page schema below.
{
"viewModelConfig": {
"attributes": {
"SomeAttribute": {
"modelConfig": {"path": "PDS.Title"},
"name": "SomeAttribute"
}
}
}
}
Mobile Creatio lets you modify the text, lookup, double, integer, date, boolean, phone, email, web, rich text, and color Input component types.
View the example of a configuration object that modifies data below.
{
"type": "crt.EditField",
"value": "$SomeAttribute",
"minLines": 2,
"maxLines": 5,
"hintText": "Enter title",
"readOnly": false,
"label": {
"visible": true,
"value": "Title",
"position": "left"
}
}
type
Component type. crt.EditField for the Input component.
value
The name of attribute from the viewModelConfig schema section.
minLines
Minimum number of lines in the component. Available for the text, email, web Input component types.
maxLines
Maximum number of lines in the component. Available for the text, email, web Input component types.
hintText
The hint that Mobile Creatio displays in the component when a user omits the component value.
readOnly
The flag that sets the component to read-only. By default, false.
Available values
true | The component is editable |
false | The component is not editable |
label
The component title. If a value is omitted, Mobile Creatio displays the DataSchemaAttribute.caption property value.
Parameters
visible | The flag that makes the component label visible. By default, Available values
| ||||||||
value | The label value. By default, the title is the same as the title of the corresponding model field. | ||||||||
position | The label position. By default, Available values
|
Read-only input
Use the Read-only input component to display the component data. Before you use the component, make sure that the viewModelConfig schema section includes the attribute bound to the Read-only input component.
View the example that adds an attribute to the Freedom UI page schema below.
{
"viewModelConfig": {
"attributes": {
"SomeAttribute": {
"modelConfig": {"path": "PDS.Title"},
"name": "SomeAttribute"
}
}
}
}
Mobile Creatio lets you display the text, lookup, double, integer, date, boolean, phone, email, web, rich text, and color Read-only input component types.
View the example of a configuration object that displays data below.
{
"type": "crt.ViewField",
"value": "$SomeAttribute",
"maxLines": 2,
"label": {
"visible": true,
"value": "Title",
"position": "left"
},
"launchConfig": {
"name": "ConfigurationOptionalName",
"type": "phone",
"bindingColumn": "CommunicationType",
"binding": {
...
},
}
}
type
Component type. crt.ViewField for the Read-only input component.
value
The name of attribute from the viewModelConfig schema section.
maxLines
Maximum number of lines in the component to display.
label
The component title. If a value is omitted, Mobile Creatio displays the DataSchemaAttribute.caption property value.
Parameters
visible | The flag that makes the component label visible. By default, Available values
| ||||||||
value | The label value. By default, the title is the same as the title of the corresponding model field. | ||||||||
position | The label position. By default, Available values
|
launchConfig
Add link to the component. If you omit the type property, Creatio analyzes the values of the binding and bindingColumn properties. The bindingColumn property configures the content provider launched based on the value set in the binding property.
Parameters
name | Link name | ||||||||
type | Link type Available values
| ||||||||
bindingColumn | Name of the column that determines the type of opened link | ||||||||
binding | Record ID that determines the type of opened link |
Embedded list
Use the Embedded list component to add embedded list. Before you use the component, make sure that the Freedom UI page schema includes the data source. Learn more: Operations with data for Mobile Creatio.
View the example of a configuration object that adds embedded list below.
{
"type": "crt.Detail",
"items": "ItemAttribute",
"title": "Contact in opportunity",
"itemLayout": {
"type": "crt.ListItem",
"body": [{"value": "\$Contact"}]
},
"editColumns": [{"columnName": "Contact"}]
}
type
Component type. crt.Detail for the Embedded list component.
items
The attribute from the viewModelConfig schema section.
title
The component title.
itemLayout
Configuration object that configures parameters of component to display in the Embedded list component.
Parameters
type | The component type to display in the Embedded list component. In most cases, |
body | Parameters of the component of |
editColumns
List of editable columns.
List item preview
Use the List item preview component to preview a list item.
View the example of a configuration object that previews a list item below.
{
"type": "crt.ListItem",
"title": "\$Name",
"subtitles": ["\$Account"],
"body": [
{"value": "\$JobTitle"},
{"value": "\$MobilePhone"}
],
"action": {
"type": "crt.Button",
"caption": "Open",
"clicked": {...}
},
"showEmptyValues": true,
"icon": "\$Photo"
}
type
Component type. crt.ListItem for the List item preview component.
title
The attribute from the viewModelConfig schema section. Mobile Creatio displays the title above the content.
subtitles
The attribute from the viewModelConfig schema section. Mobile Creatio displays the subtitle below the list item title on a single line.
body
The array of attributes from the viewModelConfig schema section that are attached to the component. Mobile Creatio displays single column for mobile phones and two for tablets.
Available values
value | The attribute from the |
action
The Freedom UI component that is attached to the List Item preview component. The component executes an action. For example, button. Mobile Creatio displays the component to the right of the List Item preview component. The parameters of attached component depend on the component type.
showEmptyValues
A flag that enables displaying empty values of fields that are specified in the body property. By default, false.
Available values
true | Display empty values of fields |
false | Do not display empty values of fields |
icon
List item icon. Mobile Creatio displays the icon of image type field. The icon property includes the DataSchemaAttribute.caption property value. If the value of image type field is omitted, Mobile Creatio displays the first two letters of the image type field.
Attachment
Use the Attachment component to work with files. The component lets you display, add, and delete files. Before you use the component, make sure that the Freedom UI page schema includes the data source. Learn more: Operations with data for Mobile Creatio.
View the example of a configuration object that works with files below.
{
"type": "crt.Attachments",
"items": "AttachmentItems"
}
type
Component type. crt.Attachments for the Attachment component.
items
The attribute from the viewModelConfig schema section.
Feed
Use the Feed component to add a feed. You can enable internal and external users to post and read comments that support rich text and user mention via "@." Authors can edit or delete their posts or attachments. Before you use the component, make sure that the Freedom UI page schema includes the data source. Learn more: Operations with data for Mobile Creatio.
View the example of a configuration object that adds a feed below.
{
"type": "crt.Messaging",
"items": "ContactFeed"
}
type
Component type. crt.Messaging for the Feed component.
items
The attribute from the viewModelConfig schema section.
Filter
Use the Filter component to filter data.
View the example of a configuration object that filters data below.
{
"type": "crt.RelatedDetailItem",
"moduleName": "Activity",
"relationOptions": {
"detailColumn": "Opportunity",
"masterColumn": "Id",
"parentRecordId": "$Id"
},
"filterAttributes": [
{"name": "ActivityDetail_Filter"}
],
"caption": "Attachments",
"parentModuleName": "Opportunity"
}
type
Component type. crt.RelatedDetailItem for the Filter component.
moduleName
The name of module that was customized in the manifest.
relationOptions
Configuration object to create a related filter based on the parent model.
Parameters
detailColumn | The child object |
masterColumn | The parent object column that is linked to the child object |
detailColumn | The object column that is linked to the parent object |
filterAttributes
Additional filters.
Parameters
name | The attribute that implements the filter from the |
caption
Link name.
parentModuleName
Name of the Classic UI form page.
Contact compact profile
The component is available if you have the Customer 360 app installed.
Use the Contact compact profile component to display main data of a contact:
- photo
- full name
- birth date
- age
- local time
- country
The component behavior is pre-configured and non-editable.
View the example of a configuration object that displays main contact data below.
{
"type": "crt.ContactCompactProfile"
}
type
Component type. crt.ContactCompactProfile for the Contact compact profile component.
Account compact profile
The component is available if you have the Customer 360 app installed.
Use the Account compact profile component to display main data of an account:
- logo
- name
- local time
- country
The component behavior is pre-configured and non-editable.
View the example of a configuration object that displays main account data below.
{
"type": "crt.AccountCompactProfile"
}
type
Component type. crt.AccountCompactProfile for the Account compact profile component.
Timeline
Use the Timeline component to enable users to view the history of communication regarding the record as well as records linked to it in chronological order. You can specify the sorting column for most objects in the timeline except for "Feed" and "File" that are always sorted by creation date. Users can like and comment feed records in the timeline. The component also includes the message composer functionality.
Use the Timeline component to display the linked records of the following objects:
- Attachments
- Activities
- Emails
- Calls
- Feed messages
The timeline displays the primary display value and creation date of linked records. You can customize the columns to display in the timeline addon of the relevant object using no-code tools. Learn more: Customize an object column to display in the Timeline component.
View the example of a configuration object that implements the timeline below.
{
"type": "crt.Timeline",
"masterSchemaId": "$Id",
"items": [
{
"type": "crt.TimelineTile",
"linkedColumn": "Contact",
"sortedByColumn": "CreatedOn",
"data": {
"schemaName": "Activity",
"schemaType": "Email",
"columns": [
{"columnName": "Status"}
],
"filter": {
"columnName":"Type",
"columnValue":"e2831dec-cfc0-df11-b00f-001d60e938c6"
}
}
}
]
}
type
Component type. crt.Timeline for the Timeline component.
masterSchemaId
Parent object column to create a filter in the timeline tile.
items
The array of timeline tiles.
Parameters
type | Tile type. By default, | ||||||||||||
linkedColumn | The tile object column that is linked to the parent object | ||||||||||||
sortedByColumn | The tile object column to sort timeline data | ||||||||||||
data | Configuration object of timeline data Parameters
|