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
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 a base request or custom request handlers implemented in remote module to the button click event.
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
menuTitle
Title of the menu picker.
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"
}
}
type
Component type. crt.EditField for the Field 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 Field component types.
maxLines
Maximum number of lines in the component. Available for the text, email, web Field component types.
hint
The hint that Mobile Creatio displays in the component when you omit 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 you omit a value, Mobile Creatio displays the DataSchemaAttribute.caption property value.
Parameters
visible | The flag that makes the component label visible. By default, true The component label is visible. false The component label is not visible. | ||||||||
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, 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": {
...
},
}
}
type
Component type. crt.ViewField for the Read-only field 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 you omit a value, Mobile Creatio displays the DataSchemaAttribute.caption property value.
Parameters
visible | The flag that makes the component label visible. By default, true The component label is visible. false The component label is not visible. | ||||||||
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, 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. |
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. 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. | ||||||||
bindingColumn | Name of the column that determines the type of opened link. | ||||||||
binding | Record ID that determines the type of opened link. |
Dropdown field
Use the Dropdown field 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 Dropdown 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"
}
}
}
}
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"
}]
}
}
}
}
}
type
Component type. crt.ComboBox for the lookup type of the Field component.
value
The name of attribute from the viewModelConfig schema section.
name
The name of the lookup type field whose functionality is extended.
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.
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",
}
}
]
},
]
}
]
}
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 |
editColumns
List of editable columns.
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"
}
}
type
Component type. crt.List for the List component.
items
The attribute from the viewModelConfig schema section.
itemLayout
Configuration object that configures parameters of a list item to display in the List component.
Parameters
type | The component type to display in the List component. In most cases, |
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"
}
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.
Parameters
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.
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
}
type
Component type. crt.DataGrid for the Data grid component.
features
Additional component features.
Parameters
editable | Manages the editing of data. 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. | ||||||
rows | Additional features of component rows. toolbar The flag that determines whether to display available actions. By default, true Available actions are displayed. false Available actions are not displayed. |
rowTitle
Pre-configured and non-editable column name. When you set the rowTitle property, Mobile Creatio ignores the sticky property value.
columns
Array of columns to load.
Parameters
id | Unique column identifier. If you omit a value, Mobile Creatio uses the | ||||
code | Column name. | ||||
caption | Column caption. If you omit a value, Mobile Creatio receives the | ||||
dataValueType | Column data type. | ||||
width | Column width. If you omit a value, Mobile Creatio uses out-of-the-box column width (120px). | ||||
hidden | The flag that determines whether to hide a column. By default, true A column is hidden. false A column is shown. | ||||
sticky | The flag that determines whether to freeze a column. By default, true A column is frozen. false A column is not frozen. | ||||
readOnly | The flag that sets the column to read-only. By default, true The column is editable. false The column is not editable. | ||||
cellView | Parameters that determine conditions to view and edit column. List of parameters depends on column type. |
sorting
Sort component data.
Parameters
columnCode | Column name. | ||||||
direction | The sorting order. asc Ascending. desc Descending. none The sorting order is not defined. |
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"
}
}
}
}
type
Component type. crt.FolderTreeActions for the Folder management menu component.
caption
Component caption.
name
Component name.
sourceSchemaName
Entity schema that stores a list of folders.
activeFolderName
Out-of-the-box selected folder. Required.
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"
}
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.
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
type
Component type. crt.QuickFilterGroup for the Quick filter group component.
items
Array of predefined quick filters to display on the page.
_filterOptions
Filter parameters.
Parameters
from | The attribute from the |
attribute | The attribute from the |
viewAttributeName | The attribute from the |
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"
}
}
]
}
}
}
params
Request parameters.
Parameters
value | The name of attribute from the | ||||
updated | The | ||||
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. caption Title of the quick filter. 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"
}
}
}
}
}
params
Request parameters.
Parameters
value | The name of attribute from the |
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"
}
type
Component type. crt.QuickFilter for the Quick filter component.
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. |
config
Parameters of quick filter.
Parameters
caption* | Title of the quick filter. Mobile Creatio displays title if no value is selected. | ||||||||||
icon* | Icon of the quick filter. The property is supported by the | ||||||||||
iconPosition* | 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. | ||||||||||
defaultValue | Out-of-the-box value of quick filter. Parameters of the of start* Column that stores out-of-the-box start date of quick filter. end* Column that stores out-of-the-box end date of quick filter. macros* Macro that determines out-of-the-box time interval of quick filter. For example, Parameters of the of true Out of the box, quick filter is enabled. Default value. false Out of the box, quick filter is disabled. | ||||||||||
entitySchemaName* | Entity schema whose data is displayed in the quick filter of the | ||||||||||
recordsFilter | Filter to filter lookup values. | ||||||||||
cacheConfig | Manages caching of lookup values. | ||||||||||
approachState | 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"
}
}
type
Component type. crt.Sort for the Sort component.
value
The attribute from the viewModelConfig schema section.
sortItems
Array of parameters to sort.
Parameters
attributeName | The attribute from the |
caption | Column caption. |
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",
}
}
}
type
Component type. crt.Link for the Link component.
caption
Link name.
label
Link title.
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"
}
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. schemaName Name of the tile schema. schemaType The tile type. Email Call Feed SysFile columns The list of tile columns to load. 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"
}
},
}
type
Component type. crt.MenuItem for the Menu item component.
caption
Localizable caption of button menu item.
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"
}
]
}
}
}
type
Component type. crt.Calendar for the Calendar component.
templateValuesMapping
Data source columns to bind.
Parameters
startColumn* | Column that stores start date of calendar events. |
endColumn* | Column that stores end date of calendar events. |
titleColumn* | Column that stores title of calendar events. |
notesColumn | Column that stores additional details of calendar events. |
colorizationColumn | Column that stores custom color of calendar events. |
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"
]
},
...,
]
}
items
The data source attribute from the viewModelConfig schema section.
dateRange
The data source attribute that stores time interval from the viewModelConfig schema section.
viewMode
The data source attribute that stores calendar display modes from the viewModelConfig schema section. For example, day, 3 days, week.
focusDate
The data source attribute that stores date from the viewModelConfig schema section. For example, current date.
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"
}
type
Component type. crt.CalendarDatePicker for the Calendar date picker component.
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. |
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/",
}
type
Component type. crt.IFrame for the IFrame component.
name
The name of the URL to receive the external content.
urlContent
The URL to receive the external content.