Freedom UI Designer

PDF
Products
All Creatio products

Freedom UI Designer is a WYSIWIG editor that lets you create and set up a fully responsive app layout (including mobile). You can create UIs from ready layout templates, such as pages with tabs and dashboards. You can also create a custom UI of any structure from scratch. Set up the pages in the new Freedom UI framework, which lets you modify the appearance of elements, manage data sources, and place page components arbitrarily.

Work in the Freedom UI Designer using no-code tools. UI design involves structuring the page with layout elements: tabs, areas, and columns. Depending on the information you want to display on the page, you can also set up charts, add fields, lists, buttons, and other components.

To begin with the setup of Freedom UI pages, click in the top right of the current app page → Edit page.

This opens the Freedom UI Designer (Fig. 1).

Fig. 1 Freedom UI Designer
designer_interfaces_new.png

Element library (1). The library contains the tools required to set up a custom UI.

Action panel (2). Use the action panel to save the page design, cancel the changes, open the source code and page property settings.

Canvas (3). The working area of the Freedom UI Designer. Drag elements from the library to the canvas to set up the page structure.

Setup area (4). Use the setup area to manage the properties of visual components, the behavior of buttons, expansion panels, charts, etc. Learn more about the settings in the description of each element. To open the setup area, double-click the relevant element or select the element on the canvas and click .

UI Designer elements  

View the elements of the Designer in the table below:

Element types

Description

Data

An element group that manages the page data source: the object of the section where the page is located.

Charts Elements that visualize statistics. The following chart types are available: spline, line, bar, doughnut, area, column, scatter, pipeline, metric, sales pipeline, full pipeline.
Components Elements that execute target page actions and solve a number of other problems: button, label, folders, list, action panel.
Layout elements Elements that structure the page: expansion panels, tabs, areas, columns.

Data 

App pages can accept single or multiple data sources. For example, a data source for a record page is a specific object. Creatio adds a data source automatically when you create an app. You can add an existing source or create a new source when you add an app page.

To add a new data source:

  1. Click Add data source.
  2. Select “New data source.” This opens a window.
  3. Fill out the Name and Description fields of the data source in the window.

As a result, Creatio will add an object and connect it to the page as a data source. The Freedom UI Designer will display the data source in the Data group. The Code field will be populated automatically (Fig. 2).

Fig. 2 Data in the Freedom UI Designer
designer_interfaces_new_source.png

You can display data and enable users to enter data using fields and inputs.

Fields 

Use fields to display data and enable users to enter data. When you set up fields, Creatio adds and modifies the corresponding attributes of the data model. To add existing fields to the page, drag them from the Data area to the relevant part of the canvas.

Creatio specifies the data source automatically. You can change it in the Advanced section of the field setup area if needed. If the new data source is a different attribute of the page data model, the field on the canvas changes to the field bound to the specified attribute. If the new data source is an attribute of a related object, Freedom UI Designer converts the field to an input.

You can add the following field types to the page in the UI Designer:

  • Text. Enables users to enter letters, digits, and other characters. Also includes the “Phone number” format type. If Creatio is integrated with a phone service, users can click the phone number to initiate a call from the communication panel. Otherwise, clicking the field runs the application that handles phone calls.
  • Number. Enables users to enter integers or fractions.
  • Checkbox. Enables users to select either of the two values: “True” or “False.” “True” value is a selected checkbox.
  • Dropdown. Enables users to select values from a set list of options stored in a lookup or other data source. You can add a new lookup object when you add this field.
  • Date/Time. Enables users to select date and/or time, depending on the selected format.
  • Rich text. Enables users to enter rich text content. For example, this is useful for writing comments or knowledge base articles.
  • Color. Enables users to specify a color value. For example, this is useful for product pages.

The UI designer supports various properties that provide flexible field setup options. For example, requirement flag, read-only mode, multi-line mode, etc. Set the properties in the field setup area (Fig. 3):

  1. Enter the name of the corresponding app field in the Title field. Creatio populates the field automatically when you select an object. Click set_title_field_localization.png in the right to localize the title to other languages you are going to use in the app. This lets you save time on localizing the finished app.
  2. Review the unique name Creatio uses to add a column in the Code field. Creatio populates the field automatically after the data source is selected.
  3. Specify the data display format in the Format field. For example, lookup. The parameter is required.
  4. Enter additional information about the field in the Description field (optional).
  5. Specify whether the field must be filled out to save the app page in the Required field.
  6. Select the checkbox in the Copy this value when copying records field (optional).
  7. Select the Creatio object whose data to display in the field in the Object selection field.
  8. Specify whether the user can modify the field data in the Editability field. Select the “Read-only” checkbox to make the field non-editable.
  9. Click the btn_visible.png or btn_not_visible.png button in the Visibility group to make the element visible or invisible by default on the page, respectively (optional).
  10. Click Setup conditions in the Visibility group to set up element business rules (optional).
  11. Specify the position of the title relative to the field in the Title position field. For example, “Left.”
  12. Specify the Title on page parameter if the title on the page must differ from the title in Creatio.
  13. Select type of the color palette to display to the user in the Palette field for color fields. The extended palette enables users to specify custom colors as well as set transparency levels.
  14. Enter the hint for users in the Placeholder field.
  15. Enable the following options for dropdown fields (optional):

    1. adding new values
    2. showing value as link
    3. opening the record list
  16. Change the data source in the Data source field (optional).
  17. View the unique field code in the page schema in the Element code field. The field is populated automatically and non-editable.
Fig. 3 Part of the field setup area
add_field_new_1_1.png

Inputs 

Use Input layout elements to display data and enable users to enter data. When you set up inputs, Creatio does not modify the attributes of the data model.

Specify the data source manually in the Advanced section of the input setup area. Inputs accept data from attributes of related objects. If you specify an attribute of the page data model, Freedom UI Designer converts the input on the canvas to a field.

Input setup is mostly similar to the field setup. However, input setup does not modify the structure of the data model.

The input types you can add correspond to field types except for the unique Slider input. It displays an integer within a range and enables users to slide the value up and down with a preset step value. For example, a slider can enable users to specify the quantity of products from 10 to 100 and increment of 5 (Fig. 4).

Fig. 4 Slider input

scr_slider_setup.png

To set up a slider:

  1. Specify whether the user can modify the input data in the Editability field.
  2. Click the btn_visible.png or btn_not_visible.png button in the Visibility group to make the element visible or invisible by default on the page, respectively (optional).
  3. Click Setup conditions in the Visibility group to set up element business rules (optional).
  4. Select the slider style in the Style field.
  5. Select the lowest available value in the Minimum value field.
  6. Select the highest available value in the Maximum value field.
  7. Specify the slider title in the Title on page parameter. Click set_title_field_localization.png in the right to localize the title to other languages you are going to use in the app. This lets you save time on localizing the finished app.
  8. Specify the step value in the Step value field.
  9. Select the data source in the Data source field.

    Note. If you specify an attribute of the page data model as the slider data source, Creatio displays the General section that lets you modify the attribute settings.

  10. View the unique slider code in the page schema in the Element code field. The field is populated automatically and non-editable.

Charts 

Chart setup in the UI Designer is mostly similar to analytics setup in the Dashboard section of the main Creatio application. However, charts in the Freedom UI Designer have some unique features:

  • For charts with multiple series, you can customize the header color and series color individually. Use the Chart color and Style fields to do this, respectively (optional) (Fig. 5).

    Fig. 5 Setting up a chart with several series

    page_wizard_set_dashboard.gif
  • You can select from several fill options in the Chart style field for “Metric” and “Chart” dashboard headings (Fig. 6).
    Fig. 6 Setting up the chart heading style
    set_up_dashboard_style.gif
  • The “Pie chart” type is replaced with the “Doughnut chart” type. Set up this chart similar to the pie chart (Fig. 7).
    Fig. 7 Doughnut chart
    dashboard_donut.png
  • You can filter chart and metric data by the parameters of their location page. Configure the filter in the How to associate with page data field group. The setup process is similar to the How to associate with section data field group. For example, you can set up a budget composition chart on a request page and limit the chart data to the request whose page the user opens.

Components 

Button 

Use the Button component to execute a page action. For example, save the changes or run a process.

Set display and operation parameters of a button in the setup area (Fig. 8):

  1. Enter the button caption in the Title field. Click set_title_field_localization.png in the right to localize the title to other languages you are going to use in the app. This lets you save time on localizing the finished app.
  2. Select the button fill color in the Style field. This lets you color code the intended function of a button.

  3. Select the button size on the page in the Size field: S, M, L, XL. For example, this lets you increase the size of icon buttons or reduce the size of text buttons to unify the visual design of the page.

  4. Specify the action to execute when the user clicks the button in the Action field:

    • open new record
    • open existing record
    • open specific page
    • save data
    • cancel changes
    • refresh data
    • close page
    • run process
    • upload file
    • data import
    • export to Excel
    • set up access rights

    Depending on the selected action, additional fields can appear. This article covers the run process action.

  5. Select an existing process in the Which process to run? field or set up a new process. The field appears if you specify “Run process” in the Action field.

    If the selected process uses parameters, the How to run the process? field appears. To run the process for the selected page, select For the selected page. The Process parameter where the record is passed field appears. Specify the process parameter in which to pass the ID of the current record in the field.

    Note. Track the process flow in the Process log section. Learn more in a separate article: View process execution data.

  6. Set up the drop-down button menu that has several items in the Menu items group. Menus support multiple levels. A menu item title can contain text, an icon, or both. You can copy existing menu items to accelerate the setup process.

    Note. If you set up a button that adds records and different record types use different pages, Freedom UI Designer generates the button menu automatically.

  7. Click the btn_visible.png or btn_not_visible.png button in the Visibility group to make the element visible or invisible by default on the page, respectively (optional).
  8. Click Setup conditions in the Visibility group to set up element business rules (optional).
  9. Toggle a button icon and specify its position in the Use icon field. You can use the icon in addition to the button caption or replace the caption with it.
  10. View the unique button code in the page schema in the Element code field. The field is populated automatically and non-editable.
Fig. 8 Button setup area
designer_interfaces_new_button.png

List 

Use the List component to add a list of the selected object’s data based on pre-configured filters. Select the data object or click the btn_new.png button to create a new object and specify the filtering parameters in the element setup area (Fig. 9).

Fig. 9 List setup area
designer_interfaces_new_list.png

Label 

Use the Label component to add arbitrary text to the page, as well as create individual headings for element groups.

Edit label text and alignment, font style and format as well as select text and background color in the element setup area (Fig. 10):

  1. Enter the label text to display on the app page in the Text field. The field is required. Click set_title_field_localization.png in the right to localize the text to other languages you are going to use in the app. This lets you save time on localizing the finished app.
  2. Select the label style to display on the app page in the Style field. For example, “H1.” The field is required.
  3. Select the font format in the Format field. For example, “Semibold.” The field is required.
  4. Select the text alignment option in the Align field: left, center, right, justify.
  5. Select the text color in the Text color field.
  6. Select the label background color in the Background color field.
  7. Click the btn_visible.png or btn_not_visible.png button in the Visibility group to make the element visible or invisible by default on the page, respectively (optional).
  8. Click Setup conditions in the Visibility group to set up element business rules (optional).
  9. View the unique label code in the page schema in the Element code field. The field is populated automatically and non-editable.
Fig. 10 Label setup area
designer_interfaces_new_title.png

Folders 

Use the Folders component to configure the folder structure, thus segmenting records by the specified filters. To ensure the component operates as intended, link it in the setup area of the list or page data source (Fig. 11).

Fig. 11 Folder setup area
designer_interfaces_new_groups.png

Manage Freedom UI folders and set up their access permissions similarly to folders in the classic Creatio UI. Learn more in a separate article: Folders.

Folder management menu 

Use the Folder management menu component to enable users to open the page folder tree as well as reach favorite folders quickly. If the page contains the Folders component without the management menu, users will be unable to reopen the folder tree after closing it.

Feed 

Use the Feed component to enable users to post and read comments. The component has multiple types you can select in the element setup area (Fig. 12):

  • “Record.” Displays posts and comments connected to a specific record. For example, a lead.
  • “User.” Displays the index of posts and comments that mention the current user or those to which the user is subscribed.
Fig. 12 Feed setup area
scr_feed.png

Action dashboard 

Use the Action dashboard component to define the list of actions users can execute directly from the page using a mini page, for example, schedule a task, write an email, summarize the call results, post a message in the record feed. The component also lets you edit the dynamic case that organizes the workflow in the app.

If the data source is specified in the element setup area (for example, when you add an action dashboard to the canvas, Freedom UI Designer sets the element data source to the page data source automatically), click the Set up cases button to open the Case Designer. Specify the case stages, as well as steps and tasks required to complete the case in the Designer. Learn more in a separate article: Case Designer workflows.

Fig. 13 Action dashboard setup area
scr_actions_dashboard_settings.png

Attachments 

Use the Attachments component to enable users to upload and download files. You can bind the files to the current record or related objects. You can also tag specific attachments to filter them or display multiple attachment lists on a single page, for example, required request files and additional request files.

The component comprises expansion panel, upload button, refresh button, flex container, and attachment list. To set up the component:

  1. Set up the attachment list (Fig. 14):

    Fig. 14 Setup area of the attachment list
    scr_attachment_list.png
    1. Specify the object to attach the files in the Record to attach files field. Leave the field as is if you want to attach the files to the current record.
    2. Enter a file tag in the File tag field (optional). If the field contains a tag, the component assigns the tag to each uploaded attachment and displays only the attachments that have the corresponding tag.
    3. Click the btn_visible.png or btn_not_visible.png button in the Visibility group to make the element visible or invisible by default on the page, respectively (optional).
    4. Click Setup conditions in the Visibility group to set up element business rules (optional).
    5. Specify where to store the attachments in the Table to store the files field. Leave the field as is if you want to use the default table.
    6. View the unique attachment list code in the page schema in the Element code field. The field is populated automatically and non-editable.
  2. Set up the expansion panel. You can do it similarly to other Expansion panel elements.
  3. Set up the btn_upload.pngUpload button. Most of its settings are similar to other Button components. Customize the following unique settings if needed:

    1. Select the attachment list to connect the button in the Where to upload files? field. Leave the field as is if you want to connect the button to the current attachment list.
    2. Set the maximum attachment file size in megabytes in the What is the maximum allowed file size in MB? field. If you leave it empty, the component uses the maximum size from the “Attachment max size” (“MaxFileSize” code) system setting.
    3. Enter the accepted file extensions in the What file extensions are allowed to upload? field. If you leave it empty, the component accepts the file extensions from the “File extensions AllowList” (“FileExtensionsAllowList” code) system setting.
  4. Set up the btn_refresh.pngRefresh button. Most of its settings are similar to the Button component. You can also specify which attachment list to refresh in the Which data source to refresh? field. Leave the field as is if you want the button to refresh the current attachment list.

Gallery 

The component is available for beta testing in Creatio version 8.0.2 Atlas. To evaluate new Creatio capabilities, enable the “ShowDesignerDemoItems” feature in a test environment yourself using Feature Toggle mechanism or request Creatio support to enable the feature. Contact us if you have feedback, we appreciate it: beta@creatio.com

Use the Gallery component to display visual data of any Creatio object on a page. For example, you can display the index of meeting participants or order products as a gallery. Besides images, you can display record caption and brief description text in the gallery (Fig. 15):

  1. Specify the Creatio object whose data to display in the gallery in the Object field.
  2. Specify the object field whose value to display below the image in the Caption field.
  3. Specify the object field that contains the brief description of the image in the Description field.
  4. Specify the object field that contains the visual data in the Image field.
  5. Select the Selectable checkbox to highlight the selected record.
  6. Click the btn_visible.png or btn_not_visible.png button in the Visibility group to make the element visible or invisible by default on the page, respectively (optional).
  7. Click Setup conditions in the Visibility group to set up element business rules (optional).
  8. View the unique gallery code in the page schema in the Element code field. The field is populated automatically and non-editable.
Fig. 15 Gallery setup area
scr_gallery_setup.png

Layout elements 

Expansion panel 

Use the Expansion panel layout element to add page elements grouped by certain criteria. You can use this element when you create a detail. To do this, add and set up the List component as well as add list control buttons to the Expansion panel element header.

Manage the expansion panel style in the setup area: color, fonts, etc. To do this, fill out the following parameters:

  1. Specify the element title to display on the section page in the Title field. This is a required field. Click set_title_field_localization.png in the right to localize the title to other languages you are going to use in the app. This lets you save time on localizing the finished app.
  2. Specify the style of the expansion panel title in the Style field: style_group_2.png or style_group_1.png.
  3. Select whether to display the button that expands/collapses the element to the left or the right of the title in the Button position field.
  4. Select the color of the expansion panel title in the Title color field.
  5. Click the btn_visible.png or btn_not_visible.png button in the Visibility group to make the element visible or invisible by default on the page, respectively (optional).
  6. Click Setup conditions in the Visibility group to set up element business rules (optional).
  7. Select the Full width header checkbox to make the title and other elements in the expansion panel header (e. g., buttons) fill its horizontal space.
  8. Specify the width of the header title as a percentage relative to the expansion panel header in the Title width field (Fig. 16).
  9. View the unique expansion panel code in the page schema in the Element code field. The field is populated automatically and non-editable.
Fig. 16 Setup area of the expansion panel
designer_interfaces_new_group.png

You can customize the internal layout of the expansion panel: column number, background color, spacing, etc. The customization is similar to the Area layout element. To do this, click the btn_properties.png button.

You can attach any elements available in the Freedom UI Designer to the expansion panel. To do this, drag an element to the area within the expansion panel title.

Tabs 

Use the Tabs layout element to add a tab area to the page. The area lets you display content in several thematic or structural groups. That way, you can publish more required information without overcrowding the page.

You can customize the internal layout of each tab: column number, background color, spacing, etc. The customization is similar to the Area layout element. To do this, click the btn_properties.png button.

Set the tab display parameters in the setup area (Fig. 17):

  1. Manage the number of tabs in the element and set up an individual tab by clicking its title in the Tabs group.
  2. Click the btn_visible.png or btn_not_visible.png button in the Visibility group to make the element visible or invisible by default on the page, respectively (optional).
  3. Click Setup conditions in the Visibility group to set up element business rules (optional).
  4. Customize the tab panel appearance in the Appearance group.
  5. Select the background color of tabs and tab panel in the Tab panel colors field.
  6. Select the color of tab titles in the Tab title color field. You can highlight the title of the selected tab using both an underscore and different background color.
  7. View the unique tab code in the page schema in the Element code field. The field is populated automatically and non-editable.
Fig. 17 Tab setup area

You can reorder tabs and attach any elements available in the Freedom UI Designer to tabs, including other tabs. To do this, drag the tab to the needed position.

To add a new tab, click btn_add.png in the Tabs group of the element setup area.

To copy an existing tab, click to the right of the tab title in the Tabs group → Copy.

To delete a tab, click btn_delete.png to the right of its title.

To edit the tab name, double-click the current title and enter a new title. Press Enter to apply the changes. You can add icons to tab titles besides text or replace text with an icon. To do this, click the title of the tab to add an icon in the Tabs group. This opens the tab setup area. Select the Use icon checkbox, select an icon and specify where to place it relative to the tab title.

To localize the tab name, click the tab title in the element setup area. This opens the tab setup area. Click set_title_field_localization.png in the right of the Title field to localize the title to other languages you are going to use in the app. This lets you save time on localizing the finished app.

Area 

Area layout element is a container that has a layout. Use the element to add page blocks that group any combination of other elements. For example, fields, charts, buttons, and other areas. Areas let you divide the page visually into multiple sections. An area can contain various content elements.

Set the area display parameters in the setup area (Fig. 18):

Specify the color of the page area in the Color field.

  1. Specify into how many columns to divide the block in the Number of columns field.
  2. Click the btn_visible.png or btn_not_visible.png button in the Visibility group to make the element visible or invisible by default on the page, respectively (optional).
  3. Click Setup conditions in the Visibility group to set up element business rules (optional).
  4. Select the distance between columns in the Column spacing field.
  5. Select the distance between rows in the Row spacing field.
  6. Specify the radii of area corners in the Border radius field.
  7. Set the internal margins in the Spacing group.
  8. View the unique area code in the page schema in the Element code field. The field is populated automatically and non-editable.
Fig. 18 Setup area of the area element
add_new_grid.png

Note. The Code field in the Advanced group displays the unique element code in the page schema. The code is generated automatically when you add the element to the canvas and is non-editable.

Columns 

Columns (grid) layout element lets you change layout parameters for areas, expansion panels, or tabs flexibly. By default, the section can include up to 4 columns that have set spacing. You can change these settings in the element properties.

Columns can arrange page content vertically. If the design requires it, you can use a different number of columns in different page areas.

Set the column display parameters in the setup area (Fig. 19):

  1. Specify into how many columns to divide the block in the Number of columns field. The setting determines the number of columns to place other elements.
  2. Click the btn_visible.png or btn_not_visible.png button in the Visibility group to make the element visible or invisible by default on the page, respectively (optional).
  3. Click Setup conditions in the Visibility group to set up element business rules (optional).
  4. Specify the background color in the Color field.
  5. Select the distance between columns in the Column spacing field.
  6. Select the distance between rows in the Row spacing field.
  7. Specify the radii of element corners in the Border radius field.
  8. Set the internal margins in the Spacing group.
  9. View the unique column code in the page schema in the Element code field. The field is populated automatically and non-editable.
Fig. 19 Column setup area
add_new_grid_1.png

Flex container 

Use flex containers to group elements in a certain direction without binding the elements to a fixed layout. For example, flex containers are a convenient option for button placement.

The UI designer includes the following flex container types:

  • Flex row. Lets you place elements horizontally. For example, buttons.
  • Flex column. Lets you place as many elements as needed vertically.

To transform a flex row into a flex column and vice versa, click the corresponding buttons in the Direction block of the setup area.

You can also set other row or column display parameters in the setup area (Fig. 20):

  1. Click the btn_visible.png or btn_not_visible.png button in the Visibility group to make the element visible or invisible by default on the page, respectively (optional).
  2. Click Setup conditions in the Visibility group to set up element business rules (optional).
  3. Select the background color of the element in the Color field.
  4. Select the alignment type of the element in the Alignment field.
  5. Select the distance between elements in the Gap field.
  6. Specify the radii of element corners in the Border radius field.
  7. Specify the internal margins in the Spacing group.
  8. View the unique flex container code in the page schema in the Element code field. The field is populated automatically and non-editable.
Fig. 20 Flex container setup area
add_new_flex.png