Freedom UI page

PDF

Beginner

A Freedom UI page is an app element that lets you display Freedom UI elements connected to data sources and positioned arbitrarily. A Freedom UI page schema of the Client module type controls each Freedom UI page. Learn more in a separate article: Client module. For example, the StudioHomePage schema of the UIv2 package configures the Studio home page. The BaseTemplate schema of the UIv2 package implements the features of the base Freedom UI page. All form page schemas must inherit from BaseTemplate or its descendants. Freedom UI page examples: page with left area (the PageWithLeftAreaTemplate schema of the UIv2 package), a page with a list (the BaseGridSectionTemplate schema of the UIv2 package).

Depending on the current app template, an app can contain a list page and a form page with a minimum set of components. Customize the Freedom UI page further in the Freedom UI Designer using no-code tools. Learn more about setting up the Freedom UI Designer in the user documentation: Element setup examples.

Freedom UI page containers

The Freedom UI page elements of the app are placed in the corresponding containers. Configure the containers using the base Freedom UI page schema or the replacing Freedom UI page schema. Containers operate similarly regardless of the page type.

Note. Creatio uses HTML container meta names. It generates actual IDs that match the HTML elements of the form page based on the meta names.

We modified the main containers of the Freedom UI page in Creatio 8.0 Atlas. View the main containers of the Freedom UI page in Creatio version 8.0 and later in the figure below.

View the main containers of the Freedom UI page in Creatio version 7.18.5 in the figure below.

The page header container (mainHeader). Includes the page title and the actionButtonsContainer child container.
The page actions container (actionButtonsContainer). Includes the page actions, such as save, open, etc.
The page content container (mainContainer). Includes the page content.

Learn more about creating a Freedom UI page in the user documentation: Set up the app UI.

Freedom UI page structure

Creatio Freedom UI includes the following page structure elements:

Data. Learn more in the user documentation: Freedom UI Designer.
Charts. Learn more in the user documentation: Freedom UI Designer.
Components (button, list, label, folders, folder management menu, action dashboard). Learn more in the user documentation: Freedom UI Designer.
Layout elements.
- FlexContainer is a component that lets you lay out elements within it vertically or horizontally. The elements can have various sizes depending on their content. Built on top of CSS Flexible Box.
- GridContainer is a component that lets you lay out its elements within it in a grid. The elements can have various sizes depending on their content. Built on top of CSS Grid Layout.
Learn more in the user documentation: Freedom UI Designer.

Properties

@Input direction

Specifies the orientation and direction of the flex container’s main axis to which flex elements align.

Available values

row	The children of the flex container align horizontally.
column	The children of the flex container align vertically.
row-reverse	The children of the flex container align horizontally in reverse.
column-reverse	The children of the flex container align vertically in reverse.

@Input justifyContent

Space distribution along the main axis. Defines how the browser distributes space between and around elements along the main axis of the flex container.

Available values

start	Pack elements from the start of the main flex container axis.
end	Pack elements from the end of the main flex container axis.
center	Pack elements around the center of the main flex container axis.
space-between	The blocks of the flex container are distributed evenly. The first element is flush from the start of the main axis, the other is flush from the end.

@Input alignItems

Space distribution along the cross axis. Defines how the browser distributes space between and around elements along the cross axis of the flex container.

Available values

flex-start	Pack elements from the start of the flex container’s cross axis.
flex-end	Pack elements from the end of the flex container’s cross axis.
center	Pack elements around the center of the main flex container axis.

@Input gap

Defines the column and row spacing between the elements in the flex container. This is a shorthand for the row-gap (vertical gap) and column-gap (horizontal gap) properties.

View the resulting settings for row-gap and column-gap below.

Resulting settings for row-gap and column-gap

.container {
    display: flex;
    flex-wrap: wrap;
    column-gap: 50px;
    row-gap: 20px;
    justify-content: center;
}

View the resulting layout in the figure below.

@Input padding

Defines the container padding settings. This setting can apply a single value to all sides or provide a specific value for each side. The property can accept numbers, strings, and the available values listed below.

Available values

none	Zero padding.
small	Small padding.
medium	Medium padding.
large	Large padding.

View the example settings for the padding property below.

Example settings for the padding property

"padding": {
    "top": "6px",
    "right": 6,
    "bottom": "small",
    "left": "large"
}

@Input border-radius

Defines the corner rounding in the container. This setting can apply a single value to all corners or provide a specific value for each corner. The property can accept numbers, strings, and the available values listed below.

Available values

none	No rounding.
small	Small corner radius.
medium	Medium corner radius.
large	Large corner radius.

View the example settings for the border-radius property below.

Example settings for the border-radius property

"borderRadius": "medium"

@Input color

Defines the container color. This setting accepts a color code.

View the example settings for the color property below.

Example settings for the color property

"color": "#FDAB06"

Use example

An example of using the FlexContainer component in the Freedom UI page schema is available below.

Example of using the FlexContainer component in the Freedom UI page schema

"name": "FlexContainer",
"values": {
    "layoutConfig": {...},
    "type": "crt.FlexContainer",
    "direction": "column",
    "justifyContent": "start",
    "alignItems": "stretch",
    "wrap": "nowrap",
    "gap": "small",
    "items": []
}
...
{
    "operation": "insert",
    "name": "Button",
    "values": {
        "type": "crt.Button",
        "caption": "#ResourceString(Button_caption)#",
        "color": "primary",
    },
    "parentName": "FlexContainer",
    "propertyName": "Items",
    "index": 0
}

GridContainer component

Beginner

GridContainer is a component that lets you lay out its children elements within a grid. The elements may have variable size depending on their content. Built on top of CSS Grid Layout.

Learn more about Grid Layout in the following article: Basic Concepts of grid layout.

Properties

@Input rows, columns

Defines the track size of the layout grid.

Available values

Constant

The track size must be integer.

View the example for the columns and rows properties below.

Example settings for the columns and rows properties

{
    ...
    "columns": [
        "298px",
        "minmax(64px, 1fr)"
    ],
    "rows": "minmax(max-content, 32px)",
    ...
}

GridContainer does not support the following CSS Grid Layout features:

The grid-line-name property. Required for named grid lines.
The fit-content() function. Limits the size of a track. The function is the a min(max-content, max(auto, argument)) formula calculated as the auto property (i. e., minmax(auto, max-content)). The track size is capped at the argument value as long as that value is larger than the minimum value of auto. In Creatio, the browser renders a single 32px-wide column regardless of the argument in the fit-content() function.
The repeat() function. Introduces a repeated fragment of a track list for compact representation of a recurring pattern.

@Input justifyItems

Space distribution along the main axis. Defines how the browser distributes space between and around elements relative to the horizontal axis of the grid container.

Available values

start	Pack the elements inside the block on the left.
end	Pack the elements inside the block on the right.
center	Pack the elements inside the block around the center.
stretch	Pack the elements inside the block evenly from left to right.

View the example settings for the justify-items property below.

Example settings for the justify-items property

.container {
    justify-items: start | end | center | stretch;
}

@Input alignItems

Space distribution along the cross axis. Pack the elements inside the block vertically.

Available values

start	Pack the elements inside the block from top.
end	Pack the elements inside the block at the bottom.
center	Pack the elements inside the block around the center.
stretch	Pack the elements inside the block evenly from top to bottom.

View the example settings for the align-items property below.

Example settings for the align-items property

.container {
    align-items: start | end | center | stretch;
}

@Input gap

Defines the track spacing between the elements in the grid container. This is a shorthand for the row-gap (vertical gap) and column-gap (horizontal gap) properties.

View the resulting settings for row-gap and column-gap below.

Resulting settings for row-gap and column-gap

.container {
    grid-template-columns: 100px auto;
    grid-template-rows: 80px 60px;
    column-gap: 40px;
    row-gap: 20px;
}

View the resulting layout in the figure below.

@Input padding

Available values

none	Zero padding.
small	Small padding.
medium	Medium padding.
large	Large padding.

View the example settings for the padding property below.

Example settings for the padding property

"padding": {
    "top": "6px",
    "right": 6,
    "bottom": "small",
    "left": "large"
}

@Input border-radius

Defines the corner rounding in the container. This setting can apply a single value to all sides or provide a specific value for each side. The property can accept numbers, strings, and the available values listed below.

Available values

none	No rounding.
small	Small corner radius.
medium	Medium corner radius.
large	Large corner radius.

View the example settings for the border-radius property below.

Example settings for the border-radius property

"borderRadius": "medium"

@Input color

Defines the container color. This setting accepts a color code.

View the example settings for the color property below.

Example settings for the color property

"color": "#FDAB06"

Use example

An example of using the GridContainer component in the diagram is available below.

Example of using the GridContainer component in the diagram

"name": "GridContainer",
"values": {
    "layoutConfig": {...},
    "type": "crt.GridContainer",
    "columns": [
        "minmax(32px, 1fr)",
        "minmax(32px, 1fr)",
        "minmax(32px, 1fr)",
        "minmax(32px, 1fr)"
    ],
    "rows": "minmax(max-content, 32px)",
    "gap": {
        "columnGap": "large"
    },
    "items": []
}
...
{
    "operation": "insert",
    "name": "Button",
    "values": {
        "layoutConfig": {
            "column": 1,
            "row": 1,
            "colSpan": 3,
            "rowSpan": 1
        },
        "type": "crt.Button",
        "caption": "#ResourceString(Button_caption)#",
        "color": "default",
    },
    "parentName": "GridContainer",
    "propertyName": "Items",
    "index": 0
}

DateTimePicker component

Beginner

DateTimePicker is a component that lets you set up a Date/Time type field on the app page. The aria-label attribute is generated automatically and refers to the <input> parent element.

Properties

control FormControl

Control.

label string

Label.

ariaLabel string

A property mapped to the aria-label element attribute.

value string

The value of the Date/Time type field.

disabled boolean

A flag that locks the Date/Time type field from editing.

readonly boolean

A flag that sets the Date/Time type field to read-only. By default, false.

rowModeSizePx number

The width of the Date/Time type field. By default, 320.

multiYearSelector boolean

A flag that enables the year selector on year click. By default, false.

twelvehour boolean

If set to true, the field uses the 12-hour clock. By default, false.

startView string

The property that sets the period for the displayed data. By default, month.

Available values

month	Month.
year	Year.
hour	Hour.
multi-year	Several years.

mode string

The display mode of the Date/Time type field. By default, auto.

Available values

auto	Automatic mode.
portrait	Portrait mode.
landscape	Landscape mode.

timeInterval number

The search delay duration, in milliseconds. By default, 1.

preventSameDateTimeSelection boolean

Lock selecting the currently selected date and time. By default, false.

Keyboard shortcuts

LEFT_ARROW

Highlight the previous day.

RIGHT_ARROW

Highlight the following day.

UP_ARROW

Highlight the previous week.

DOWN_ARROW

Highlight the next week.

HOME

Highlight the first day of the month.

END

Highlight the last day of the month.

PAGE_UP

Highlight the previous month.

PAGE_DOWN

Highlight the following month.

ALT + PAGE_UP

Highlight the previous year.

ALT + PAGE_DOWN

Highlight the following year.

ENTER

Select the highlighted element.

Checkbox component

Beginner

Checkbox is a component that lets you set up a checkbox on an app page.

Properties

id string

The unique ID. Service field.

value boolean

The flag that specifies the checkbox status. By default, false.

disabled boolean

The flag that locks the checkbox from editing. By default, false.

inversed boolean

The flag that inverts the checkbox style. By default, false.

label string

The checkbox title.

ariaLabel string

The checkbox property mapped to the aria-label element attribute. Learn more about the aria-label attribute in the official Mozilla documentation.

labelPosition string

Specifies where to display the checkbox title. By default, auto.

Available values

auto	Move the checkbox title automatically when the available screen space for the input changes. By default, to the left. When shrunk, above.
left	Display the title to the left of the checkbox.
right	Display the title to the right of the checkbox.
hidden	Hide the checkbox title.
above	Display the title above the checkbox.

Events

valueChange boolean

Fires when the checkbox value changes.

Input component

Beginner

Input is a component that lets you set up an input on an app page. The Input component uses its own <input> and <label> elements to ensure the the input is available by default. The aria-label attribute is generated automatically and refers to the <input> parent element.

Properties

id string

The unique ID. Service field.

control FormControl

The control.

label string

The input title.

inputType string

The input type. By default, text.

Available values

text	Sets the input type to text.
password	Sets the input type to text displayed using * characters. Includes a button to view the actual text.

placeholder string

The hint the input displays before you start filling it out.

appearance enum

The input appearance. By default, legacy.

Available values

legacy	Display only the bottom input border.
outline	Display all input borders.

value string

The input value.

disabled boolean

The flag that locks the input from editing.

readonly boolean

The flag that sets the input to read-only. By default, false.

autocomplete string

Permit the browser to populate the input automatically. By default, off.

rowModeSizePx number

The width of the input. When the width reaches the value and the auto mode is set, Creatio switches Input and Checkbox components from vertical to horizontal view. By default, 320.

labelPosition string

Specifies where to display the input title. By default, auto.

Available values

auto	Move the input title automatically when the available screen space for the input changes. By default, to the left. When shrunk, above.
left	Display the title to the left of the input.
right	Display the title to the right of the input.
hidden	Hide the input title.
above	Display the title above the input.

NumberInput component

Beginner

NumberInput is a component that lets you set up a numeric field on an app page. The NumberInput component uses its own <input> and <label> elements to ensure the the field is available by default. The aria-label attribute is generated automatically and refers to the <input> parent element.

Properties

id string

The unique ID. Service field.

control FormControl

The control.

label string

The numeric field title.

value string

The numeric field value.

disabled boolean

The flag that locks the numeric field from editing.

min number

The minimum allowed numeric field value.

max number

The maximum allowed numeric field value.

decimalPrecision number

The number of decimal places.

readonly boolean

The flag that locks the numeric field from editing. By default, false.

autocomplete string

Permit the browser to populate the numeric field automatically. By default, off.

rowModeSizePx number

The numeric field width. By default, 320.

labelPosition string

Specifies where to display the numeric field title. By default, auto.

Available values

auto	Move the numeric field title automatically when the available screen space for the input changes. By default, to the left. When shrunk, above.
left	Display the title to the left of the numeric field.
right	Display the title to the right of the numeric field.
hidden	Hide the numeric field title.
above	Display the title above the numeric field.

ImageInput component

Beginner

ImageInput is a component that lets you set up an image field on a Freedom UI page.

Properties

id string

The unique ID. Service field.

value string

The image field value. Can be bound to text or ImageLink attributes, such as, Base64, DataURI or CDN link to an image.

readonly boolean

Whether the field is read-only. By default, false.

visible boolean

Whether the field is visible. By default, true.

positioning string

The image position in the container. By default, cover.

Available values

cover	The image fills the entire element content box with possible cropping. Aspect ratio is preserved.
scale-down	The image fits the boundaries of the element content box without cropping. Aspect ratio is preserved.

size string

The image width and height.

Available values

small	32*32 px
medium	48*48 px
large	80*80 px
extra-large	120*120 px

borderRadius string

The type of corner rounding. By default, medium.

Available values

none	No rounding (0 px).
small	Small rounding (4 px).
medium	Medium rounding (8 px).
large	Large rounding (16 px).

maxFileSize number

The maximum allowed file size.

customHeight string optional

The custom image height in em, px, %, or other units supported by CSS. Fill out both customHeight and customWidth when you customize the dimensions.

customWidth string optional

The custom image width in em, px, %, or other units supported by CSS. Fill out both customHeight and customWidth when you customize the dimensions.

placeholderMode ImagePlaceholderMode optional

The mode of the placeholder. By default, icon.

Available values

abbreviation	Text placeholder.
icon	Icon placeholder.

placeholder string optional

Icon or text placeholder displayed if no image is added to the field. Must be bound to a text attribute if placeholderMode is set to abbreviation. Must be bound to an image from the repository if the placeholderMode is set to icon.

Dropdown component

Beginner

Dropdown is a component that lets you set up a drop-down list on an app page. The Dropdown component uses its own <input> and <label> elements to ensure the availability by default. The aria-label attribute is generated automatically and contains the label displayed using the <label> element.

Properties

id string

The unique ID. Service field.

control FormControl

Control.

label string

Label of the drop-down list.

ariaLabel string

A property mapped to the aria-label element attribute. Uses the label property value by default.

value NullableLookupValue

Object of the drop-down list element.

disabled boolean

The flag that locks the drop-down list from editing.

readonly boolean

The flag that sets the drop-down list to read-only. By default, false.

items LookupValue[]

Elements of the drop-down list. By default, [].

rowModeSizePx number

The width of the drop-down list row. By default, 320.

debounceTime number

The search delay duration, in milliseconds. By default, 500.

ExpansionPanel component

Beginner

ExpansionPanel is a component that lets you set up an expansion panel on an app page. The ExpansionPanel uses its own <button> element to expand the content and <label> element to display the label and description.

Properties

id string

The unique ID. Service field.

title string

The expansion panel title.

expanded boolean

The expansion panel status. Set to true to expand the panel content, set to false to collapse the panel content.

toggleType string

The layout of the expander arrow. By default, default.

Available values

default	Red expander arrow with a background.
material	Blue expander arrow without a background.

togglePosition string

The position of the expander arrow. By default, before.

Available values

before	Display the arrow before the panel header.
after	Display the arrow after the panel header.

ariaLabel string

The text next to the expander arrow. By default, title.

extraStyles object

Additional styles that set up the header and expander arrow.

description string

The description of the expansion panel header.

fullWidthHeader boolean

The width of the expansion panel header. By default, false.

titleWidth number

The width of the expansion panel header in percentages. By default, 50.

labelColor string

The color of the expansion panel title.

TabPanel component

Beginner

TabPanel is a component that lets you set up a tab panel on an app page.

Properties

id string

The unique ID. Service field.

items TabItem[]

The array of panel tabs. By default, [].

selectedTabIndex number

Sets the selected panel tab. By default, 0.

Button component

Beginner

Button is a component that implements the Button type component in the front-end. Use the Button type component to implement user interaction with a Freedom UI page.

Properties

name string

Button name. Required to bind the button to a handler, access the model attributes, etc.

visible string

Button visibility.

color string

Button style. By default, default.

Available values

default	Auxiliary white button.
primary	Primary. Blue button.
accent	Accent. Green button.
warn	Warning. Red button.

ariaLabel string

Button property mapped to the aria-label button attribute. Uses the caption property value by default.

caption string

Localizable button caption.

disabled boolean

Flag that locks the button. By default, false (unlocked).

disableRipple boolean

Property that disables the button animation on click. By default, false (animation enabled).

textTransform string

Display the style of the button caption.

Available values

capitalize	Capitalize the first letter of every word in the caption.
lowercase	Do not capitalize the first letter of every word in the caption.
uppercase	Capitalize every letter of the caption.
none	Do not convert the caption.
inherit	Inherit the styles of the parent element.

clickMode ButtonClickMode

Sets the button mode. By default, default.

Events

clicked boolean

Fires when a user clicks the button. Learn more in a separate article: Page customization.

Styles

disabled-button-background

Color of an inactive button.

button-border-radius

Button border radius.

Icon button

Icon button is an additional setting of a Button type component.

Properties

iconPosition ButtonIconPositionEnum

Position of the icon relative to the button caption. By default, only-text.

Available values

only-text		Do not display the icon. Display only the button caption.
left-icon		Display the icon to the left of the button caption.
right-icon		Display the icon to the right of the button caption.
only-icon		Display only the icon. Do not display the button caption.

caption string

Localizable schema caption displayed when holding the pointer over the button.

icon string

Icon to display next to the button caption.

Available values

actions-button-icon
add-button-icon
back-button-icon
bars-button-icon
calculator-button-icon
close-button-icon
delete-button-icon
disk-warn-button-icon
document-button-icon
document-new-button-icon
email-button-icon
flag-button-icon
gear-button-icon
import-button-icon
lock-button-icon
message-warn-button-icon
more-button-icon
open-button-icon
pencil-button-icon
print-button-icon
process-button-icon
reload-button-icon
save-button-icon
settings-button-icon
social-button-icon

Menu-item component

Menu-item is a component that lets you add additional actions to a button menu item. Use the Menu-item component for any interaction that performs an action on the current page.

Properties

caption string

Localizable caption of the button menu item.

visible boolean

Flag that manages the menu item visibility.

disabled boolean

Flag that locks the menu item. By default, false.

items CrtMenuItemViewElementConfig[]

Index of button menu items. Displayed when you hold the pointer over the menu item that contains a submenu. The operation mechanism and properties of the button submenu and the button itself are identical.

icon string

Icon to display next to the menu item caption.

Available values

actions-button-icon
add-button-icon
back-button-icon
bars-button-icon
calculator-button-icon
close-button-icon
delete-button-icon
disk-warn-button-icon
document-button-icon
document-new-button-icon
email-button-icon
flag-button-icon
gear-button-icon
import-button-icon
lock-button-icon
message-warn-button-icon
more-button-icon
open-button-icon
pencil-button-icon
print-button-icon
process-button-icon
reload-button-icon
save-button-icon
settings-button-icon
social-button-icon

iconColor string

Hex code of an icon color.

Freedom UI page

Freedom UI page containers

Freedom UI page structure

Properties

Use example

Properties

Use example

Properties

Keyboard shortcuts

Properties

Events

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Events

Styles

Icon button

Properties

Menu-item component

Properties

Did you find this information useful?