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:

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

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

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

Each DashBoardItems contain 2 tabs relevant for configuring their behaviour.

HTMLDashboard tab:

… And Custom Configuration

Configuration of Dashboards

The Dashboard Setting tab contains the setting following table:

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:

When false, items “fall upwards” and stack:

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:

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.

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

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.

DashboardItem – ContextInfo

Using the ContexInfo-method will display information about the object.

It is set up in the following way:

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

DashboardItem – ObjectLink

Using the ObjectLink will open the object directly.

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

DashboardItem – RASCI

RASCI is not configurable.

Example of RASCI:

DashboardItem – TableOverview – Context

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

Examples:

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.

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

Example of empty parameter:

DashboardItem – HierarchyView

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

Example:

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 how and what information is displayed on the web for each 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 classic diagram workspace, shown on the example below.

The left window (1) of a diagram workspace is configured on the Left tab, using HTMLContentBox and other HTML-templates:

The Center tabs (2) of a diagram workspace in configured on the Center tab, using HTMLContentTab and other HTML-templates :

The right window (3) of a diagram workspace is configured on the Right tab, using HTMLContentBox and other HTML-templates :

On the Analytics tab, you can configure which “Social Behavior Warehouse” tabs should be available on the model.

The Behavior tab, specifies the behavior of a template, e.g. how should a link to an object of the template behave when clicked.

Target: This is how the link will open when clicked.

Self: This will open the object page in the same browser window.
New Window: This will open the object page in a new browser window or tab depending on the browser setup.
IFrame: This will open the object in an iFrame pop-up window using the Popup Settings configuration.
FancyBox: This will open the object in a Fancybox pop-up window using the Popup Settings configuration.

Title: This specifies what should be shown as the title of the object being shown.

Page header: The header of the page or popup window of the object. This can be static or dynamic text. Dynamic text is indicated by curly braces and will be evaluated client side in JavaScript.

Popup settings:

Width: The width of the popup window.
Height: The height of the popup window.
Popup content: A list of HTMLContentTables or HTMLContentTabs contains information about what is shown in the popup window. If nothing is specified here, the HTMLPublisher will use the information specified in the Center tab of the template definition.

JumpOnLink: JumpOnLink functionality can be used to forward the user if certain criteria are met. This is typically used when e.g. a BusinessProcess can be broken down in to subprocesses. It allows the user to jump directly to one of the subprocesses without having to open the properties of the BusinessProcess first.

Attribute(s): This is an attribute that is part of the object that this template definition is for. When the user clicks on the object, this attribute will be used to calculate where the user is taken to on click.
- If the attribute contains exactly one link then the user will be taken to the target of that link when clicking the object.
- If the attribute contains more than one link, then jumping is disabled.
- If more than one jump attribute is defined, then the whole set of resulting links are evaluated. If only one link is available in the set, then jumping happens. If more than one link is available in the set, then jumping is disabled.
- E.g. BusinessProcess can be set up to jump on BreaksDownTo. When the user clicks a BusinessProcess the user will be redirected to the link in the BreaksDownTo attribute (if only one link is available).
And attribute(s) is empty:
- If the specified attribute is not empty the JumpOnLink functionality will be ignored. The attribute specified here should be different than the attribute for JumpOnLink.
- E.g. BusinessProcess can be set up to jump on BreaksDownTo when ShortDescription is empty. If ShortDescription has content then the BusinessProcess will follow the behavior specified in Target settings.

Tooltip settings: The tooltip is used to display information about the object when a user hovers the object link.

Example of a BusinessProcessNetwork tooltip appearing when a BusinessProcessNetwork is hovered on the web.

Enable: Enable or disable the tooltip feature.
Title (attribute): The attribute that should displayed at the top of the tooltip.
Width: The width of the tooltip window.
Tooltip content: A list of attributes to be displayed in the tooltip window.

App settings:

App content: This specified what should be shown in the app. It links to a HTMLContentTable.
- If nothing is specified for the template then the app will look for the settings for DefaultDiagram/DefaultObject template definitions and use those.
- If nothing is specified on the template definition for the template or for DefaultDiagram/DefaultObject the all attributes are shown.

OnClick

Execute javascript: This can be used to execute a JavaScript function when the object is clicked.

On the Smart Capture tab, you can link Model Generator Settings to the template definition. The settings are used for the table to model feature in the web-modeler (introduced in QualiWare 10.8).

Table-to-model

Inherit default settings: Tick the box to inherit the settings from the Smart Capture Settings on the HTMLPublisher
Model generator settings: Insert specific HTMLModelGeneratorSettings to the template definition

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, when a new revision of the object is approved. Note as standard the object should be part of the standard “Change Management” governance workflow and the object state, and the Acknowledge is shown when the object is in “Approved” state (read more about the governance workflows here).

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.

The access tab is used to specify which dialog description to use for any situation.

Roles with Read-Write: Role is used in the calculations of which HTMLDialogLayout is used when user triggers an action requiring a webform.
Customizations: Customization is used in the calculations of which HTMLDialogLayout is used when user triggers an action requiring a webform.

It is possible to set up multiple customization if needed.

From QualiWare 10.5 it is possible to have two versions of a form to edit objects from the web, a Simple and an Advanced form. If you specify the simple form, the advanced form will automatically be generated. The “advanced” form that has the full metamodel for our object (all tabs and all attributes). (see more details in the release note for QualiWare 10.5).