Managing layouts

After deploying a layout to the DXP, you can perform these management tasks:

== Adding a layout to a component set

Layouts must be added to a component set so they can be used on a Squiz Content Management site.

Component sets can contain both components and layouts.

In the same way that you can configure a component set to control access to specific components, the same component set can be configured to control access to specific layouts.

To add a layout to a component set:

  1. Access the Component Service.

    Screen capture of the Component Service
    Figure 1. Component sets view
  2. Select Component sets.

  3. Locate the required component set.

    Existing Layouts may present in the Layouts section of the component set.

  4. Select the required component set.

  5. Click Add layout.

    Screen capture of the Component Service
    Figure 2. Selecting a layout
  6. Locate and select the required layout.

    You can filter the list of layouts by using the Search layouts box at the top.

    If you have a large number of layouts, use the Load more button to show more layouts.

  7. Click Add to set.

    Screen capture of the Component Service
    Figure 3. Version selection options
  8. Choose whether to include the Development (DEV) or Production (PROD) version of the layout.

    The DEV version is the latest version of the layout uploaded to the Squiz DXP. The PROD version is the version used in actual page production.

    An administrator can make the current DEV version into the current PROD version.

    If a Development layout is added to a component set and used on a page, you cannot switch the layout from Development to Production.

    For a layout to be switched from Development to Production it must not be in use on any page.

    To switch an in-use Development layout to Production:

    1. delete the layout and any content in the layout from the page.

      Any content you would like to retain from the layout should be moved to a different location on the page.

    2. delete the Development version from the component set.

    3. re-add the layout to the component set

      set the layout to Production as it is added.

    At this point the layout can be re-applied to a page and any retained content moved back to the layout.

    A common workflow is to have a development component set (where layouts being developed and tested are added) and a production component set (where layouts that have passed testing are added).

    Screen capture of the Component Service
    Figure 4. Selecting Development version
  9. Select Development or Production and click Add to set.

    Screen capture of the Component Service
    Figure 5. Layout added to component set

    The layout is now available in the component set, and can be used in the Page Builder that has access to that component set.

== Layout versioning

Every time a layout is deployed to the Component Service, it is given a new version based on the timestamp of the upload.

The version is visible when viewing the layout in the Updated field.

Screen capture showing layout version information
Figure 6. Layout version information

== Development and Production versions

Screen capture of a layout in a component set
Figure 7. Development and Production tags

When a layout is deployed to the Component Service, it is tagged as Development.

The development tag is added automatically, and is visible in the name (for example, three-columns__dev).

When you are satisfied with the testing of the development version, you can promote it to be tagged as Production.

Again, the production tag is also added automatically, and is visible in the name (for example, three-columns__prod).

When adding a layout to a component set, you choose whether to add the Development or Production version. This cannot be changed once it has been added without deleting and re-adding the layout.

The Page Builder always uses the latest version of a layout. When a new version of the layout is created, any content page using that layout automatically sees the new version when it is rendered, opened, or saved.

== Promote a development layout to production

When a layout is uploaded to the Component Service, it is tagged as Development. There is initially no corresponding Production tagged version.

  1. Click Create PROD to promote the current development version to production.

  2. A confirmation dialog appears with the details of the process.

After it is promoted, the versions of the development-tagged and production-tagged layouts are the same.

Screen capture showing the Create PROD process
Figure 8. Creating Production version

== Updating a production layout

After a production version has been created, an option appears to update the current production version to the latest development version whenever the development version is updated.

  1. Click Update to update the current production version with the current development version.

  2. A confirmation dialog appears with the details of the process, along with a checkbox that must be selected.

After it is updated, the versions of the development-tagged and production-tagged layouts are the same.

Screen capture showing the Update production process
Figure 9. Updating Production version

== Delete a layout from the system

When a layout is no longer needed, it can be removed from the system.

This is commonly needed when developing and testing layouts.

To delete a layout:

  1. Access the Component Service.

  2. Select Components and layouts.

  3. Locate and select the layout to be deleted.

    Screen capture of a layout in a component set
    Figure 10. Selecting layout to delete

    You cannot delete a layout that is part of a component set. It needs to be deleted from the component set first.

  4. Click Delete all tagged versions.

    If you try to delete a layout without deleting it from all component sets, an error pop-up appears, outlining the issue.

    Error shown if a layout is part of a component set
    Figure 11. Error: Layout in component set

    After removing the layout from all component sets, click Delete all tagged versions again.

    Screen capture of a layout not in a component set
    Figure 12. Layout ready to delete
  5. From the confirmation pop-up, click Delete to complete the layout deletion.

    Screen capture of a layout not in a component set
    Figure 13. Confirm deletion