New features

A new design theme is applied that follows the new Squiz Design System conventions used by all products in the Squiz Digital Experience Platform.

The new design theme improves the overall visuals of all UI elements such as fonts, colors, backgrounds, buttons, menus, and more.

The system default sign-in and password change screen also reflect the new design system.

Finally, backend notices, warnings, and errors are visually improved to be easier to read and understand.

The application toolbar has a couple of new improvements to it. You can see your system name in the toolbar to quickly identify it if you have access to more than one system.

A new help menu option gives you quick access to the product documentation and a link to the asset type reference screen.

The new screen header aims to make it easier to do everyday actions such as navigating asset screens, seeing asset information, saving, acquiring editing locks, and changing status.

Navigating between screens is now much easier and faster because you can access common screens from the tabbed navigation. You can find additional screens within the Settings drop-down menu.

The new screen header also features a brand new status switcher. This feature lets you quickly change the asset status from any screen without always navigating to the details screen to do it.

You can cascade the current status while also seeing how many child assets would be affected by the status change.

You can also add a workflow comment when requesting approval of an unpublished or draft asset.

The main panel area of the UI has been improved in layout and design to offer a more visually appealing and user-friendly experience.

Sections on screens now have a maximum width so that content within them is easier to read. Some screens, such as code editing screens, still have a fluid 100% width applied.

The main panel now also features an asset lineage that tells you the full hierarchical location of the current asset you are editing.

Furthermore, the current screen’s name is also now a heading on top of the main panel, together with the filter field tool being available to the right-hand side.

Your browser’s URL address bar updates automatically to represent the area or asset you are currently on and which screen you have active.

For example, navigating to the metadata screen of an asset with ID #1234 will result in the following URL: https://www.example.com/_admin?screen=metadata&asset_id=1234

Dynamic backend URLs are useful for when you want to share a backend location quickly with another user or if you want to bookmark that location to return to it later.

The <title> tag is also dynamically updated to quickly identify which asset and screen the bookmark refers to.

Adding a new component now opens a brand new panel that makes it easier to add new components by selecting from a unified list of core and custom components.

If the list of components is large enough, a filter tool will be available to find the component you want to add quickly.

Each component can have a colored icon and a description that tells the user more information about it.

Components on the page are less cluttered when you view multiple components on a single page.

Hovering over a component displays the new component toolbar, which gives you access to all settings and tools of a component.

The design of the component properties panel is improved.

Advanced settings are now hidden from view until you need them.

You can reorder components through the page builder in addition to the existing asset tree method.

Drag-and-drop the component to the location you want.

You can assign personas to components directly through the page builder to easily target and personalize content.

The Personalize component option is available only if you have personas available for the current asset you are editing.

You can create custom edit layouts for the inline editing feature using the Custom edit layout (formerly known as “Simple Edit Layout”) asset.

The Custom edit layout asset lets you create inline editing experiences for assets that do not offer a native inline editing experience. This feature is useful for template implementations that use many metadata fields and customized paint layouts.

To add a custom edit layout to an asset, you first create a custom edit layout asset. You then configure it using a combination of the keyword replacement framework and your custom JavaScript and CSS.

Once created, you can apply it to an asset using its custom edit layouts screen.

After that, users can access the “Inline Edit” screen on that asset and edit it using the customized layout.

A new setting called Enable standalone inline edit mode has been added to the details screen of design assets. This setting lets you control the behavior of accessing inline edit mode on assets.

This setting is off by default. When users add the inline edit mode suffix (/_edit by default) to an asset URL on the frontend, they get redirected to inline edit mode within the Admin UI.

With the setting turned on, the redirect from /_edit to the Admin UI will not happen, meaning that users can edit inline without loading the full Admin UI. This mode does not give you all inline editing features. However, it may be a better choice if you heavily customize, limit, or control your users’ editing experience.