Timeline component
Timeline is a component used to view the history of communication related to a data source and the records linked to it in chronological order. You can specify the sorting column for most objects in the timeline, except for the "Feed" (SocialChannel code) and "File" (SysFile code) objects that are always sorted by creation date. You can filter timeline records by record type, date, owner, and whether they are system messages. You can also hide any filter if needed. You can connect a custom quick filter to the component if needed. Users can like and comment on feed messages in the timeline. The component also includes the message composer functionality. Learn more: Timeline, Check timelines (user documentation).
The timeline displays the primary display value and the creation date of linked records. You can customize the columns to display in the timeline addon for the relevant object using low-code tools. Learn more: Customize the Timeline component.
View an example of a configuration object that sets up the Timeline component below.
viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
{
"operation": "insert",
"name": "Timeline_m3uo7mf",
"values": {
"type": "crt.Timeline",
"items": [],
"tools": [],
"customFilters": [],
"hideTools": false,
"masterSchemaId": "$Id",
"caption": "#ResourceString(Timeline_m3uo7mf_caption)#",
"label": "#ResourceString(Timeline_m3uo7mf_label)#",
"filters": [],
"masterEntitySchemaName": "UsrTest",
"filterValues": "$Timeline_m3uo7mf_AllTileFilters",
"isTileReadOnly": true
},
"parentName": "GeneralInfoTab",
"propertyName": "items",
"index": 1
},
{
"operation": "insert",
"name": "TimelineTile_SysFile_v3fvjy5",
"values": {
"type": "crt.TimelineTile",
"classes": [
"view-element"
],
"sortedByColumn": "CreatedOn",
"ownerColumn": "CreatedBy",
"data": {
"schemaType": "SysFile",
"isDefault": true
},
"iconPosition": "only-icon",
"icon": "star-icon",
"visible": true
},
"parentName": "Timeline_m3uo7mf",
"propertyName": "items",
"index": 0
},
{
"operation": "insert",
"name": "TimelineTile_Feed_3o67xu9",
"values": {
"type": "crt.TimelineTile",
"classes": [
"view-element"
],
"sortedByColumn": "CreatedOn",
"ownerColumn": "CreatedBy",
"data": {
"schemaType": "Feed",
"isDefault": true
},
"iconPosition": "only-icon",
"icon": "star-icon",
"visible": true
},
"parentName": "Timeline_m3uo7mf",
"propertyName": "items",
"index": 1
},
{
"operation": "insert",
"name": "MessageComposerSelector_rnlicng",
"values": {
"type": "crt.MessageComposerSelector",
"items": [],
"classes": [
"view-element"
]
},
"parentName": "Timeline_m3uo7mf",
"propertyName": "tools",
"index": 0
},
{
"operation": "insert",
"name": "FeedComposer_t0azq1b",
"values": {
"type": "crt.FeedComposer",
"classes": [
"view-element"
],
"sortedByColumn": "CreatedOn",
"data": {
"uId": "6d006667-3496-4e2d-adc0-3a42648dd97b",
"schemaType": "Feed",
"caption": "Feed",
"sortedByColumn": "CreatedOn",
"typeName": "crt.FeedComposer",
"icon": "feed-composer-icon"
},
"feedType": "Record",
"primaryColumnValue": "$Id",
"cardState": "$CardState",
"entitySchemaName": "UsrTest",
"dataSourceName": "PDS"
},
"parentName": "MessageComposerSelector_rnlicng",
"propertyName": "items",
"index": 0
},
{
"operation": "insert",
"name": "EmailComposer_wmswk80",
"values": {
"type": "crt.EmailComposer",
"classes": [
"view-element"
],
"sortedByColumn": "CreatedOn",
"data": {
"uId": "75aadc65-a834-42d0-b880-fac9bdee4c86",
"schemaType": "Email",
"caption": "Email",
"sortedByColumn": "CreatedOn",
"typeName": "crt.EmailComposer",
"icon": "email-composer-icon"
},
"recordId": "$Id",
"defaultSenderRequest": "crt.DefaultSenderComposerRequest",
"entitySchemaName": "UsrTest"
},
"parentName": "MessageComposerSelector_rnlicng",
"propertyName": "items",
"index": 1
},
{
"operation": "insert",
"name": "TimelineFilterContainer_4tkrwe6",
"values": {
"type": "crt.FlexContainer",
"items": [],
"classes": [],
"fitContent": true,
"direction": "row"
},
"parentName": "Timeline_m3uo7mf",
"propertyName": "customFilters",
"index": 0
},
{
"operation": "insert",
"name": "Timeline_m3uo7mf_TimelineFilter_Entity",
"values": {
"type": "TimelineFilter_Entity",
"visible": true
},
"parentName": "Timeline_m3uo7mf",
"propertyName": "filters",
"index": 0
},
{
"operation": "insert",
"name": "Timeline_m3uo7mf_TimelineFilter_Date",
"values": {
"type": "TimelineFilter_Date",
"visible": true
},
"parentName": "Timeline_m3uo7mf",
"propertyName": "filters",
"index": 1
},
{
"operation": "insert",
"name": "Timeline_m3uo7mf_TimelineFilter_Owner",
"values": {
"type": "TimelineFilter_Owner",
"visible": true
},
"parentName": "Timeline_m3uo7mf",
"propertyName": "filters",
"index": 2
},
{
"operation": "insert",
"name": "Timeline_m3uo7mf_TimelineFilter_SystemMessages",
"values": {
"type": "TimelineFilter_SystemMessages",
"visible": true
},
"parentName": "Timeline_m3uo7mf",
"propertyName": "filters",
"index": 3
}
]/**SCHEMA_VIEW_CONFIG_DIFF*/,
string type
Component type. Set to "crt.Timeline" for the Timeline component.
array items
Collection of timeline objects whose type property is set to "crt.TimelineTile."
array tools
Collection of composer components displayed above the timeline.
array customFilters
Container for custom filters placed above the timeline.
boolean hideTools
Whether to hide a message composer above the timeline. By default, "false."
Available values
true | Hide a set of tools. |
false | Display a set of tools. |
string masterSchemaId
The ID of the record to which the timeline records are bound. For example, "Contact.Id" or "Contact.Account."
string caption
Default localizable caption. Not displayed in UI.
string label
Default localizable title. Not displayed in UI.
array filters
An out-of-the-box collection of timeline filters, e.g., by date, by owner. Non-editable.
string masterEntitySchemaName
The main entity schema to which the timeline is related.
string filterValues
Custom filters in the container. Used to filter timeline records.
boolean or string isTileReadOnly
Whether to display the feed messages in the timeline in read-only mode. By default, "false." To ensure feed messages are displayed correctly, bind the appropriate attribute to the isTileReadOnly property. When the bound attribute value changes, the component fields are shown or hidden automatically. Available in Creatio 8.3.1 and later.
Available values
true | Adding new feed messages or comments is locked. Only the Like button remains available. |
false | Adding new feed messages or comments is permitted. |
Timeline object
string type
Type of the timeline object. "crt.TimelineTile" for the timeline object.
array classes
A list of CSS classes to customize the appearance and layout of the timeline object.
string sortedByColumn
Column used to sort object items. For example, "Created on" (CreatedOn code).
string linkedColumn
The name of the column in the child schema that references the parent schema.
string ownerColumn
Column that points to the record owner. For example, "Created by" (CreatedBy code).
object data
A set of configurations for the timeline object, e.g., columns, data sources, etc.
Parameters
string schemaType | Data source for the message composer channel. Feed "Feed" channel. Email "Email" channel. | ||||
boolean isDefault | Whether to mark the message composer channel as default. By default, "true" for "Feed" object. true Default channel. The channel is displayed first. false Secondary channel. |
IconPositionEnum iconPosition
An out-of-the-box position of the icon relative to the caption of the timeline object. Non-editable. By default, "only-icon."
string icon
Icon of the timeline object. Learn more: Customize an icon of the timeline object.
boolean visible
Whether to display the timeline object. By default, "true."
Available values
true | Display the timeline object. |
false | Hide the timeline object. |
Message composer component
Message composer is a component to send emails and post feed messages in the timeline. Both communication channels support rich text, including images. Parent component for Feed composer and Email composer components.
string type
Component type. Set to "crt.MessageComposerSelector" for the Message composer component.
array items
Collection of composer components.
array classes
A list of CSS classes to customize the appearance and layout of the component.
Feed composer component
Feed composer is a component to post feed messages in the timeline. Child component of the Message composer component.
string type
Component type. Set to "crt.FeedComposer" for the Feed composer component.
array classes
A list of CSS classes to customize the appearance and layout of the component.
string sortedByColumn
Column used to sort feed messages in the timeline. For example, "Created on" (CreatedOn code).
object data
The component configuration.
Parameters
string uId | A unique ID of the component. |
string schemaType | Data source for the "Feed" channel. |
string caption | Localizable caption displayed in the Message composer component for the "Feed" channel. |
string sortedByColumn | Column used to sort feed messages in the timeline. For example, "Created on" ( |
string typeName | Component type of "Feed" channel. |
string icon | Icon to display in the Message composer component for "Feed" channel. |
string feedType
Define the feed content source.
Available values
Record | Display feed messages related to a specific record. |
User | Display feed messages related to a specific user. |
string primaryColumnValue
Bind the feed to the primary key value of the record.
string cardState
Bind the feed behavior to the current page state.
string entitySchemaName
Specify the schema of the object whose records are linked to the feed.
string dataSourceName
Define the data source used by the "Feed" channel. "PDS" refers to the page data source.
Email composer component
Email composer is a component to send emails in the timeline. Child component of the Message composer component.
string type
Component type. Set to "crt.EmailComposer" for the Email composer component.
array classes
A list of CSS classes to customize the appearance and layout of the component.
string sortedByColumn
Column used to sort emails in the timeline. For example, "Created on" (CreatedOn code).
object data
The component configuration.
Parameters
string uId | A unique identifier of the component. |
string schemaType | Data source for the "Email" channel. |
string caption | Localizable caption displayed in the Message composer component for the "Email" channel. |
string sortedByColumn | Column used to sort emails in the timeline. For example, "Created on" ( |
string typeName | Component type of "Email" channel. |
string icon | Icon to display in the Message composer component for "Email" channel. |
string recordId
Bind the email to the current record.
string defaultSenderRequest
Request that defines the default sender parameters. Usually set to "crt.DefaultSenderComposerRequest."
string entitySchemaName
Specify the schema of the object whose records are linked to the email.
Flex container layout element
Flex container layout element to add custom filters to the timeline. Learn more: Flex container layout element.
Timeline filters
Out-of-the-box timeline filters.
string type
Filter type.
Available values
TimelineFilter_Entity | Filter timeline records by record type. |
TimelineFilter_Date | Filter timeline records by date. |
TimelineFilter_Owner | Filter timeline records by owner. |
TimelineFilter_SystemMessages | Filter timeline records by hiding system messages. |
boolean visible
Whether to display the timeline filter. By default, "true."
Available values
true | Display the timeline filter. |
false | Hide the timeline filter. |
See also
Overview of Freedom UI Designer and its elements (user documentation)
Check timelines (user documentation)