Creating Clickable Lists

On almost every Dragon1 visualization you will make use of lists.

It can be a bullit list, icon list, order list or numbered list.

Below is a live example of several lists.

Download the excel sheet and upload it in the Dragon1 Viewer or view the example directly (from a JSON file)

dragon1 create clickable list

Example of creating clickable lists

How to create a Clickable List

To create a clickable list via Excel (Option 1):

  • Enter data on TABs in an Excel sheet (like the example shows and as is explained on this page).
  • Upload the Excel sheet in the Dragon1 Viewer

To create a clickable list via the repository (Option 2):

  • Enter data in the repository via the Data Manager
  • Create an Atlas, Folder and Page
  • Create a Visualization with Areas
  • Link the Visualization to the Page
  • Create Styles and Constants
  • Link the Data to the Area
  • Optionally: export it to an Excel Sheet

Data Sources

Basically there are 3 sources of data Dragon1 can use: the Dragon1 repository/database, Excel Sheets & CSV files, any rest API, JSON & XML files.


The live Excel sheet example in this page shows 3 data lists and 1 HTML list.

The 3 data lists show a list of stakeholders, drivers and projects.

In the Excel Sheet you see a TAB for stakeholder, driver and projects.

The attributes for these entities required are:

  • id
  • class
  • name
  • ref (optional)
  • alias (optional)
  • type
  • descr
  • shapetype (optional) - here you can specify another icon to use
  • tags
  • group
  • weight
  • style (optional)
  • ...for styling attributes like shapestyle, X, Y, Width, Height, Fill and Stroke, see below...
  • report
  • reportstyle
  • link (optional) - here you can specify a url or visualizationid to jump to
  • document (optional)
  • status (optional)
  • owner (user defined example)

You can also add stakeholders, drivers and projects in the Dragon1 repository via the Data Manager and use that as source of data.

Define at the level of atlas or visualization datasource=repository in the descr field or as datasource attribute with the value repository.

datasource=file will enforce the data is not taken from the repository.

The default for datasource is repository.


The data (on the TABs) can be shown at areas.

An area is a rectangle or other shape, width a certain x,y position and width, height size.

Area can be linked to a class of entities, type of entities and/or instances entities, via the dataclas, dataid, dataattribute and datavalue attributes.

Area can contain subareas. Area can positioned absolute or relative.

Also, entities can be linked to areas via the group attribute

The Area TAB show how the areas are configured for this example.

Important attributes for the areas are:

  • id
  • class
  • name
  • ref (optional)
  • alias (optional)
  • type
  • descr
  • tags
  • group
  • dataclass
  • dataid
  • dataattribute
  • datavalue
  • sortorder (optional) - example: A-Z or Z-A or weight
  • style (optional)
  • distribute (optional) - example: spacearound, spaceevenly or spacebetween
  • distributevertical (optional) - example: spacearound, spaceevenly or spacebetween

Styles / List Markup / Layout

The styling and layout of the lists can be completely seperated from the data, but also mixed fully or partially.

You can add a Style TAB in the Excel Sheet and use the styles with any entity via a style attirbute

the example Excel Sheet show a styling TAB

The following common styling / markup / layout attributes are available

  • shapestyle (optional) - example: item or listitem or text or label
  • icon (optional) - example: bullit, circle, whitecircle, square, whitesquare, checkmark or none
  • x (optional) - example: 100px
  • y (optional) - example: 100px
  • width (optional) - example: 100px
  • height (optional) - example: 100px
  • fill (optional) - example: green of #00ff00
  • stroke (optional) - example: darkblue or #ffff00
  • strokewidth (optional) - example: 3px
  • fontsize (optional) - example: 24px
  • fontweight(optional) - example: bold or normal
  • fontfamily (optional) - example: Arial
  • padding (optional) - example: 24px
  • margin (optional - example: 24px
  • color (optional) - example: cyan or #f1234f
  • background - example: #ff00ff or purple
  • border
  • textalign
  • verticalalign

For more info on HTML Color Codes, check :

Use constants to create a gradient color

Note that px means pixel and often can be omitted

HTML Lists

The viewer and excel sheet support creating an HTML list.

Draw a Text element on the canvas in the viewer.

Select the Text element.

Click on the View button to place the viewer in Edit mode.

At the left panel, Enter HTML formatted table in the description attribute of the Text Element

You can also place an HTML string in the descr attribute of a text element in the Excel Sheet. See the example for this.


- to do-


List generated as described on this page are interactive.

When you move over the items, you see a popup dialog box showing certain attributes.

At the Atlas TAB you can control the shown attributes with the card and panel attributes for a visualization.

If you click on an item in the list, the left panel is shown with details about the item.

If the report attribute is filled, this text is shown also in the leftpanel. The reportstyle provides the backgroundcolor and textcolor to use.

If the link attribute is filled of an entity, upon selecting it, the Link Button if the leftpanel will color blue.

Click on the blue button to jump to the configured visualization or url.