Set up a sidebar

Level: beginner

note

The sidebar functionality is availabile in beta version in Creatio 8.1.3. To access the functionality, turn on the “SidePanelExtensions” feature for Creatio 8.1.3 or “SidebarExtensions” and “ShowPageAddonsPropertiesPanel” features for Creatio 8.1.4. Learn more: Manage an existing additional feature.

Sidebars are special pages you can view by clicking the buttons in the top right of the Creatio UI, for example, feed or chats.

Fig. 1 Opening a sidebar

Since Creatio 8.1.3, you can use Freedom UI pages as sidebars. The page width is adjusted automatically. Sidebars can include the following:

• any content available in the Freedom UI Designer
• business rules
• business processes
• customizations done using code

Example

Create "Vacations and sick days” sidebar for employees. Display three metrics that contain vacation days available, vacation days used, and sick days available on the sidebar. Place the sidebar the first in the notification panel.

Fig. 2 Custom sidebar

1. Create a new Freedom UI app or open an existing app. Instructions: Manage apps.

2. Click New page.

3. Select the Blank page template → Select. Make sure to use only Blank page template to ensure backwards compatibility of sidebars.

4. Place three metrics that display the number of vacation days available, vacation days used, and sick days available on the page. Learn more: Set up widgets.

5. Click to open the page properties.

6. Go to the Advanced group → Sidebar. This opens a window.

7. Set up the sidebar properties (Fig. 2).

   Fig. 3 Sidebar properties

   

   Field	Field value
   Enabled	Whether to display sidebar to users. Use it to temporarily conceal the sidebar, especially during development or customization. Available for custom sidebars only. For this example, leave it on.
   Title	Localizable sidebar name displayed above its content. For this example, enter “Vacations and sick days.”
   Code	Code of the sidebar required for low-code customization. For this example, enter “UsrVacations.”
   Location	Location of the sidebar in an existing Freedom UI panel. For this example, select. “Communication panel.” Leave the field empty to make the sidebar a standalone panel.
   Sidebar icon	Icon of the sidebar. For this example, select .
   Sidebar position	Sidebar order number in the Freedom UI panel or among other panels. Out of the box, position numbering for tabs in the panel is 1000, 2000, 3000, etc and for standalone panels 9000, 10000, 11000, etc. Enter the number between these numbers to place the sidebar between existing sidebars. For this example, enter “10.”
   Operation permission code	Code of the operation used to restrict access to a sidebar based on user or user group permissions. For this example, enter “CanViewVacationSidebar.” Leave the field empty to make the sidebar available for both employees and external users. Learn more: System operation permissions.
   Hide notification mark automatically	Whether to hide the notification mark after the user opens the sidebar. For this example, leave it on. Toggle off to code custom behavior. Learn more: Customize sidebars (developer documentation).

8. Click Save.

9. Save the page.

As a result, Creatio will add the sidebar to the specified Freedom UI panel immediately after you refresh the Creatio page.

---

See also

Freedom UI Designer

Customize sidebars (developer documentation)