Tutorial: Structuring your Table of Contents for Data Driven Catalogues

With the introduction of a new catalogue feature that landed in CET 15.5 Major, there is now a new way to create CET toolbox component tabs using only the data present within the table of contents. To show an example of how this feature works, I will do an example migration of the Plants and Flowers catalogue extension.

Here's a screenshot of the current table of contents (TOC) for Plants and Flowers (for the Advanced_Plants product catalogue):

If we were trying to make a pure catalogue toolbox (with no code), previous we would have to use the Component Tab Creator:

But in CET 15.5 Major, a new checkbox has been added to the Product Catalogues tab:

Toggling this on will enable the use of the new system, and will also signal to CET that this product catalogue should have Component Tabs generated based on the table of contents. The first thing you can immediately notice when toggling on the setting is a new button to the right of the UI Level dropdown button:

These buttons allow you to configure how your toolbox is presented to the users of your catalogue. To see this in action, let's add a new entry into the table of contents and use one of the new UI Levels: Card.

As you can see, I've named it Plants and Flowers, and I've nested all of the existing entries under this new one, as I want all of these sections to be visible within the card. Notice for this entry, the new button next to the dropdown is now enabled. This button leads to the presentation configurator, which can be used to change how your toolbox content is presented to the user:

Here, you can see the name of the card that we added, as well as the icon that's going to be shown in the toolbox. Since we have no image configured yet, the default traffic cone icon is shown. If we set it to a custom image, we can see the changes reflected immediately:

After a save and reload of this catalogue in Catalogue Creator, we can see that this tab has appeared in the toolbox!

If you compare the toolbox contents with the table of contents, you should see that the contents are identical. This is a core concept of the new system, where the contents of the toolbox are determined only by the table of contents.

This is the most basic toolbox possible with this system, and we could stop here if we wanted to. But the new UI has introduced several new toolbox library features, so let's try implementing those in our toolbox as well.

One of the biggest changes introduced in CET 15.5 Major is an additional level of tabs that live within the extension's component tab. It's quite easy to implement this in our table of contents, and works similarly to how we added a new tab into the toolbox.

As you can probably guess, only the sections under a particular tab are visible when the user is in that extension tab within the toolbox:

If we wanted to introduce some subsections to further categorise our symbols, we can just repeat the same process again, but this time using the Subsection UI Level:

Which results in our component tab looking like this:

The final feature that we can use that was added in the new UI are the collapsible groups, which let us combine several different variations of a product into one convenient button. We can do this by using the Tool Group UI Level:

Just nest any products that you want in the collapsible group to be under the new entry, which will get you this result:

And just like that, we're done with our toolbox, which abides by the toolbox guidelines, without having to write a single line of code.