HTML Dashboard

The HTML Dashboard template is used to configure the dashboards introduced in 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:

Diagram Description automatically generated with medium confidence

The Dashboard-template contains a collection of DashBoardItems-templates.

Graphical user interface, text Description automatically generated

Furthermore, the Dashboard contains a Settings tab where the Dashboard can be adjusted.

Graphical user interface Description automatically generated

Each DashBoardItems contain 2 tabs relevant for configuring their behaviour.

HTMLDashboard tab:

Graphical user interface Description automatically generated

… And Custom Configuration

Graphical user interface, application Description automatically generated

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.

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

Graphical user interface Description automatically generated

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 – ContextInfo

Using the ContexInfo-method will display information about the 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

DashboardItem – ObjectLink

Using the ObjectLink will open the object directly.

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

Graphical user interface Description automatically generated

DashboardItem – RASCI

RASCI is not configurable.

Example of RASCI:

Graphical user interface, text, application Description automatically generated

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 – 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.

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

HTML Template Definition

The HTML template definition defines the behavior and “look and feel” of a specific template-type.

In QualiWare 10.8 a new Dashboard layout has been introduced. You can create one or multiple dashboard(s) for a diagram template-type. The dashboard(s) are associated on the Dashboard Tab:

The Dashboard are configured using the templates:

The “Left”, “Center” and “Right” tabs specifies the content on the diagram workspace, shown on the example below.

The left window (1) of a diagram workspace is configured on the Left tab:

The Center tabs (2) of a diagram workspace in configured on the Center tab:

The right window (3) of a diagram workspace is configured on the Right tab:

Once you have made changes to the template, you should click “Apply” and “Publish” to implement the changes on the Web.

The HTMLTemplateDefinitions are included in the HTMLPublisher.

HTML Mega Menu Item

The HTML Mega Menu Items are used to compose a HTMLMegaMenu.

The Mega Menu is composed of 3 levels. Each level is a HTMLMegaMenuItem.

HTMLMegaMenuItems on the top level can be associated with an Image.

It is possible to define role access on each of the HTMLMegaMenuItems.

Right click the role window to add a role:

The available roles are specified in the Repository Administrator.

As can be seen in the selection box above, it is possible to select between two instances for each available role in the repository. The first “:” means that menu item will be visible/accessible in the menu if the user has access to the role. The second “=” means that the menu item is visible/accessible when the user has selected the role.

Menu Items on the lowest can be associated to all kind of items such as HTMLQueries, Spreadsheets, Diagrams, etc.

It is also possisble to link a HTMLMegaMenuItem to an URL:

Acknowledge List

The Acknowledge list function enables you to keep track of and document which of your employees have read which relevant documentation.

An acknowledge list is used to select a group of people who must digitally acknowledge that they have read or studied specific sets of documentation. This can for example be a diagram, a document, or a set of regulations. An acknowledge list can be a one to one or a many to many relationships between objects and people. This means that you can have several people, InterestGroups, OrganizationalUnits or several objects listed in the same acknowledge list.

Once a user is assigned to acknowledge an object, the user will get a govenance task, and an “Acknowledge” action-button is shown in relation to e.g. the Diagram:

The Acknowledge history can be seen on the “Acknowledge History” tab:

A user can access their ackowledge task(s) via their “My task” action button in the top right

And from their “To Do list” from the desktop.

Dialog Layout

Purpose: The purpose of the Dialog Layout template is to provide a representation of a dialog design for the system developed in the Dialog Model.

Core concerns: The Dialog Layout template enables you to model Windows, Fields, Menu Layouts and General Concepts.

Relation to other templates: The Dialog Layout is a QualiWare system template and is related to the Dialog Model, Menu Layout, Report Layout and Help Model.

Properties and metadata: The Dialog Layout template can for example retain the following information:

A description of the diagram
A link to Epilog and Prolog
Audits (auto generated information regarding its current state and access rights)
Associated documents, diagrams and other objects
Inherent Risk detailing risk considerations
Governance information detailing information about the published model and who has been involved in the approval of the layout

The above picture shows the properties dialogue window for the Dialog Layout template where you can view and edit the model’s properties in QualiWare Lifecycle Manager.

Dialog Model

Purpose: The purpose of the Dialog Model is to enable the creation of customized applications for your QualiWare solution that, for example, can generate codes for the Data Model Diagram.

Core concerns: The Dialog Model template enables you to model Dialog Layout, Menu Layout, Report Layout, Help Model and Application Specifiers. These elements can be associated through Connections.

Relation to other templates: The Dialog Model is a QualiWare system template and is related to the Dialog Layout, Menu Layout, Report Layout and Help Model.

Properties and metadata: The Dialog Model template can for example retain the following information:

A description of the diagram
Audits (auto generated information regarding its current state and access rights)
Associated documents, diagrams and other objects
Inherent Risk detailing risk considerations
Governance information detailing information about the published model and who has been involved in the approval of it.

The above picture shows the properties dialogue window for the Dialog Model template where you can view and edit the template’s properties in QualiWare Lifecycle Manager.

Governance Workflow

Purpose: The purpose of the Governance Workflow template is to enable tailored governance solutions for the objects in your repository.

Core concerns: The Governance Workflow template enables you to model Governance Roles and Governance States. The Governance States are placed inside a Governance Role (just like a workflow diagram) and are connected by Governance Transitions, Governance Conditional Messages, and Governance Event Messages.

Below, you can see an example of a Governance Workflow:

The green arrows symbolize a Governance Transition towards the approval of an object while the red arrows symbolize a Governance Transition towards the development state of an object. The blue arrows are Governance Conditional Messages. While the broad, dark green arrows are the preferred Governance Transition, the lighter green colored arrows are alternate routes to the approved state.

Relation to other templates: The Governance Workflow template is a template that can be applied to any of the published objects or diagrams in the repository.

Properties and metadata: The Governance Workflow template can for example retain the following information:

A description of the workflow
Link to the owner of the Governance Master Role (the master role gives “governance-access” to all objects in scope for the governance flow)

Further details can be added under the different tabs such as email settings (needs to be set up i the QEF console in order to available)

Under “Detail” you select the templates that should be governed by the flow (highlighted below):

Once you have made any changes to a flow, you need to execute maintenance to make the changes take effect to existing objects in the repository, and update participants

Click the 3 buttons one at a time to synchronize

Help Model

Purpose: The purpose of the Help Model is to provide the structure of a help system for the system developed in the Dialog Model.

Core concerns: The Help Model template enables you to model Help Items and attach them to each other using connections.

Relation to other templates: The Help Model is a QualiWare system template and is related to the Dialog Model, Dialog Layout, Menu Layout and Report Layout.

Properties and metadata: The Help Model template can for example retain the following information:

A description of the diagram
Audits (auto generated information regarding its current state and access rights)
Associated documents, diagrams and other objects
Inherent Risk detailing risk considerations
Governance information detailing information about the published model and who has been involved in the approval of it.

The above picture shows the properties dialogue window for the Help Model template, where you can view and edit the model’s properties in QualiWare Lifecycle Manager.

HTML Dialog Layout

Purpose: The purpose of the HTML Dialog Layout template is to enable the organization to tailor the objects Dialog Layout on the collaboration platform.

Core concerns: The HTML Dialog Layout template enables you to model HTML Dialog Layout, HTML Dialog Fields, HTML Dialog Groups and HTML Dialog Text. Using these elements, you can design the content of your dialogs. Below you can see an example of a Dialog Layout for a Business Process Network:

Relation to other templates: The HTML Dialog Layout template is, like the other HTML templates, a tool for creating a fully tailored collaboration platform that meet the needs of the specific organization. As such it is related to HTML Mega Menu, Generic Query and Query Design.

Properties and metadata: The HTML Dialog Layout template can for example retain the following information:

A description
Audits (auto generated information regarding its current state)
Access rights (such as linking to roles with read/write rights)
Layout (such as dialog title and colors)
Sub-dialogs (shown as additional tabs in the dialog)

The above picture shows the properties dialogue window for the HTML Dialog Layout template, where you can view and edit the diagram’s properties in QualiWare Lifecycle Manager.