HTML Dashboard

The HTML Dashboard template is used to configure the dashboards introduced in QualiWare 10.8 and to configure the Desktops introduced in QualiWare 10.10.

The HTMLDashboard-template contains a collection of HTMLDashBoardItems.

The list of Dashboard Items on the Dashboard contains the following coloums:

Name: The name of the HTMLDashboardItem
Title: The title as defined in the HTMLDashboardItem
Method: The Method used in the HTMLDashboardItem
Position X and Position Y: the position of the item on the dashboard (0,0) is in the top left corner of the dashboard. As default the dashboard contains 12 coloumns (this can be modified on the Settings tab on the HTMLDashboard)
Size dX, dY: Width and Height of the dashboard item

The settings above are derived from the HTMLDashboardItem (hence you should open each of the items to change the settings).

It is possible to set up filters and optimal parameters for each of the items. These settings are configured directly in the HTMLDashboard.

Context filter: possibility to set a context filter for when the dashboard item should be available (see context dependency)
- E.g. the filter “CurrSel->Template=BusinessProcess” will only make the Dashboard Item available when a symbol of the template type “BusinessProcess” is selected in the dashboard.
- If the filter is set to “False“, it will simply hide the Item from the Published Dashboard, this is a simple way to hide items and keep them in the configuration
Role filer: possibility to set a filter for which role(s) the dashboard item should be available (see more about roles here)
Configuration filter: filter for what configuration the dashboard item should be available
Optional parameters: Specify optional position and size for the item. It is possible to reuse the dashboarditems in multiple dashboards, and if there is a need for optional parameters they can be specified here (default parameters are defined in the DashboardItem, and shown in the (X, Y, dX, dY)).

Example with context, role and configuration filters:

Diagram Dashboards (QualiWare 10.8)

The Dashboard is setup up through a HTMLTemplateDefinition’s Dashboard tab:

Graphical user interface, text, application Description automatically generated

It is possible to have multiple Dashboards. In this case they will appear in the selection in the web:

Dashboard used for Desktops (QualiWare 10.10)

The Dashboard template is from QualiWare 10.10.used to setup up the Desktops on the collaboration platform. The Dashboards are linked from the HTMLPublisher (on the Personal Page tab) through a HTMLDesktop to one or multiple Dashboards.

Configuration of Dashboards

The Dashboard Setting tab contains the setting following table:

Graphical user interface Description automatically generated

Background: You can insert any HTML color, HEX or RGB. This field behaves like color in CSS.

Examples: rgb(204, 255, 229) #E5FFCC PaleGreen

minWidth and maxWidth: The dimensions of the dashboard.

minRow and column: minimum rows amount and columns

cellHeight and CellHeightThrottle: cellHeight- one cell height (default?: ‘auto’). Can be:

an integer (px) Example: 20
px, em, rem (ex: ‘100px’, ’10em’, ’10rem’)
auto – height will be calculated for square cells (width / column) and updated live as you resize the window
initial – similar to ‘auto’ (start at square cells) but stay that size during window resizing.

CellHeightThrottle: throttle time delay (in ms) used when cellHeight=’auto’ to improve performance vs usability (default?: 100).

marginTop, marginBottom, marginLeft, marginRight and marginUnit:

The margins can be set with integers or strings. Use marginUnit to define the unit. Example of units: “px” and “em”.

float: enable “floating” items (default: false). Enabling this allow items to be anywhere on the page.

When true:

A picture containing diagram Description automatically generated

When false, items “fall upwards” and stack:

A screenshot of a game Description automatically generated with medium confidence

animate: turns animation on to smooth transitions (default: true). This is used when editing the layout when items swap places.

placeholderText: placeholder default content (default: ‘MOVE HERE’). This is shown when user is in edit mode and dragging the items:

Shape Description automatically generated with medium confidence

rtl: “Right To Left”, Possible values are true, false, ‘auto’. This value has no effect.

In QualiTube, you can find videos about how to configure the Dashboards

HTML Dashboard Item

The HTML Dashboard Item template is used in the HTML Dashboard template to configure the dashboards introduced in QualiWare 10.8 and the Desktops introduced in QualiWare 10.10

The DashboardItems can show many types of data in different ways which makes them a flexible tool.

Title: The title shown on the dashboard tile. If no title in inserted the name of the HTMLDashboardItem will be shown on the web. As seen in the example above, it is possible to insert a property name in {} . In the example above the name of the Template is shown.

Placement:

Position X and Position Y: the position of the item on the dashboard (0,0) is in the top left corner of the dashboard.
As default the dashboard contains 12 coloumns (this can be modified on the Settings tab on the HTMLDashboard)

Size:

Width and Height: the size of the dashboard item.

Icon source:

Select the icon to be shown on the dashborditem (see more)

Method:

The is a comprehensive list of Methods available (see more)

Reference Link(s)

Links associated to the DashboardItem, this is depending on the selected Method
As a part of this it is possible to set up context filters, making reference context dependent (e.g. showing spefic parameters for a specific template type).

Icon Source

The icon source attribute allows you to select from a predefined list of symbols that are available for use.

A screenshot of a computer Description automatically generated with low confidence

Please refer to the DashboardItem Icon Source Cheat Sheet in the Appendix (below) for the keyword mapping list. The Method attribute (combined with the Parameters and Reference Link(s) attributes) determine the behaviour of the DashboardItem.

Example: Custom Image on a DashboardItem

It is possible to use a custom icon on a DashboardItem. The URL can be any image file supported by browsers and it must be fetched through HTTP/s protocol.

Put the image file in the GeneratedHTML folder in your IIS-application. In this example I have put the image into the Images-folder.

Graphical user interface, text, application, email Description automatically generated

Graphical user interface, text, application Description automatically generated

DashboardItem Methods

The DashboardItem contains a comprehensive set of different Methods that each have a dedicated behavior.

DashboardItem – ContextInfo

Using the ContexInfo-method will make the item responsive and display information about the selected object.

Graphical user interface Description automatically generated with medium confidence

It is set up in the following way:

Graphical user interface, application Description automatically generated

Alternatively, it is possible to display the content of an already existing HTMLContentTable:

Graphical user interface, application Description automatically generated

In QualiWare 10.9 context dependency was introduced, making the tile content dependent, e.g. showing relevant properties of the object type selected in the diagram view, using the “CurrSel” filter.

DashboardItem – ContextView

Shows the context view in a tile.

It is a standard method where no other configuration is needed.

DashboardItem – ObjectAttribute

Shows a set of attribute to the “main”object in the dashboard, e.g. the diagram in a diagram dashboard.

Thus, compared to the ContextInfo method this item is not responsive/dependent upon what is selected in the diagram.

DashboardItem – ObjectLink

Using the ObjectLink will open the object directly.

Example of using the ObjectLink-method to open a report:

DashboardItem – BusinessChartView

This method is used to insert a dashboard item to link to e.g. a BusinessChart

You insert the BusinessChart under Reference links.

DashboardItem – BusinessChartDataView (10.10)

This method is new in QualiWare 10.10 and shows a businesschart side-by-side to a query, and when a selection is made on the businesschart, the query updates and lists the objects “behind” the selected part on the businesschart.

The dashboarditem is used in the new Document Management Desktop and Contract Management Desktop.

DashboardItem – BusinessChartEmbedded

This method shows a businesschart in a dashboard tile.

DashboardItem – BusinessChartEmbedded – Context (10.10)

This method shows a businesschart in a dashboard tile.

This method is context dependent, i.e. the businesschart is updated based upon what is selected (responsive).

DashboardItem – DiagramView

This method shows the diagram in the tile and is used as default on the different diagram dashboards.

In this method the different object on the diagram are selectable (to support responsiveness, and show details of the selected object on the diagram).

DashboardItem – DiagramLink (10.10)

This method shows the referenced diagram in the tile and is used default on top diagrams in the desktops introduced in QualiWare 10.10.

In this method the whole diagram works as a link, and will when clicked shown the diagram in the dashboard view (i.e. the different objects in the diagram are not selectable, to get this functionality you should use DiagramView.)

DashboardItem – HierarchyView

The HierarchyView-method will show the Hierarchy based on the HierarchyView-object in the Reference Link(s).

Graphical user interface Description automatically generated

Example:

Graphical user interface, application Description automatically generated

It is not possible to configure the HierarchyViews presentation on the DashboardItem.

DashboardItem – HighlightView

The HighlightView-method is used to highlight object based upon a query.

As seen above it is possible to have multiple highlight parameters in the item, it is important that the sequence of the queries listed under reference link(s) corresponds to the same sequence of the parameters. Each of the parameters are configured using HTMLParameters.

DashboardItem – NewsAll (10.10)

This method list all current newsitem in the repository, i.e. all wher the current date is between the release data and archive date specified on the NewsItem.

This method is similar to the NewsDesktop method, showing all news items and not only the subset related to a specific desktop.

DashboardItem – NewsDesktop (10.10)

This method list all current newsitem that are related to the specific desktop and where the current date is between the release data and archive date specified on the NewsItem. It is used on the desktops.

The parameters enable the user to create news related to the desktop.

DashboardItem – RASCI

This method shows a standard RASCI responsibility matrix derived from the digram and symbols on the diagram.

RASCI is a standard method where no other configuration is needed.

DashboardItem – Ratings

This method shows the ratings of the content.

Ratings is a standard method where no other configuration is needed.

DashboardItem – SpreadSheetView

This method links to a Spreadsheet and opens it in a maximum IFrame in the dashboard.

It is possible link to 1 spreadsheet with this method, if you what to have multiple Spreadsheets in a list, you should use the TableListView.

DashboardItem – QueryResultView

This method links to QueryResultView, and opens it in a maximum IFrame in the dashboard.

It is possible link to 1 HTMLQueryResultView with this method, if you what to have multiple HTMLQueryResultViews in a list, you should use the TableListView.

DashboardItem – QueryResultEmbedded (10.10)

This method shows the linked QueryResultView in the DashbordItem, so it is possible to have the QRV side by side with a diagram on a Dashboard.

DashboardItem – QueryResultEmbedded – Context (10.10)

This method shows a QueryResultEmbedded in a dashboard tile.

This method is context dependent, i.e. the QueryResultEmbedded is updated based upon what is selected (responsive).

DashboardItem – QuickSearch (10.10)

This method shows a QuickSearch tile on a Dashboard.

The Search parameters are specified via the HTMLParameter.

In the example above “*” has been inserted as search criteria for the templates, it is possible to configure the template list by inserting Template names, seperated with “,” to focus the search.

DashboardItem – TableListView

This method shows the linked content in a list.

It is possible to links multiple references and to different types of content, such as HTMLQueryResultView / Spreadsheets / HTMLFeatures / HTMLContentBoxes.

It is possible to group content in on or more HTMLContentBoxes.

DashboardItem – TableOverview

The TableOverView-method is used to display a list of objects based on a GenericQuery.

Example:

The tile is expandable and can contain more coloums when shown in “full” view (this is specified as part of the underlying Query).

It is set up in the following way:

The reference Link(s)-object is a generic query showing data about a collection of objects.

The parameter is HTMLParameter containing a mapping string. The mapping will only change the label shown on the web page.

Note the method is not context dependent, i.e. responsive based upon when is selected in the diagram, to get this functionality the TableOverView – Context should be used instead.

DashboardItem – TableOverview – Context

The TableOverView – Context-method is used to display a list of objects based on a GenericQuery.

Examples:

Graphical user interface, application Description automatically generated Graphical user interface, text, application Description automatically generated

It is set up in the following way:

Graphical user interface, text, application Description automatically generated

The reference Link(s)-object is a generic query showing data about a collection of objects.

The parameter is HTMLParameter containing a mapping string. The mapping will only change the label shown on the web page.

Graphical user interface, text, application, email Description automatically generated

If the HTMLParameter is empty the count of different templates will be hidden:

Example of empty parameter:

Graphical user interface, text, application, chat or text message Description automatically generated

Graphical user interface, application Description automatically generated

DashboardItem – Visualization

The Visualization method is used to display a link to one visualization, using the ModelVisualizer.

Note if you what to list multiple ModelVisualizations (and other links) in the same DashboardItem you should use the TableListView method.

DashboardItem – ExternalSource (10.10)

The Visualization method is used to display a link to an external source.

This can be e.g. an external web-page or a Power BI report.

Under reference target you can choose between different targets:

NewWindow – Opens the reference url in a new window
IFrame – Opens the reference url in an IFrame
IFrameOnMaximize – Link to the reference url and opens a maximized IFrame when clicked

DashboardItem – GovernanceHistory

This method shows the governance history of the content.

Governance History is a standard method where no other configuration is needed.

DashboardItem – AcknowledgeHistory

This method shows the AcknowledgeHistory of the content, using the Acknowledge List.

Acknowledge History is a standard method where no other configuration is needed.

Appendix

DashboardItem Icon Source Cheat Sheet

(Empty)	Ability	Approve
Capability	Change	Chart
Collaboration	Comment	Context
Cost	Cycle	Dashboard
Deleted	Edit	Feedback
Heatmap	Highlight	Image
Improvement	Information	Items
Link	List	People
Plan	Process	Query
Rating	Report	Risk
Score	Spreadsheet	Visualization

In QualiTube, you can find videos about how to configure the Dashboards

OrganizationMap:EDGY

Purpose: The purpose of the Organization Board is to set up team structures and group people together to realize the capabilities of the enterprise. It divides and organizes our work into roles and responsibilities.

Core concerns: An organization is a complex social structure. People form organizations to collaborate and co-create outcomes they cannot achieve alone without explicit agreements about membership, responsibilities and behavioral rules. Organizations are fractal: they are made up of nested structures (e.g. business unit-department-team) that have similar attributes on each level, such as purpose, goals, capabilities and hierarchy.

The Organization Board is a part of the EDGY language created by the Intersection Group.