Skip to main content
Version: 8.1

Customize the Freedom UI

Level: beginner

Freedom UI is the revamped UI used by default in Creatio since the 8.0 Atlas release. To explore Classic UI customization options refer to the Creatio 8.0 documentation.

You can customize the following elements in Freedom UI:

To apply changes to workplaces and sections, you no longer need to log out and log back in to Creatio. For example, to add a section to a workplace, change the section icon.

Change the desktop background​

The desktop background is displayed on the Creatio homepage and any Freedom UI page in the Freedom UI.

You can use the following desktop backgrounds:

  • out-of-the-box picture
  • custom picture. Available in Creatio 8.0.7 Atlas and later.
  • color background. Available in Creatio 8.0.7 Atlas and later.

Change the desktop background to out-of-the-box picture​

  1. Click in the top right → “Set up view” → “Setup appearance.”
  2. Click in the Background setup block and select a picture in the Choose your picture field.
  3. Click Save.

As a result, the desktop background will be changed to out-of-the-box picture (Fig. 1).

Fig. 1 Out-of-the-box desktop background
Fig. 1 Out-of-the-box desktop background

Change the desktop background to custom picture​

  1. Click in the top right → “Set up view” → “Setup appearance.”

  2. Click → Add picture in the Background setup block and upload a picture. Recommendations for the picture are as follows:

    • Size: 1920x1080 pixels or larger.
    • Format: *.png.
    • File size: 3 MB or smaller.

  3. Click in the uploaded picture menu → Set background.

  4. Click Save.

As a result, the desktop background will be changed to custom picture (Fig. 2).

Fig. 2 Custom desktop background
Fig. 2 Custom desktop background

Change the desktop background to solid color​

  1. Click in the top right → “Set up view” → “Setup appearance.”
  2. Click in the Background setup block and select a color in the Choose your color field.
  3. Click Save.

As a result, the desktop background will be changed to solid color (Fig. 3).

Fig. 3 Solid color desktop background
Fig. 3 Solid color desktop background

To delete out-of-the-box or custom picture, click in the picture menu → Delete. Keep in mind that you can only delete an unused background.

Customize the desktops​

You can modify an existing desktop or add a new one (Fig. 4).

Fig. 4 Desktop
Fig. 4 Desktop

Modify an existing desktop​

Modifying an existing desktop is performed by the system administrator.

To modify an existing desktop:

  1. Click the upper panel logo to move to a desktop from any Freedom UI page.

  2. Open a desktop.

    1. Click in the bottom right.
    2. Click in the required desktop.

  3. Modify an existing desktop using Freedom UI Designer. You can do it similarly to any Freedom UI page.

  4. Click Save.

As a result, the desktop will be modified.

Add a custom desktop​

  1. Click in the top right → “Set up view” → “Setup appearance.”
  2. Click Add desktop in the Desktops block.
  3. Set up a desktop page using Freedom UI Designer. You can do it similarly to any Freedom UI page.
  4. Click Save.

As a result, a custom desktop will be added.

Set up the access permissions to desktop​

Out-of-the-box and custom desktops have default access rights. Set up the access permissions to enable only some user/role to access the desktop. To do this:

  1. Click in the top right → “Set up view” → “Setup appearance.”

  2. Click → “Setup access rights” on a desktop in the Desktops block. For example, Sales desktop (Fig. 5). This opens the access rights page for the desktop.

    Fig. 5 Desktop menu
    Fig. 5 Desktop menu

  3. Set up access rights. You can do it similarly to any record. Learn more in a separate article: Share records.

  4. Click Save.

As a result, a dedicated user/role will be able to view, edit, or delete the Sales desktop.

Change a greeting macro​

You can personalize greetings on a desktop using the greeting macro (Fig. 6).

Fig. 6 Greeting macro
Fig. 6 Greeting macro

By default, a desktop displays the user's first name corresponding to the [#Current user.Recipient Name#] macro. Creatio takes the macro value from the “GivenName (First Name)” column. If the column is empty, the value from the “Name (Full name)” column is taken instead.

To change a greeting macro on a desktop:

  1. Click on the upper panel logo from any Freedom UI page to move to a desktop.

  2. Open a desktop and click in the bottom right of the desktop.

  3. Select the label of greeting macro and enter a new value to the Text property.

    note

    You can find list of available macro in email templates. Learn more in a separate article: Personalize email content with macros.

    We recommend using any field value from the contact page that identifies a user. For example, [#Current user.Salutation#], [#Current user.Contact name#], etc. You can use multiple comma-separated greeting macro.

  4. Click Save.

As a result, a greeting macro on a desktop will be changed. If required, set up different macro on different desktops.

Change an upper panel logo​

The upper panel logo is displayed on the Creatio toolbar (Fig. 7). Click a logo to move to a desktop from any Freedom UI page.

Fig. 7 Upper panel logo
Fig. 7 Upper panel logo

An upper panel logo changes in a different way in the Freedom UI. The upper panel logo has a default logo and logo background. Changing the logo is performed by the system administrator.

note

We have already migrated upper panel logos of existing users to the new system settings, and set the background of these logos to white.

Change a default logo​

  1. Make sure you have the permission to run the “Can show the system designer icon” (CanOpenSystemDesigner code) system operation.

  2. Click in the top right → “System setup” → “System settings.”

  3. Open the “Logo in new UI” (CrtAppToolbarLogo code) system setting.

  4. Click Select file to upload an image. Recommendations for the image are as follows:

    • Width: 32 pixels or larger.
    • Format: *.svg.
    • Image background: transparent or solid. Transparent image background is used by default. To set up a solid image background, follow the instructions in a different section: Change a logo background.

    For example, upload a logo with a transparent background (Fig. 8).

    Fig. 8 Logo with a transparent background
    Fig. 8 Logo with a transparent background

  5. Click Save.

  6. Reload the page to apply changes.

As a result, the default logo will be changed.

To delete the logo, click Clear value. In this case, Creatio will use its own logo as default.

Change a logo background​

You can change the logo background based on your corporate colors.

To change a logo background:

  1. Click in the top right → “System setup” → “System settings.”

  2. Open the “Background color for the logo in new UI” (CrtAppToolbarLogoUnderlayColor code) system setting.

  3. Set the background color to the Default value field. Recommendations for the background are as follows:

    • Format: hex, RGB, RGBA, HSL, HWB codes, or named colors.
    • Use light background for a dark-colored logo.

    For example, change a logo background to #FFFFFF (Fig. 9).

    Fig. 9 Logo with a background
    Fig. 9 Logo with a background

  4. Click Save.

  5. Reload the page to apply changes.

As a result, the logo background will be changed. The background-size matches the size of the default logo.

Customize the section color code​

You can change the color code of existing and custom sections displayed in the Freedom UI navigation panel. This setup differs based on UI.

Change a color code of the Freedom UI section​

  1. Click in the top right → “Application management” → “Application Hub.”
  2. Open an app that has a Freedom UI section. For example, Customer 360.
  3. Open the Navigation and sections tab.
  4. Open a Freedom UI section to change a color code. For example, Contacts.
  5. Select a color in the Color field (Fig. 10).
  6. Click Save.
Fig. 10 Change a color code of the Contacts Freedom UI section
Fig. 10 Change a color code of the Contacts Freedom UI section

As a result, the color code of a dedicated Freedom UI section will be changed and displayed in the Freedom UI navigation panel.

Change a color code of the Classic UI section​

  1. Open a Classic UI section using Section Wizard section to change a color code. For example, Documents.
  2. Select a color in the Background icon color field (Fig. 11).
  3. Click Save.
Fig. 11 Change a color code of the Documents Classic UI section
Fig. 11 Change a color code of the Documents Classic UI section

As a result, the color code of a dedicated Classic UI section will be changed and displayed in the Freedom UI navigation panel.

See also​

Get started with Creatio Freedom UI

Add corporate logo

Tech Hour: Migrating from Classic UI to Freedom UI