Creating and applying custom edit layouts
Learn how to create and use custom edit layouts.
Applying edit layouts on the layout manager
The layout manager allows you to apply edit layouts to assets on a system-wide basis and is located under the system management folder in the asset tree, as shown in the figure:
When you apply an edit layout in the layout manager, it will be used across all sites within the system.
Management of edit layouts is done on the Details screen of the layout manager. For more information on the History and Logs screens, refer to the Asset screens manual.
| You can also apply edit layouts to different root nodes within the system on an asset’s Layouts screen. For more information, refer to the Applying edit layouts on the layouts screen chapter in this documentation. |
Details screen
The Details screen of the layout manager is shown in the figure: For more information on the Status, Future status, and Thumbnail screen, refer to the Details screen chapter in the Asset screens manual.
CSS settings
This section allows you to disable the formatting applied to the inline edit mode to make it look similar to the administration interface. The CSS settings section of the Details screen is shown in the figure:
By disabling this option, you will have greater flexibility over the formatting of the inline edit mode.
By default, Output edit CSS file is set to Yes, meaning that the formatting will be used.
Edit layouts
This section allows you to select which edit layouts to use for a particular asset type. By default, no information will appear, as shown in the figure:
Once you have selected an asset type in the add a layout section, the fields shown in the figure will appear.
Each asset type that is selected will appear in a blue heading. For example, in the previous figure, the standard page asset type has been selected; hence page standard appears in a blue heading.
-
In the Add a layout for screen list, select the screen you want to apply a layout to
-
Select Save. For example, if you have created an edit layout for the Metadata screen, select
Metadatafrom the list.
If you have only created one edit layout for the asset type, selectDetailsfrom the list.
Additional fields will appear on the screen, as shown in the figure:
-
Select the
Editlayout in the Layout section. -
Select Save. The layout will now be used in the inline edit mode for the selected asset type.
| An edit layout will only be visible if a design has been applied to the asset. If the edit layout does not appear, a design may not have been applied. For more information on applying a design, refer to the Settings screen chapter in the Asset screens manual. |
Once you have applied an edit layout, you do not need to reapply if you make a change to the layout. The inline edit mode will be automatically be updated with the changes.
To remove a screen for an asset type:
-
Click the
Removefield. -
Select Save.
To remove an asset type:
-
Select the
Remove customizationsoption under the blue heading. -
Select Save.
Add a layout
This section allows you to select which asset types to which you want to apply an edit layout.
-
Select the asset types from the list provided.
-
Select Save. For example, if you have created a layout for the standard page, select
Standard pagefrom the list.Additional fields for that asset type will appear in the edit layouts section.
-
To select multiple asset types at once, then select More…. An additional list will appear on the screen.
Applying edit layouts on the layouts screen
The Layouts screen allows you to apply edit layouts to root nodes, overriding any edit layouts that have been applied on the layout manager. This function allows you to create individual layouts for the different sites in your system.
An example Layouts screen configuration for a site is shown in the figure:
An Edit layout has been applied for the Details screen of all standard page assets in the site.
For more information on applying edit layouts on the layouts screen, refer to the Layouts screen chapter in the Asset screens manual.
Creating and applying edit layouts
To understand how to create and apply edit layouts, consider the following examples.
Using one edit layout
We want to create a layout for the inline edit mode that allows the user to edit a standard page and fill out the metadata fields. As workflow is applied to the assets, they need to change the status to safe edit and apply for approval. This should all be shown on one page.
Creating the edit layout
An edit layout is created, and the layout is entered onto the edit contents, as shown in the figure:
The Details screen’s status section is shown in the first, followed by the edit contents screen and then the metadata fields. The Save button is added at the bottom of the page to save their changes. Instructions on how to use each part of the screen and a heading are also added.
| If there are fields on the screen that only certain users should see, create a new division and add them to that division. You can then modify the permissions for that division so that only certain users see those fields in the inline edit mode. |
Applying the edit layout
The edit layout now needs to be applied to the standard page for the system. To do this, follow the steps outlined here:
-
On the Details screen of the layout manager, select
Standard pagein the add a layout field. -
Select Save. Additional fields will appear in the edit layouts section.
-
Select
Detailsin the Add a layout for screen list. -
Select Save.
-
In the grey box, select the
Editlayout in the layout field. -
Select Save. The layout will now be applied to all standard page assets in the system.
Using multiple edit layouts
We want to create a layout similar to the layout in the previous example. This time, however, we want to split the screens up and add the Preview screen.
Creating the edit layouts
Four edit layouts are created in the asset tree, as shown in the figure: On each of these layouts, the required fields and instructions are added.
An example of one of these layouts is shown in the figure:
Applying the edit layouts
The edit layouts now need to be applied to the standard page for the system. To do this, follow the steps outlined here:
-
On the Details screen of the layout manager, select
Standard pagein the add a layout field. -
Select Save. Additional fields will appear in the edit layouts section.
-
Select
Detailsin the Add a layout for screen list. -
Select Save. In the grey box, select the Details screen layout for the Details screen in the layout field.
-
Select Save.
-
Repeat steps 2 and 3 and apply the Edit contents screen layout to the Contents screen, the Metadata screen layout to the Metadata screen, and the Preview screen layout to the Preview screen. The edit layouts section should look similar to the figure:
