Declared Vars Design Area

Last Updated: 09 Jun 2016

This design area allows you to declare variables that can be used through out the design or can be customised in a Design Customisation.

Bookmarks to the headings on this page:

  1. Customising the Declared Vars Design Area
  2. Example

An example of the Declared Vars design area is shown below.

<MySource_AREA id_name="colours" design_area="declared_vars" print="no"> 
  <MySource_DECLARE name="colour" value="fbf6e8" type="colour" description="The background colour for asset lineage"/>

This variable can then be used in the design to change the background of the asset lineage section of the design. The declared variable replaces the section's current background image in the design, as shown below.

<style type="text/css" media="all">
  #breadcrumb { background-color: <MySource_PRINT id_name="colours" var="colour" />; }

The results of adding this code to the parse file, is shown in the figure below.

Setting the background colour of the Asset Lineage
Setting the background colour of the asset lineage section

You can use Global Keyword Replacements (%globals_*%) in the Declared Vars design area's value to expose information from the current asset. For more information on these keywords, refer to the Global Keywords chapter in the Keyword Replacements manual.

Customising the Declared Vars Design Area

When you set a value to the declared vars in the design area, it will be the default value for the Design. To use a different value, you need to customise the design area through a Design Customisation. For example, if you have three separate Sites in your system, with each Site using the same Design. Each Site needs to use a different background colour for the asset lineage section. In order to do this, you need to create a Design Customisation for each Site and customise the Declared Vars design area to use the correct colour. For more information on how to create a Design Customisation and customise the design area, refer to the Design Customisation chapter in this manual.

Once you have customised the Declared Vars design area, you can customise its settings on the Details screen. The fields available on this screen will depend on what type of declared var you are using. For example, if you are using colour, a colour picker will appear on this screen where you can select which colour to use.


We have three separate Sites using the same Design. Each Site needs to define what to show in the title of the page. To do this, we declare a variable at the top of the design and use it within the HTML <title> tags, as shown below.

<MySource_AREA id_name="page_title" design_area="declared_vars" print="no">
    <MySource_DECLARE name="title" value="My Title" type="text" description="The title of the page"/>

  <!-- Global Variable -->
  <title><MySource_PRINT id_name="page_title" var="title" /></title>

A Design Customisation is created and the Declared Vars design area is customised. On the Details screen of the Declared Vars Design Area, the title of the Site is entered into the title field, as shown in the figure below.

Setting the title in the Declared Variables section

Declared Var types can be, but are not limited to: assetid, colour, duration, email, float, url, boolean, css_dimension, datetime, html_width, int, text

The Design Customisation is applied to the Site on the Settings screen (for more information on the Settings screen, refer to the Asset Screens manual). The title of the Site has now been updated and appears in the top bar of the browser, as shown in the figure below.

The new Site title
The new title of the Site

Previous Chapter Next Chapter

The Latest

Let Us Know What You Think

Let us know if you spot any errors or if you have any ideas on how we can improve the Matrix Community Website.

Contact Squiz for Demo

Let us show you the true power of Squiz Matrix by giving you a personalised demonstration.