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:
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"/>
</MySource_AREA>
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" />; }
</style>
The results of adding this code to the parse file, is shown in the figure below.
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.
Example
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.
<head>
<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"/>
</MySource_AREA>
<!-- 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 title of the Site