Using the Creatio Toggle Panel on a Freedom UI Page

One of the nice new UI features for Creatio Freedom UI pages is the Toggle Panel layout component. You’ve likely seen this already, most Freedom UI pages for sections use this for the Attachment’s and Feed areas. It’s those pop out panels on the right side that can toggle open and closed.

It can be used anywhere. Some new pages, such as the “Setup Appearance” page in Creatio 8.1 even use this as the entire page so the complete page contents can toggle. These Toggle Panels are especially nice with section lists – especially with dashboard elements since they can also be bound to the list contents, like this one that I’ve added to the Cases list:

The first time I tried adding one, however, it did take a bit to figure out how to use it correctly and make it look as I wanted. Let’s take a look at the steps.

1. Add the Toggle Panel control to the page

First of all, you’ll need to just drag the Toggle Panel to where you want it.

2. Drag the Toggle Panels tab buttons

When you add the Toggle Panel control, it puts the panels and the toggle buttons right next to each other. The next thing to do it is to drag the toggle buttons part of the control to a better location, as shown here:

3. Set a better size for the panels

The default size of the panels is likely not the size you want them to be, they are far too narrow. Sadly, you can’t yet fix this in the page designer. Instead, click the button to open the code for the page:

<– Click this button to open the page code in the top right of the designer

Make note of the toggle panel’s name in the designer

Then search for this in the page code (it will have a type of “crt.TabPanel”). You’re going to add the following to it:

"layoutConfig": {
	"maxWidth": 368,
	"minWidth": 368
},
"stretch": true,
"classes": [
	"card-toggle-tab-panel",
	"container-background-color-primary",
	"container-border-area"
]

It will change from this (before):

To this (after):

After saving the code, you can go back and refresh the designer and the Toggle Panels will look great.

Optionally, set a default panel to show when the page opens

One last useful thing to note. By default, the Toggle Panel shows as collapsed, meaning the tabs are hidden and the user must click one to show it. If you’d like to default it with a particular tab showing as expanded, you can add the folloiwing to the crt.TabPanel element:

"selectedTab": {
	"value": "NameOfTabHere"
}

where “NameOfTabHere” will be the name of the tab you want to show by default (which will have a type of “crt.TabContainer”)