Catalogue Table of Contents with the New UI
In the New UI, we have set out to reorganize the content hierarchy to improve the way we present content so that it is more consistent and easier for the user to comprehend. This is done through a set of guidelines specified in Content Layout of a Component Tab and Reference: Catalogue UI Levels that laid down the framework of content architecture. In general, most of the UI work in catalogue-driven extensions is already handled by core, so the bulk of the work will be on ensuring that the data is clean and structured correctly.
This article aims to provide a primer on the new Table of Content based toolbox structure in Catalogue Creator, for anyone looking into adopt the new look for their data-driven catalogue extensions. We will cover both pure data-driven use cases and hybrid (code and data driven) use cases.
In Catalogue Creator, traditionally UI levels are used to define Product Levels in the Table of Contents, and it must be used in conjunction with the drag-and-drop visual builder interface of the old Component Tab Creator. But there are significant amount of use case gaps with the old system, such as:
- Finding ways to have more than 3 depth Product Levels. (i.e. "Chair" Section -> "Swivel" Section -> "Number of wheels" SubSection -> "Product line name" SubSection -> etc.) Can technically have an infinitely deep Product Level tree, however it is problematic from a UI/UX perspective as well as how well CET has supported it.
- User confusion with how the Section/SubSections/Icons/None UI Levels behaved and interacted with each other.
- Trying to build libraries that break conventional UI/UX norms.
We have added a new checkbox in Catalogue Creator that allows you to opt-in to the new behavior - which will build the toolbox based on the Table of Content structure. This disables the old Component Tab Creator feature.
This allows you to:
- Have UI Levels that are standardized according to our UI/UX guidelines.
- Have an increased and reasonable amount of Product Level Depth.
- Easy to find out invalid configurations, imparting guidelines for properly arranging the Table of Contents.
We have added on-the-fly validations and a preview feature. Find out more in the New Features section.
We have updated the definitions of the Product Level's UI Level to make them more consistent with how it works for traditionally programmed extensions.
Use Card, Tab, Tool Groups UI Levels to add more levels to the Table of Contents. Read more at Reference: Catalogue UI Levels.
Migration effort depends on how your library is implemented, as it varies whether your library is a "Pure" or "Hybrid" Catalog library. Here are some references:
"Pure" Catalog libraries are ones created in the Component Tab Creator and then made visible in Catalog Explorer as described in this support article.
You can follow Tutorial: Structuring your Table of Contents for Data Driven Catalogues if yours is a "Pure" Catalog library.
These libraries refer to ones created using a combination of CM coding and data-driven catalogue work. In code, we reference the specific catalog of our needs, which is then used to assist the system in the automatic creation of a library. Please refer to Tutorial: Facelifting Hybrid Catalog Libraries.
With the introduction of the new ToC Structure, we will be deprecating the following two features in a future release:
- Component Tab Creator
- Old UI Level Structure
We aim to deprecate the above two features somewhere within 2025. This will remove the Use Toc Toolbox checkbox, and automatically have it always enabled by default.
With so many extra UI Levels, along with its rules (i.e. A Section cannot be inside a Tool Group), we have added validation on-the-fly when organizing your ToC.
Notice when you first press the Use ToC Toolbox check, the UI Level column will show red on each Product Level cell that are invalid.
When you hover onto an invalid UI Level cell, a tooltip will show, listing down all the reasons it is invalid:
If you need more guidance on how to resolve these:
Go to the Validation tab.
Enable Product Catalog Table of Contents.
Hit the Run Validation(s) button.
Select the Product Catalog Table of Contents in Tasks.
The Results will give your a more detailed explanation and guidance in solving invalid Product Levels.
Changes done in the Table of Contents will show as a preview in CET.
To do so:
Open up a catalog file(db3) already saved with Use ToC toolbox enabled.
If your catalog file does not have it enabled yet, you can save and reopen it with Use Toc toolbox enabled.
Make your edits in the Table of Contents.
Save the Catalog (Ctrl + s)
Revert(Ctrl + r) or Reopen(Ctrl + o) the catalog file.
Disable any Extensions using the catalog file you want to edit. Edits made cannot be saved if the file is currently in use.
Coming Soon in 15.5 Minor (Tentatively)
The preview will immediately show when any changes are done on the ToC. Skipping the need to save and reload the catalog file.
