Freedom UI page overview
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.
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 theactionButtonsContainer
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 ofCSS 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 ofCSS Grid Layout
.
Learn more in the user documentation: Freedom UI Designer.
See also
Overview of Freedom UI Designer and its elements (user documentation)
Set up the app UI (user documentation)