Tutorial: Structuring your Table of Contents for Data Driven Catalogues
The following steps are only relevant to "pure" catalogue component tabs, which do not use any code to layout or present the toolbox tab to the user, hence they are also commonly referred as purely data-driven.
In contast, "Hybrid" component tabs uses both catalogue data and code to create the content of a component tab. There are varying degrees of what constitutes a hybrid component tab.
With the introduction of TOC Toolbox 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, this tutorial will walk you through the migration of the Plants and Flowers catalogue extension.
The Plants and Flowers extension is an example of a "hybrid" extension, that uses both the catalogue data and some code to generate the component tab. This should not matter for the purposes of this tutorial, as the catalogue data is the most important part.
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 - this tool will be deprecated going forward, as it does not support the new design guidelines nor the new components available under the New UI.
In CET 15.5 Major, a new checkbox has been added to the Product Catalogues tab:
Toggling the "Use ToC Toolbox" checkbox on will enable the use of the new TOC Toolbox system, and will 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 will open up the Presentation Configurator. The Presentation Configurator 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.
I've named the card as "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. Then I click on the "..." button to open up the Presentation Configurator.
In the Presentation Configurator, you can a preview of how the toolbox card is going to look like. 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:
A preview of the toolbox also appears within CET component tabs area:
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 driven by the table of contents.
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 header. It is easy to implement this in our table of contents - simply by adding a folder with UI Level - Tab:
And now you get tabs with corresponding sections shown:
To further categorise our products, we can use section and subsections with the corresponding UI Levels:
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 voila! Just like that, we have now created a new data-driven toolbox, which abides by the new design guidelines, without having to write a single line of code.
Read more about the new UI levels in Reference: Catalogue UI Levels, and learn how to facelift hybrid extensions in Tutorial: Facelifting Hybrid Catalog Libraries.
