Content Area Definitions

Content area definitions are templates for content areas. Content areas are components that can be placed either on a dashboard page or a report. Content areas can be used for multiple purposes including:

To display data in different formats for example textual, graphical or tabular
To display launch points for navigation to other parts of the system
To display static or boilerplate text.

Content area definition settings vs content area settings

All Content Areas relate to a content area definition and have settings and configuration that they inherit from that content area definition. Changes to the content area definition impact content areas using that definition.

Content areas can also have settings that are specific to the content area and can be personalised by the end user. These settings do not impact other content areas.

Creating a content area definition

Content area definitions are created when editing a dashboard.
Navigate to the dashboard where you wish to create and add the new Content Area Definition. Enter the edit mode of that dashboard by clicking on the pencil icon.
In the toolbar click on 'New Content Area' to add a new panel onto the dashboard page
In the list of pop-up templates select 'Blank HTML' to create a new content area and click on '+' to add it to the dashboard.
The new content area appears on the dashboard page
Click on 'Save' to save the changes. This will create the new content area and associated content area definition.
Put the dashboard into edit mode, once again by clicking on the pencil. The content area just added will have 3 icons: Pencil, Wrench and Bin/Trash Can.
Refer to the next section for an explanation of the wrench vs pencil settings. Use the bin/trash can icon to delete the content area from the page.

Wrench vs Pencil

When editing dashboards, content areas may have a wrench and pencil icon. Whilst both of these change settings, one has potentially a much wider impact than the other.

As can be seen from the table above. Changes made in the wrench have potentially much wider consequences, so care should be taken when making changes.
When editing the wrench settings the impact can be checked by clicking on the 'Used By' tab.

Wrench

Accessing content area definition settings

The wrench is accessed by first placing the dashboard into edit mode by clicking on the pencil.
If the wrench icon is shown against a content area then the user has the required access to change the content area definition settings.
If no wrench icon is displayed then the user does not have ability to change the wrench settings.

Info

The Info tab contains the basic attributes for the content area definition

Content area settings (Adding/Editing/Removing)

The Settings tab contains the applicable settings that will affect how the Content Areas based on this definition looks and behaves.
Settings defined here are those that relate to each content area.
By default there is a set of settings that will be automatically generated for all new Content Area Definitions which affect the look and feel of the Content Area. These settings are described in the Standard Configuration guide.

Click on the '+' icon labelled 'Add Setting' to create a new setting
Click on the bin/trash can to delete the setting
If there are a large number of settings they can be logically grouped into sections. Click on the '+' icon labelled 'Add Section Header' to add a section header and give it a section title. Ensure that the section title is marked as 'Personalisable' otherwise it will not display.
Changes to settings can impact existing content areas. Refer to the section

Defining the source of data for the content area

The Data Filters tab contains the settings related to the data displayed in content areas with this definition. In this tab the user is able to choose the Datasource and the values for any applicable filters for the datasource. Refer to the section Datasources for details on how to configure datasources.
If the content area is to show data, select the required datasource from the list.
If the datasource has filter fields defined for it, these will be displayed

Defining how the content is displayed

The Content tab is where the code and configuration of the Content Area is entered. This is a free text area which will translate the appropriate coding terminology into a visual result on the Content Area's display.
If the data filters tab includes a datasource (which defines what data is displayed), this tab will define how that data is displayed.
Typical input formats include:

As this is a free text area almost any manner of Content Area display can be achieved with enough technical knowledge and creativity. To see some basic examples see further down this guide on how to configure a Pie Chart, Bar Chart and Table Chart.
When entering data into the content click on 'Apply' see the impact. CTRL+S is a hotkey for the apply function.

Defining who has access

The access tab defines which users or groups of users have the ability to view content areas of this definition or to edit the content area definition settings.
Only those with edit access will see the wrench icon on the content area when editing the dashboard.

The following access types exist:

Determining the impact of changes on existing content areas

Before making changes to a content area definition using the wrench, it is recommended to use the 'Used By' tab to view where the content area definition is used.
The 'Used By' page lists all references and also the date of the last update.
The use of a content area definition can also be determined from the Content Area Definition Detail page.
The following table shows the impact of changes made in the wrench.

Pencil

Accessing content area settings

Content area settings are accessed by first placing the dashboard into edit mode by clicking on the pencil icon at the top of the dashboard. If there is no pencil icon at the top of the dashboard, the user does not have the authority to edit the dashboard.
Once the dashboard is in edit mode, content areas will display a pencil icon. Click on this to bring up the display settings for the content area.
If the content area queries data from the database and there are filters available for the end user to personalise there will be a database icon displayed as well as a pencil.

Display settings

Display settings are accessed by clicking on the pencil icon when the dashboard is in edit mode.
The Display Settings tab contains settings that can be used to modify and adjust the behaviour or display of a Content Area. The settings are specific to this content area on this dashboard.
Settings listed here are originally configured in the Settings tab within the Wrench panel. Settings marked as 'Personalisable' will be eligible for input in the Display Settings tab.
These settings are preserved though an upgrade even if the upgrade includes changes to the underlying content area definition.

Data filters

If the datasource for the content area has filters that can be personalised, there will be a database icon displayed when the dashboard is in edit mode.
Filters listed here are originally configured in the Data Filters tab within the Wrench panel. Filters marked as 'Personalisable' will be eligible for end users to change.
Filter values selected here apply only to this content area on this dashboard.
Filters are preserved though an upgrade even if the upgrade includes changes to the underlying content area definition.

Adding content area definitions to the library

Once configured, content area definitions can be added to a library for use on other dashboards.
To add a content area definition to the library, navigate to the dashboard containing a content area with this definition.
Place the dashboard in edit mode by clicking on the pencil at the top of the dashboard. If there is no pencil then the user is not authorised to change the given dashboard.
Once the dashboard is in edit mode, click on the wrench for the content area to bring up the settings.
In the 'Info' tab, check the box 'Is Template?'. Check the title and description are meaningful for appearance in the library.
Navigate to the Access tab and check the access levels are correct. The content area definition will not appear in the library for users unless they have view access.
Save the changes. The content area definition will now appear in the library.

Tokens used in content area definitions

When configuring Content Area Definitions users are able to use a range of different tokens to dynamically adjust data and information that is being utilised by the Content Area.
For further details refer to the Standard Tokens section of the Standard Configuration guide.

Example - Pie chart

Introduction

The content area library includes a standard Form Pie Chart content area which can be used for most scenarios using data based on forms. It is recommended to use this content area definition if possible.

Datasource

The pie chart will require a datasource before it can be fully configured. Refer to the Datasources guide for details. For this example, the following SQL can be used:

select 'Apples' group_name, 50 group_value

union

select 'Pears' group_name, 16 group_value

union

select 'Bananas' group_name, 34 group_value

Ensure datasource token maps as follows. The pie chart code will not work without these tokens.

Content area definition settings (Wrench)

Create the content area definition as described above.
In addition to the standard settings the following 3 settings are required for pie charts

In the Data Filters tab, set the datasource to the one required
In the Content tab, set the content to the following code:

</svg>

</div>

</table>

var p = new PieChart2();

p.showChart({

"CA_ID":"[D.CA_ID]"

, "IS_DOUGHNUT":("[D.CA.IS_DOUGHNUT]"=="1")

, "RAG_COLOURS":("[D.CA.RAG_COLOURS]"=="1")

, "HEIGHT": "[D.CA.HEIGHT]"

});

</script>

Content area settings (Pencil)

The example pie chart will add the following settings for the content area which can be personalised.

Example - Bar chart

Introduction

The content area library includes a standard Form Bar Chart content area which can be used for most scenarios using data based on forms. It is recommended to use this content area definition if possible.

Datasource

The pie chart will require a datasource before it can be fully configured. Refer to the Datasources guide for details. For this example, the following SQL can be used:

select 'Apples' group_name, 50 group_value

union

select 'Pears' group_name, 16 group_value

union

select 'Bananas' group_name, 34 group_value

Ensure datasource token maps as follows. The pie chart code will not work without these tokens.

Content area definition settings (Wrench)

Create the content area definition as described above.
In addition to the standard settings the following 3 settings are required for pie charts

In the Data Filters tab, set the datasource to the one required
In the Content tab, set the content to the following code:

<g>

</g>

</g>

</svg>

</div>

</div>

var b = new BarChart();

b.showChart({

"CA_ID":"[ D.CA_ID]" /* Remove the space between [ D */

,"RAG_COLOURS":false

,"HAS_DRILL_DOWN":false

});

</script>

Content area settings (Pencil)

The example pie chart will add the following settings for the content area which can be personalised.

Example - Table chart

Introduction

The content area library includes a standard Table Chart content area which can be used for most scenarios using data based on forms. It is recommended to use this content area definition if possible.

Datasource

The pie chart will require a datasource before it can be fully configured. Refer to the Datasources guide for details. For this example, the following SQL can be used:

select 1 user_id, 'Apples' group_name, 50 group_value

union

select 2 user_id, 'Pears' group_name, 16 group_value

union

select 3 user_id, 'Bananas' group_name, 34 group_value

Ensure datasource token maps as follows. The pie chart code will not work without these tokens.

Content area definition settings (Wrench)

Create the content area definition as described above.
In the Data Filters tab, set the datasource to the one required
In the Content tab, set the content to the following code:

new TableChart().createTable({

"DS_ID": '[D.CA_DS_ID]'

, "CA_ID": "[D.CA_ID]"

, "CONTAINER_ELEMENT": 'table_chart'

, "TABLE_CLASS_NAME": "DASH_list_table white_row_table"

, "LIST_ROW_CLASS": "tile_wrapper"

, "LIST_TYPE": "TABLE"

, "EXPORT_TO_EXCEL": true

, "SHOW_LOADING": true

, "SHOW_MORE_BTN": true

, "SHOW_FILTERS": true

, "SHOW_SEARCH": true

, "COLUMN_CHOOSER": true

, "RESULTS_ON_PAGE": 5

, "ID_LINK": "#DASH/forms?FORM_SRC=PPMA&FORM_ID="

, "NAME_LINK": "#DASH/forms?FORM_SRC=PPMA&FORM_ID="

, "COLUMN_MAP": {

"Owner": "USER_ID"

, "Fruit": "GROUP_NAME"

, "Quantity" : "GROUP_VALUE"

}

, "VISIBLE_COLUMNS": {

"Owner": "USER_ID"

, "Fruit": "GROUP_NAME"

, "Quantity" : "GROUP_VALUE"

}

, "HEADER_CLASS_MAP": {

"Owner": "lead_txt lead_background DASH_TBL_COL_M"

, "Fruit": "lead_txt lead_background DASH_TBL_COL_S"

, "Quantity" : "lead_txt lead_background DASH_TBL_COL_TINY"

}

});

</script>

Table chart parameters

The following table provides an explanation for the parameters in the table_chart content above:

Adding freeze panes capability

Introduction

For content areas showing large amounts of data there is the option to configure the content area so that certain panes are frozen and always displayed when scrolling through data.
Adding this capability involved adding 2 wrench settings and then 2 additional parameters to the Table Chart in the wrench settings.

Content area definition settings (Wrench)

Create the content area definition as described above.
In the Data Filters tab, set the datasource to the one required
In the Settings tab, add the following settings:

Add the new parameters to the script in the content tab.

new TableChart().createTable({

"DS_ID": '[D.CA_DS_ID]'

, "CA_ID": "[D.CA_ID]"

, "CONTAINER_ELEMENT": 'table_chart'

, "TABLE_CLASS_NAME": "DASH_list_table white_row_table"

, "LIST_ROW_CLASS": "tile_wrapper"

, "LIST_TYPE": "TABLE"

, "EXPORT_EXCEL": true

, "SHOW_LOADING": true

, "SHOW_MORE_BTN": true

, "SHOW_FILTERS": true

, "SHOW_SEARCH": true

, "COLUMN_CHOOSER": true

, "RESULTS_ON_PAGE": 5

, "ID_LINK": "#DASH/forms?FORM_SRC=PPMA&FORM_ID="

, "NAME_LINK": "#DASH/forms?FORM_SRC=PPMA&FORM_ID="

, "COLUMN_MAP": {

"Owner": "USER_ID"

, "Fruit": "GROUP_NAME"

, "Quantity" : "GROUP_VALUE"

}

, "VISIBLE_COLUMNS": {

"Owner": "USER_ID"

, "Fruit": "GROUP_NAME"

, "Quantity" : "GROUP_VALUE"

}

, "HEADER_CLASS_MAP": {

"Owner": "lead_txt lead_background DASH_TBL_COL_M"

, "Fruit": "lead_txt lead_background DASH_TBL_COL_S"

, "Quantity" : "lead_txt lead_background DASH_TBL_COL_TINY"

}

, "FIRST_FREEZE_COLS": '[D.CA.FIRST_FREEZE_COLS]'

, "LAST_FREEZE_COLS":'[D.CA.LAST_FREEZE_COLS]'

});

</script>

Content area settings (Pencil)

The additional freeze panes settings can be accessed via the pencil:

Showing the user profile image on user columns

Introduction

The TableChart() function can be configured so that when the data passed to it includes a User Id, the column can be rendered as the user profile image rather than a numeric number.

Content area definition settings (Wrench)

Create the content area definition as described above.
In the Data Filters tab, set the datasource to the one required. The query should include the User Id.
Add the new parameters to the script in the content tab.

new TableChart().createTable({

"DS_ID": '[D.CA_DS_ID]'

, "CA_ID": "[D.CA_ID]"

, "CONTAINER_ELEMENT": 'table_chart'

, "TABLE_CLASS_NAME": "DASH_list_table white_row_table"

, "LIST_ROW_CLASS": "tile_wrapper"

, "LIST_TYPE": "TABLE"

, "EXPORT_EXCEL": true

, "SHOW_LOADING": true

, "SHOW_MORE_BTN": true

, "SHOW_FILTERS": true

, "SHOW_SEARCH": true

, "COLUMN_CHOOSER": true

, "RESULTS_ON_PAGE": 5

, "ID_LINK": "#DASH/forms?FORM_SRC=PPMA&FORM_ID="

, "NAME_LINK": "#DASH/forms?FORM_SRC=PPMA&FORM_ID="

, "COLUMN_MAP": {

"Owner": "USER_ID"

, "Fruit": "GROUP_NAME"

, "Quantity" : "GROUP_VALUE"

}

, "VISIBLE_COLUMNS": {

"Owner": "USER_ID"

, "Fruit": "GROUP_NAME"

, "Quantity" : "GROUP_VALUE"

}

, "HEADER_CLASS_MAP": {

"Owner": "lead_txt lead_background DASH_TBL_COL_M"

, "Fruit": "lead_txt lead_background DASH_TBL_COL_S"

, "Quantity" : "lead_txt lead_background DASH_TBL_COL_TINY"

}

, "PROFILE_COLUMNS": {

"USER_ID": {}

}

});

</script>

Content area settings (Pencil)

The additional freeze panes settings can be accessed via the pencil:

Creating a dashboard tile list using repeaters

Introduction

Many dashboards present data as rows of tiles rather than as a table.
Repeaters are essentially table charts that loop through the result set of a datasource and then present them in rows of 4 tiles.

Content area definition settings (Wrench)

Create the content area definition as described above for the table format.
In the Data Filters tab, set the datasource to the one required.
In the Content tab, set the content to the following code.

<div>Name of the Fruit: [DS.GROUP_NAME]</div>

<div>Amount of Fruit: [DS.GROUP_VALUE]</div>

<div>Profile Picture: [DS.USER_ID]</div>

</div>

new TableChart().createTable({

"DS_ID": "[D.CA_DS_ID]"

, "CA_ID": "[D.CA_ID]"

, "TEMPLATE_DIV": "repeater_template"

, "CONTAINER_ELEMENT": "div_container"

, "LIST_TYPE": "LIST"

, "LIST_ROW_CLASS": "tile_wrapper slide_tile"

, "SHOW_MORE_BTN": true

, "SHOW_FILTERS": true

, "SHOW_SEARCH": true

, "SHOW_LOADING": true

, "RESULTS_ON_PAGE":24

, "PROFILE_COLUMNS": {

"USER_ID": {}

}

});

</script>

Explanation of content code

The following table provides further explanation for specific aspects of the code in the content tab: