Component Library: Nav Wrapper Definitions

Part of the Introduction to Component Library series.

Nav Wrapper Definitions

Watch the Component Library Nav Wrapper Definitions video here.

Nav Wrapper definitions are probably the most complex of the CL definitions. These definitions are used to create a nav wrapper template.

As a reminder nav wrapper templates are templates that typically produce the header and footer markup that wraps around the content of each page. This is done so that you have don’t have to handle all this output in each individual page template.

They are created in the Nav Wrapper Definitions folder using the File > New > Nav Wrapper model.

The nav wrapper definition is best understood by first looking at the Components and Wrapper tabs.

Components Tab

The Components tab allows you to create one or more sections where a section is a list of components, a layout to use when arranging those components and a designation as to whether the section is a header or footer section.

You can have as many sections as you need. If you create more than one section that is designated as a header or footer section, they will be included in the generated code in the same sequence as they appear in the sections list.

Wrapper Tab

The Wrapper tab provides four control panels where you can provide markup and customise components. This graphic shows how the elements from the Component and Wrapper tab are integrated.

Header

As you can see, the Wrapper Header comes before Component Header sections are integrated. This means that the Header markup should contain the opening HTML body tag if you are using HTML output.

Here is an example.

CL provides from pre-defined placeholders that you can place in the header markup:

• {css} – the placeholder that all CSS references provided below the pattern will be inserted
• {javascript} – the placeholder that all Javascript references provided below the pattern will be inserted
• {metadata} – the placeholder where the output from the standard metadata component will be inserted; this component is covered in the next section on template definitions;
• {page-specific-css-javascript} – the placeholder where additional CSS and Javascript references will be inserted; this is also covered in the template definitions section

Before Content

Wrapper > Before Content is a pattern field in which the markup that typically wraps each page content can be placed. No placeholders are expected in this markup.

After Content

Like “Before Content”, Wrapper > After Content is just a pattern field in which the markup that typically wraps each page content can be placed. Again, no placeholders are expected in this markup.

Footer

Similar to the Wrapper > Header control panel, you are presented with a pattern field and the following pre-defined placeholders are available:

• {css} – the placeholder that all CSS references provided below the pattern will be inserted
• {javascript} – the placeholder that all Javascript references provided below the pattern will be inserted

Settings

On the settings tab, you can specify:

• the name of the generated nav wrapper template — defaults to the same name as the template definition;
• the folder you want to template generated into – defaults to the project/templates folder
• an optional configuration asset.

The configuration asset is a content asset that the nav wrapper will use to read in the field values required for any components you chose earlier. It is important that the config asset uses the same field names as the nav wrapper is expecting to find. The simplest way to do this is to use the generated nav wrapper template as the asset template.

There are two choices:

1. Coupled: in this case, you will pick a specific config asset to use.
2. Decoupled: in this case, CL will generate code the searches for a config asset based on the given template name and given starting folder.

When you have everything in place, you must check the “Create: yes” option before CL will generate anything. This allows you to save the nav wrapper definition in intermediate states, which you get all the dependencies in place.

Prev: Layout Definitions

Next: Template Definitions