Work with role-based layouts

When reviewing your storefront in Preview, you can use role-based layouts that render exclusively for selected roles.

The layout only renders in Preview if the user is authenticated and matches one of the designated roles.

Layouts of this type can be used in conjunction with any Commerce roles. For example, you can use this feature to preview a page exclusively for developers with the Design role, allowing them to test changes before they are made on the production storefront application.

Role-based layouts provide access differently than other roles. Roles are generally only containers and do not provide access by themselves. Roles contain privileges that provide access. However, role-based layouts do provide access. Ensure that you are providing the correct level of access for your users by setting up the layouts correctly.

The following example shows how role-based layouts work:

• You define a role-based layout to be viewed in Preview by developers with the Design role. The Design role is a container for the Design privilege.
• You then create a custom role, Special Designer, that contains the Design, Marketing and Preview privileges.
• Then you remove the Design role from a specific user and give that user the Special Designer role instead.
• The user no longer sees the layout in Preview, even though they have the Design privilege. Because of the differences with role-based layouts, you must ensure that you add Special Designer to the layout.

To create a role-based layout:

1. Access the role-based layout from the Design page, Layout tab.
2. Navigate to the Role layout by using the filter options.
3. On the Layout Settings, Role Layout dialog, create a layout name, set the layout as the default layout (optional), and, if you are working with a cloned layout, select the applicable viewport(s).
4. Click the Role field to use the role picker functionality. You can select one or more roles for this layout.
   Note: If a role is not selected in the Role field, or if the selected role is deleted, the layout is not rendered in Preview, even if accessed by an administrator, agent, or agent supervisor role.
5. Name the role display name.
6. For a cloned layout, include the page address and display name if applicable.
7. Click Save.

Once you have completed configuring the settings, create the page for Preview as you would with any other layout, using grid view, components, and elements.