Review New UI Adoption Info for recommendations and more details.

The new CET UI has introduced new features and a new look for component tab libraries, helping you to achieve a more consistent look and feel while organizing your content or products in a more logical way. These features can be enabled by setting the facelift parameter to true when creating the Library.

Here's an example of how to migrate an old extension library to the new Facelift style, using the Fika Office extension without utilizing any new images.

For the sake of simplicity, we will not be using any of the new advanced features, and no icons will be updated. To see how to use those new features, refer to Components Area (Toolbox) and Content Layout of a Component Tab.

Refactor your code to return a classic and facelift library depending if the user has toggled facelift. For extensions using lazy.xml, you can specify separate library functions in lazy.xml. This handles mapping of different function names in Components Tab Configurator.

Alternatively, if you have no other injection point you can swap out libraries in the library function instead.

Now we have classic and facelifted libraries. For the facelift library function, pass facelift=true into the CompanyLibrary constructor.

Setting this flag causes the following to happen:

After this change, the Fika extension library now looks like this:

The old header at the top is quite large, and scrolls along with the rest of the toolbox contents. Let's replace this with the new header introduced in Facelift which will give us a schemes dropdown for free!

Which now gets us the new static library header, with a scheme dropdown on the right:

As you can see from the previous image, the global section looks very sparse. We can consolidate the two Global sections across separate toolboxes.

This results in the Global section to look like this:

For the Picklist, Finish Legend and Elevation tool, we will be refering to Product Button to size the buttons correctly. Check Drawing and Project Information are tools that spawn modal dialogs which will be refering to Tool Button. We can fix the buttons up with the help of facelift hints. A list of facelift hints can be found in cm/core/library/commonHints.cm

This results in the following look for the Global section.

If this was a real port of Fika Office to Facelift, we would take this opportunity to refresh the the icons to account for new look and the sizes. I.e. Use 16 x 16 images for the tool buttons.

To further clean things up, we can separate out the Global section to its own tab.

This results in the Fika toolbox split into two tabs.

Let's start by bringing panel symbols and the manager up into product buttons. We will also introduce a new Tile tools sub section.

As we are using the faceliftSubSetAndButtonGroupOrganizer, we can remove labelMinWidth override from our MaterialLimb.

This leads up to a nice look for Panels, and a sub section for material limbs.

The next step is to work on the panel / tile animations. As the first step, we will be treating them as product buttons.

This would be how existing images for animations map out to product buttons.

As these are animation/tools, to match the facelift guidelines they should be Tool Button. To use a tool button, you can use the getToolButtonHint function and pass along a 16 x 16 image. Alternatively, you could forego the image with skipRenderImage=true for SnapperLimb and AnimationLimb.

For worksurfaces, we start by defining the relevant product button hint into the parent worksurfaceGroup limb. This hint will apply on all of its children limbs.

The next step would be to consolidate tools for the Worksurface into a sub section.

This gives the Worksurface a new steamlined look.

We can begin by combining the low and upper storage sections, then apply the relevant product button hint to the parent storageGroup (which will propagate to all the child limbs).

Following the process outlined in the previous step, we make small refineminets to the Table and Chair sections.

Which finally results in this:

To compare the output with "full" facelift that includes new icons, here is a comparison.