Compatibility App Launcher layout definition

The new App Launcher layout organizes apps into groups and defines what the groups look like. As explained in the migration guide, there are two ways to configure the new design. We describe the compatibility approach in which you have the new UI, but your groupings remain the same on this page.

The definition of apps and groups has not changed in the compatibility layout. You can find the layout configuration in /modules/ui-admincentral/config/appLauncherLayout. Most apps and groups are defined in the JCR. However, the compatibilityLayout property is required to define the rows in the new App Launcher layout. Furthermore, this property can only be configured in the config.yaml file. However, JCR-based configurations under appLauncherLayout take precedence over those defined under the compatibilityLayout node.

App Launcher layout after login

Compatibility layout example definitions

You can configure the App Launcher compatibilityLayout via the /admincentral/config.yaml file in the Resources Files app, and you can decorate the config file.

You can only use YAML to configure the App Launcher for the compatibilityLayout property. Everything is defined in the config.yaml file, and you cannot configure anything using JCR.

In the example YAML below, the top row has two columns for the edit and target groups in the default layout example below. The next row has just one column for the manage group. And the third row has three columns for the tools, dev, and stk groups.

Suppose you have configured custom groups in a version of Magnolia earlier than 6.2.22 and use the default compatibility layout with them in 6.2.22 or higher. In that case, you must check that your compatibilityLayout configuration and modify it appropriately, adding or removing groups as required.

/admincentral/config.yaml

compatibilityLayout:
  rows:
    - groups:
        - edit
        - target
      cssClass: editor
    - groups:
        - manage
      cssClass: editor
    - groups:
        - tools
        - dev
        - stk
      cssClass: developer

App Launcher layout

compatibilityLayout Properties

Property Description

Property	Description
`rows`	required The `compatibilityLayout` property is followed by `rows` indented. One `groups` line corresponds to a row in the layout (defined under the `rows` property). The number of items listed in a group defines how many columns are displayed per row. The column spacing is calculated automatically based on those definitions.
`groups`	required List of app groups.
`<group‑name>`	required App group name. For example, a group called content is specified by `name: content`
`cssClass`	required Defines a group’s background color. There are two possible values: `editor` and `developer`. Editor groups have a grey background, while developer groups have a white background.

rows

required

The compatibilityLayout property is followed by rows indented. One groups line corresponds to a row in the layout (defined under the rows property). The number of items listed in a group defines how many columns are displayed per row. The column spacing is calculated automatically based on those definitions.

groups

required

List of app groups.

<group‑name>

required

App group name. For example, a group called content is specified by name: content

cssClass

required

Defines a group’s background color. There are two possible values: editor and developer. Editor groups have a grey background, while developer groups have a white background.

Feedback

DX Core

Compatibility App Launcher layout definition

Compatibility layout example definitions

compatibilityLayout Properties

Location

Main doc sections