Skip to main content
Version: 8.1

Freedom UI page overview

Level: 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 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.

See also​

Client module

Overview of Freedom UI Designer and its elements (user documentation)

Set up the app UI (user documentation)

Resources​

Element setup examples