Common Freedom UI components for Mobile Creatio
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 or custom request to the button click event. */
"request": "crt.CreateRecordRequest"
},
"icon": "open-button-icon",
"caption": "Button",
"color": "primary",
"size": "medium",
"iconPosition": "left-icon",
"menuTitle": "Menu title" /*Added.*/,
"menuItems": [
{
"type": "crt.MenuItem",
"caption": "Menu item 1",
"clicked": {
/* Creatio lets you bind the sending of base or custom request to the button click event. */
"request": "crt.SetViewModelAttributeRequest",
"params": {
"attributeName": "CalendarViewMode",
"value": "day"
}
},
},
{...}
...
]
}
Common properties
string type
Component type. crt.Button for the Button component.
object clicked
The request fires when a user clicks the button. Creatio lets you bind the sending of a base request or custom request handlers implemented in remote module to the button click event.
string icon
Icon to display next to the menu item caption.
Available values
string caption
Localizable button caption.
Optional properties
string color
Button style. By default, default.
Available values
string size
Button size. By default, large.
string iconPosition
Position of the icon relative to the button caption. By default, left-icon.
Available values
string menuTitle
Title of the menu picker.
array of objects menuItems
List of button menu items. Displayed at the bottom of the page after clicking the button. When the menuItems property is used the clicked button property is ignored. To add the button menu item, use the Menu item component.
Field
Use the Field component to modify the component data. Before you use the component, make sure that the viewModelConfig schema section includes the attribute bound to the Field 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 Field component types.
View the example of a configuration object that modifies data below.
{
"type": "crt.EditField",
"value": "$SomeAttribute",
"minLines": 2,
"maxLines": 5,
"hint": "Enter title",
"readOnly": false,
"label": {
"visible": true,
"value": "Title",
"position": "left"
}
}
string type
Component type. crt.EditField for the Field component.
string value
The name of attribute from the viewModelConfig schema section.
number minLines
Minimum number of lines in the component. Available for the text, email, web Field component types.
number maxLines
Maximum number of lines in the component. Available for the text, email, web Field component types.
string hint
The hint that Mobile Creatio displays in the component when you omit the component value.
boolean 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. |
object label
The component title. If you omit a value, Mobile Creatio displays the DataSchemaAttribute.caption property value.
Parameters
Name | Description | ||||||||
|---|---|---|---|---|---|---|---|---|---|
boolean visible | The flag that makes the component label visible. By default, true The component label is visible. false The component label is not visible. | ||||||||
string value | The label value. By default, the title is the same as the title of the corresponding model field. | ||||||||
string position | The label position. By default, left Display the label to the left of the component. right Display the label to the right of the component. top Display the label above the component. bottom Display the label below the component. |
Read-only field
Use the Read-only field 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 field 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 field 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": {
...
},
}
}
string type
Component type. crt.ViewField for the Read-only field component.
string value
The name of attribute from the viewModelConfig schema section.
number maxLines
Maximum number of lines in the component to display.
object label
The component title. If you omit a value, Mobile Creatio displays the DataSchemaAttribute.caption property value.
Parameters
Name | Description | ||||||||
|---|---|---|---|---|---|---|---|---|---|
boolean visible | The flag that makes the component label visible. By default, true The component label is visible. false The component label is not visible. | ||||||||
string value | The label value. By default, the title is the same as the title of the corresponding model field. | ||||||||
string position | The label position. By default, left Display the label to the left of the component. right Display the label to the right of the component. top Display the label above the component. bottom Display the label below the component. |
object 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 | Description | ||||||||
|---|---|---|---|---|---|---|---|---|---|
string name | Link name. | ||||||||
string type | Link type. phone Mobile Creatio opens the dialer app. email Mobile Creatio opens the email client. map Mobile Creatio opens the map app. uri Mobile Creatio opens an arbitrary link. | ||||||||
string bindingColumn | Name of the column that determines the type of opened link. | ||||||||
object binding | Record ID that determines the type of opened link. |
Combobox
Use the Combobox component to add the lookup type field that has extended customization features. For example, create a record directly from the lookup type field. Before you use the component, make sure that the viewModelConfig schema section includes the attribute bound to the Combobox component.
View the example that adds an attribute to the Freedom UI page schema below.
{
"viewModelConfig": {
"attributes": {
"SomeAttribute": {
"modelConfig": {
"path": "PDS.Title"
},
"name": "SomeAttribute"
}
}
}
}
View the example of a configuration object that lets you add a new contact directly from the lookup type field below.
{
"value": "$Contact",
"type": "crt.ComboBox",
"name": "Case_PrimaryTab_Body_primaryColumnSet_Contact",
"clicked": {
"request": "crt.OpenLookupPageRequest",
"params": {
"entitySchemaName": "Contact",
"features": {
"create": {
"enabled": true
}
},
"addButtonClicked": {
"request": "crt.CreateRecordRequest",
"params": {
"entityName": "Contact",
"defaultValues": [{
"attributeName": "Name",
"value": "$Number"
}]
}
}
}
},
"secondaryDisplayValue": "Account.Phone"
}
string type
Component type. crt.ComboBox for the Combobox component.
string value
The name of attribute from the viewModelConfig schema section.
string name
The name of the lookup type field whose functionality is extended.
object clicked
The request fires when a user clicks the button. Creatio lets you bind the sending of a base request or custom request handlers implemented in remote module to the button click event.
string secondaryDisplayValue
Display an additional column that includes contextual information related to the selected records in the Combobox component. For example, show relation of a contact to an account.
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"
}
],
"tools": [
{
"type": "crt.Button",
"text": "Add",
"menuTitle": "Select",
"menuItems": [
{
"type": "crt.MenuItem",
"caption": "By filter",
"clicked": [
{
"request": "crt.CreateActivityParticipantDetailRequest",
"params": {
"attributeName": "ActivityParticipantDetailV2EmbeddedDetail",
"filtersConfig": {
"filterAttributes": [
{
"loadOnChange": true,
"name": "ParticipantFilterAttribute",
}
],
}
}
}
]
},
{
"type": "crt.MenuItem",
"caption": "All",
"clicked": [
{
"request": "crt.CreateActivityParticipantDetailRequest",
"params": {
"attributeName": "ActivityParticipantDetailV2EmbeddedDetail",
}
}
]
},
]
}
]
}
string type
Component type. crt.Detail for the Embedded list component.
string items
The attribute from the viewModelConfig schema section.
string title
The component title.
object itemLayout
Configuration object that configures parameters of component to display in the Embedded list component.
Parameters
Name | Description |
|---|---|
string type | The component type to display in the Embedded list component. In most cases, |
array of objects body | Parameters of the |
array of objects editColumns
List of editable columns.
array of objects tools
List of embedded common Freedom UI components. For example, buttons. Embedded components are displayed in the top right of the Embedded list component.
List
Use the List component to add lists. Mobile Creatio displays data received from a data source as a scrolling list on the full screen.
View the example of a configuration object that adds the list below.
{
"type": "crt.List",
"items": "$Items",
"itemLayout": {
"type": "crt.ListItem",
"title": "$PDS_Name"
}
}
string type
Component type. crt.List for the List component.
string items
The attribute from the viewModelConfig schema section.
object itemLayout
Configuration object that configures parameters of a list item to display in the List component.
Parameters
Name | Description |
|---|---|
string type | The component type to display in the List component. In most cases, |
string title | The data source attribute from the |
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"
}
string type
Component type. crt.ListItem for the List item preview component.
string title
The attribute from the viewModelConfig schema section. Mobile Creatio displays the title above the content.
array of strings subtitles
The attribute from the viewModelConfig schema section. Mobile Creatio displays the subtitle below the list item title on a single line.
array of strings 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.
Parameters
Name | Description |
|---|---|
string value | The attribute from the |
object 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.
boolean 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. |
string 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.
Data grid
Use the Data grid component to add and edit table data.
View the example of a configuration object that adds table data below.
{
"type": "crt.DataGrid",
"features": {
"editable": {
"enable": true
},
"rows": {
"toolbar": true
}
},
"rowTitle": "\$Account",
"columns": [
{
"code": "Name",
"width": 200,
"sticky": true,
"cellView": {
"type": "crt.ViewField",
"value": "\$Name",
"maxLines": 3,
"label": {
"visible": false
}
},
"readonly": true
},
{
"code": "CreatedOn"
},
{
"code": "DoNotUseEmail"
},
{
"code": "Age"
}
],
"sorting": [
{
"columnCode": "Name",
"direction": "asc"
}
],
verticalScroll: true
}
string type
Component type. crt.DataGrid for the Data grid component.
string features
Additional component features.
Parameters
Name | Description | ||||||||
|---|---|---|---|---|---|---|---|---|---|
object editable | Manages the editing of data. Name Description boolean enable The flag that determines whether to edit component data. By default, true The component data is editable. false The component data is not editable. | ||||||||
object rows | Additional features of component rows. Name Description boolean toolbar The flag that determines whether to display available actions. By default, true Available actions are displayed. false Available actions are not displayed. |
string rowTitle
Pre-configured and non-editable column name. When you set the rowTitle property, Mobile Creatio ignores the sticky property value.
array of objects columns
Array of columns to load.
Parameters
Name | Description | ||||
|---|---|---|---|---|---|
number id | Unique column identifier. If you omit a value, Mobile Creatio uses the | ||||
string code | Column name. | ||||
string caption | Column caption. If you omit a value, Mobile Creatio receives the | ||||
number dataValueType | Column data type. | ||||
number width | Column width. If you omit a value, Mobile Creatio uses out-of-the-box column width (120px). | ||||
boolean hidden | The flag that determines whether to hide a column. By default, true A column is hidden. false A column is shown. | ||||
boolean sticky | The flag that determines whether to freeze a column. By default, true A column is frozen. false A column is not frozen. | ||||
boolean readOnly | The flag that sets the column to read-only. By default, true The column is editable. false The column is not editable. | ||||
object cellView | Parameters that determine conditions to view and edit column. List of parameters depends on column type. |
array of objects sorting
Sort component data.
Parameters
Name | Description | ||||||
|---|---|---|---|---|---|---|---|
string columnCode | Column name. | ||||||
string direction | The sorting order. asc Ascending. desc Descending. none The sorting order is not defined. |
boolean verticalScroll
The flag that determines whether to scroll component data. By default, false.
Available values
true | Scrolling is enabled. |
false | Scrolling is disabled. |
Folder management menu
Use the Folder management menu component to open the page folder tree.
View the example of a configuration object that opens the page folder tree below.
{
"type": "crt.FolderTreeActions",
"caption": "Folders",
"name": "MyFolderTree",
"sourceSchemaName": "ContactFolder",
"folderTreeVisibleChanged": {
"request": "crt.OpenModalFolderTreeRequest",
"params": {
"folderTreeConfig": {
"caption": "Select folder",
"sourceSchemaName": "ContactFolder",
"rootSchemaName": "Contact"
}
}
}
}
string type
Component type. crt.FolderTreeActions for the Folder management menu component.
string caption
Component caption.
string name
Component name.
string sourceSchemaName
Entity schema that stores a list of folders.
string activeFolderName
Out-of-the-box selected folder. Required.
object folderTreeVisibleChanged
The crt.OpenModalFolderTreeRequest base request that opens a list of folders.
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"
}
string type
Component type. crt.Attachments for the Attachment component.
string 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"
}
string type
Component type. crt.Messaging for the Feed component.
string 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"
}
string type
Component type. crt.RelatedDetailItem for the Filter component.
string moduleName
The name of module that was customized in the manifest.
object relationOptions
Configuration object to create a related filter based on the parent model.
Parameters
Name | Description |
|---|---|
string detailColumn | The child object. |
string masterColumn | The parent object column that is linked to the child object. |
string parentRecordId | The object column that is linked to the parent object. |
array of objects filterAttributes
Additional filters.
Parameters
Name | Description |
|---|---|
string name | The attribute that implements the filter from the |
string caption
Link name.
string parentModuleName
Name of the Classic UI form page.
Quick filter group
Use the Quick filter group component to display multiple filters. The component container includes all active filters and lets you scroll data horizontally.
Before you use the component, make sure that the viewModelConfig schema section includes the attribute bound to the Quick filter group component.
View the example that adds an attribute to the Freedom UI page schema below.
{
"viewModelConfig": {
"attributes": {
"Items": {
"modelConfig": {
"path": "PDS",
"filterAttributes": [
{
"loadOnChange": true,
"name": "QuickFilterGroup_Filters"
}
]
}
}
}
}
}
View the example of a configuration object that displays multiple filters below.
{
"name": "QuickFilterGroup",
"type": "crt.QuickFilterGroup",
"_filterOptions": {
"from": "QuickFilterGroup_Value",
"expose": [
{
"attribute": "QuickFilterGroup_Filters",
"converters": [
{
"args": [
{
"target": {
"viewAttributeName": "Items"
}
}
],
"converter": "crt.QuickFilterGroupAttributeConverter"
}
]
}
]
}
}
Properties
string type
Component type. crt.QuickFilterGroup for the Quick filter group component.
array of objects items
Array of predefined quick filters to display on the page.
object _filterOptions
Filter parameters.
Parameters
Name | Description |
|---|---|
string from | The attribute from the |
string attribute | The attribute from the |
string viewAttributeName | The attribute from the |
object items | Filter details that are generated by the preprocessor based on the columns in the initial data collection. You can add details of custom filters. |
View the example of a custom filter for Account column below.
"_filterOptions": {
"from": "QuickFilterGroup_Value",
"expose": [
{
"attribute": "QuickFilterGroup_Filters",
"converters": [
{
"args": [
{
"target": {
"viewAttributeName": "Items",
"items": {
"QuickFilterGroup_Item_Primary_Account": {
"quickFilterType": "lookup",
"target": {
"viewAttributeName": "Items",
"filterColumn": "Account.PrimaryAccount"
}
}
}
}
}
],
"converter": "crt.QuickFilterGroupAttributeConverter"
}
]
}
]
}
Component requests
The Quick filter group component lets you bind the following base requests depending on your business goals.
crt.UpdateQuickFilterGroupRequest
Opens a picker to set filters.
View the example that adds a custom filter to the configuration object of Quick filter group component below.
{
"name": "QuickFilterGroup",
"type": "crt.QuickFilterGroup",
"_filterOptions": {
"from": "QuickFilterGroup_Value",
"expose": [
{
"attribute": "QuickFilterGroup_Filters",
"converters": [
{
"converter": "crt.QuickFilterGroupAttributeConverter",
"args": [
{
"target": {
"viewAttributeName": "Items",
"items": {
"QuickFilterGroup_Item_Type": {
"quickFilterType": "lookup",
"target": {
"viewAttributeName": "Items",
"filterColumn": "Type"
}
},
}
},
}
]
}
]
}
],
"from": "QuickFilterGroup_Value"
}
}
View the example of a configuration object that adds a button below. The request fires when a user clicks the button.
{
"name": "FilterGroupButton",
"type": "crt.Button",
"clicked": {
"request": "crt.UpdateQuickFilterGroupRequest",
"params": {
"value": "\$QuickFilterGroup_Value",
"actions": [
{
"caption" : "Type",
"filterViewConfig" : {
"name" : "QuickFilterGroup_Item_Type",
"type" : "crt.QuickFilter",
"config" : {
"caption" : "Type",
"icon" : "filter-column-icon",
"iconPosition" : "left-icon",
"entitySchemaName" : "ContactType",
"defaultValue": [
{
"value": "60733efc-f36b-1410-a883-16d83cab0980",
"displayValue": "Employee",
"checkedState": true
}
]
},
"filterType" : "lookup"
}
}
]
}
}
}
object params
Request parameters.
Parameters
Name | Description | ||||||
|---|---|---|---|---|---|---|---|
string value | The name of attribute from the | ||||||
string updated | The | ||||||
array actions | Array of filters to display. Array includes both predefined custom filters and filters that are generated by the preprocessor based on the columns in the initial data collection. Name Description string caption Title of the quick filter. object filterViewConfig Parameters of quick filter. |
crt.QuickFilterGroupRequest
Stores specified filters to the attribute from the viewModelConfig schema section and adds filters to the component container.
View the example of a configuration object that adds a button below. The request fires when a user clicks the button.
{
"name": "FilterGroupButton",
"type": "crt.Button",
"clicked": {
"request": "crt.UpdateQuickFilterGroupRequest",
"params": {
"value": "$QuickFilterGroup_Value",
"updated": {
"request": "crt.QuickFilterGroupRequest",
"params": {
"target": "QuickFilterGroup"
}
}
}
}
}
object params
Request parameters.
Parameters
Name | Description |
|---|---|
string value | The name of attribute from the |
string target | The component container that displays specified filters. |
Quick filter
Use the Quick filter component to filter data by custom conditions, date/time, or lookup values. Before you use the component, make sure that the viewModelConfig schema section includes the attribute bound to the Quick filter component.
View the example that adds an attribute to the Freedom UI page schema below.
{
"viewModelConfig": {
"attributes": {
"My_QuickFilter_Value": {
"value": null
},
"My_Converter_Arg": {
"value": {
"quickFilterType": "lookup",
"target": {
"viewAttributeName": "Items",
"filterColumn": "Category"
}
}
},
"My_Filter": {
"from": "My_QuickFilter_Value",
"converter": "crt.QuickFilterAttributeConverter : \$My_Converter_Arg"
},
"Items": {
"modelConfig": {
"path": "PDS",
"filterAttributes": [
{
"loadOnChange": true,
"name": "My_Filter"
}
]
}
}
}
}
}
View the example of a configuration object that filters the lookup values below.
{
"name": "My_QuickFilter",
"type": "crt.QuickFilter",
"filterType": "lookup",
"config": {
"caption": "Select category",
"icon": "person-button-icon",
"iconPosition": "left-icon",
"entitySchemaName": "AccountCategory"
}
}
Once you select a filter value, Mobile Creatio stores it to the attribute whose name is QuickFilterCaption_Value. For this example, My_QuickFilter_Value.
View the example of a configuration object that filters data by custom condition below.
{
"name": "QuickFilter_Custom",
"type": "crt.QuickFilter",
"config": {
"caption": "Show drafts",
"defaultValue": true,
"approachState": true
},
"filterType": "custom"
}
string type
Component type. crt.QuickFilter for the Quick filter component.
string filterType
Type of quick filter.
Available values
lookup | Filter that filters the lookup values. |
date-range | Filter that filters the date/time values. |
custom | Filter that filters data by custom conditions. |
object config
Parameters of quick filter.
Parameters
Name | Type | Description | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
string caption | Required | Title of the quick filter. Mobile Creatio displays title if no value is selected. | ||||||||||||||||
string icon | Required | Icon of the quick filter. The property is supported by the | ||||||||||||||||
string iconPosition | Required | Position of the icon relative to the quick filter caption. By default, only-text Do not display the icon. Display only the quick filter caption. left-icon Display the icon to the left of the quick filter caption. right-icon Display the icon to the right of the quick filter caption. only-icon Display only the icon. Do not display the quick filter caption. | ||||||||||||||||
string defaultValue | Optional | Out-of-the-box value of quick filter. Parameters of the Name Type Description string start Required Column that stores out-of-the-box start date of quick filter. string end Required Column that stores out-of-the-box end date of quick filter. string macros Required Macro that determines out-of-the-box time interval of quick filter. For example, Available values of the true Out of the box, quick filter is enabled. Default value. false Out of the box, quick filter is disabled. | ||||||||||||||||
string entitySchemaName | Required | Entity schema whose data is displayed in the quick filter of the | ||||||||||||||||
string recordsFilter | Optional | Filter to filter lookup values. | ||||||||||||||||
string cacheConfig | Optional | Manages caching of lookup values. | ||||||||||||||||
boolean approachState | Optional | The flag that specifies whether the quick filter of the true The quick filter is not reversible. false The quick filter is reversible. |
Sort
Use the Sort component to sort list data.
View the example of a configuration object that sorts list data below.
{
"type": "crt.Sort",
"value": "\$ItemsSorting",
"sortItems": [
{
"attributeName": "Name",
"caption": "Name"
}
],
"valueChange": {
"request": "crt.SortChangeRequest"
}
}
string type
Component type. crt.Sort for the Sort component.
string value
The attribute from the viewModelConfig schema section.
array of objects sortItems
Array of parameters to sort.
Parameters
Name | Description |
|---|---|
string attributeName | The attribute from the |
string caption | Column caption. |
object valueChange
The crt.SortChangeRequest base request that opens a list of available sorting options.
Link
Use the Link component to add clickable URLs. Additionally, you can display a label above the URL text.
View the example of a configuration object that adds the clickable URL below.
{
"type": "crt.Link",
"caption": "\$MyActivityCaptionAttribute",
"label": "Label",
"clicked": {
"request": "crt.UpdateRecordRequest",
"params": {
"entityName": "Activity",
"recordId": "\$MyActivityIdAttribute",
}
}
}
string type
Component type. crt.Link for the Link component.
string caption
Link name.
string label
Link title.
object clicked
The request fires when a user clicks the link.
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"
}
string 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"
}
string 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"
}
}
}
]
}
string type
Component type. crt.Timeline for the Timeline component.
string masterSchemaId
Parent object column to create a filter in the timeline tile.
array of objects items
The array of timeline tiles.
Parameters
Name | Description | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
string type | Tile type. By default, | ||||||||||||||
string linkedColumn | The tile object column that is linked to the parent object. | ||||||||||||||
string sortedByColumn | The tile object column to sort timeline data. | ||||||||||||||
object data | Configuration object of timeline data. Name Description string schemaName Name of the tile schema. string schemaType The tile type. Email Call Feed SysFile array of objects columns The list of tile columns to load. object filter Additional filter. |
Menu item
Use the Menu item component to add additional actions to a button menu item.
View the example of a configuration object that implements the button menu item below.
{
"type": "crt.MenuItem",
"caption": "Menu item",
"clicked": {
"request": "crt.SetViewModelAttributeRequest",
"params": {
"attributeName": "CalendarViewMode",
"value": "day"
}
},
}
string type
Component type. crt.MenuItem for the Menu item component.
string caption
Localizable caption of button menu item.
object clicked
The request fires when a user clicks the button menu item. Creatio lets you bind the sending of a base request or custom request handlers implemented in remote module to the button click event.
Calendar
Use the Calendar component to display calendar events.
View the example of a configuration object that embeds external content into a page below.
{
"type": "crt.Calendar",
"templateValuesMapping": {
"startColumn": "StartDate",
"endColumn": "DueDate",
"titleColumn": "Title",
"notesColumn": "Notes",
"colorizationColumn": "Status.Color"
},
"colorizationType": "byField",
"items": "ItemsAttribute",
"dateRange": "CalendarSelectedDate",
"viewMode": "CalendarViewMode",
"focusDate": "CalendarPickerFocusDate",
"createItem": {
"request": "crt.CreateCalendarRecordRequest",
"params": {
"entityName": "Activity",
"defaultValues": [
{
"attributeName": "ShowInScheduler",
"value": "true"
}
]
}
}
}
string type
Component type. crt.Calendar for the Calendar component.
object templateValuesMapping
Data source columns to bind.
Parameters
Name | Type | Description |
|---|---|---|
string startColumn | Required | Column that stores start date of calendar events. |
string endColumn | Required | Column that stores end date of calendar events. |
string titleColumn | Required | Column that stores title of calendar events. |
string notesColumn | Optional | Column that stores additional details of calendar events. |
string colorizationColumn | Optional | Column that stores custom color of calendar events. |
string colorizationType
The data source attribute that stores calendar colorization modes from the viewModelConfig schema section. Requires the colorizationColumn property.
Set up calendar colorization
-
Add a column that stores a custom color to data source. Instructions: Implement the data source (steps 1-3).
View the configuration object example that implements the data source of the
Activityobject below.Configuration object example that implements the data source"modelConfig": {
"primaryDataSourceName": "PDS",
"dataSources": {
"PDS": {
"config": {
"entitySchemaName": "Activity",
"attributes": {
"Status.Color": {"path": "Status.Color"}
}
}
}
}
} -
Register a custom column in the mobile app manifest.
- Open the mobile app manifest.
- Go to the
SyncOptionsschema section →ModelDataImportConfig. - Add a configuration object of a custom column.
- Save the changes.
View the configuration object example that registers a custom column of the
ActivityStatusobject below.Configuration object example that registers a custom column/* Synchronization settings.*/
"SyncOptions": {
...,
/* An array of models that loads data during synchronization. */
"ModelDataImportConfig": [
/* "ActivityStatus" model configuration. */
{
"Name": "ActivityStatus",
...,
/* An array of the model columns for which data is imported. */
"SyncColumns": [
"Color"
]
},
...,
]
}
string items
The data source attribute from the viewModelConfig schema section.
string dateRange
The data source attribute that stores time interval from the viewModelConfig schema section.
string viewMode
The data source attribute that stores calendar display modes from the viewModelConfig schema section. For example, day, 3 days, week.
string focusDate
The data source attribute that stores date from the viewModelConfig schema section. For example, current date.
object createItem
Configuration object that configures parameters of calendar event to create in the Calendar component. For example, tasks.
Calendar date picker
Use the Calendar date picker component to select month date.
View the example of a configuration object that implements the calendar date picker below.
{
"type": "crt.CalendarDatePicker",
"showHeader": true,
"value": "SomeAttribute"
}
string type
Component type. crt.CalendarDatePicker for the Calendar date picker component.
boolean showHeader
The flag that determines whether to display the month name when you select a date. By default, false.
Available values
true | The month name is displayed. |
false | The month name is not displayed. |
string value
The name of attribute from the viewModelConfig schema section that is changed when you select of change the date.
IFrame
Use the IFrame component to embed external content into a page.
View the example of a configuration object that embeds external content into a page below.
{
"type": "crt.IFrame",
"name": "Link name",
"urlContent": "https://creatio.com/",
}
string type
Component type. crt.IFrame for the IFrame component.
string name
The name of the URL to receive the external content.
string urlContent
The URL to receive the external content.
BarcodeScanner
Use the BarcodeScanner component to embed scanner into a page if you need to scan multiple QR or bar codes. The component calls the request handler implemented using remote module, launches the camera on your device and displays a bar code scanning window. Unlike the BarcodeScanService service, the BarcodeScanner component provides abilities to customize a bar code scanning window based on your business goals. For example, you can control the flash when scanning bar codes. Learn more: Custom request handler implemented using remote module in Mobile Creatio, Scan QR and bar codes in Mobile Creatio.
View the example of a configuration object that enables bar code scanning functionality on a page below.
{
"type": "crt.BarcodeScanner",
"name": "InventoryScanner",
"size": "medium",
"scanTimeout": 2000,
"features": {
"flashToggle": true
},
"enabled": true,
"scanned": {
"request": "SomeRequest",
"params": {
"result": "@event"
}
}
}
string type
Component type. crt.BarcodeScanner for the BarcodeScanner component.
string name
Unique identifier for the BarcodeScanner component.
string size
Size of a bar code scanning window. By default, medium. Real sizes can vary based on the screen size or other conditions. We recommend selecting a bar code scanning window size that fits your layout consistently and provides convenient bar code scanning.
Available values
small | 200x200 pt |
medium | 350x350 pt |
large | 500x500 pt |
max | A bar code scanning window takes up all screen space. We recommend using |
number scanTimeout
Timeout in milliseconds before scanning the next bar code. By default, 2000. We recommend configuring a scan timeout based on your business goals. Use short timeout to scan multiple bar codes quickly. Use long timeout to reduce the number of accidental duplicates.
object features
Configuration object that configures additional functionality for the bar code scanning window.
Parameters
Name | Description | ||||
|---|---|---|---|---|---|
boolean flashToggle | The flag that determines whether to display the button that controls the flash when scanning bar codes. By default, true The flash button is shown. false The flash button is hidden. |
boolean enabled
Available values
true | The bar code scanner is enabled. |
false | The bar code scanner is disabled. |
object scanned
The request fires when a bar code is scanned successfully. Creatio lets you bind the sending of a custom request handlers implemented in remote module to the scan event. We recommend implementing request handlers that process scan results quickly to provide immediate feedback.
The result property includes the @event placeholder and is replaced by the BarcodeScanResult object that corresponds to the list of the scan() method output parameters. Learn more: BarcodeScanService service.
See also
Operations with data for Mobile Creatio
Customize the Timeline component
Custom request handler implemented using remote module in Mobile Creatio