HTML Desktop

The HTMLdesktop-template is used to configure the content shown on a desktop on the collaboration platform on the web.

The content on a desktop is composed of HTMLTiles, and it is possible to specify filters for role and configuration.

The HTMLdesktop(s) are published to the web via the HTMLPublisher when they are included on the “Personal Page” tab (see below).  It is also in the publisher where it is possible to set filters for role and configuration for the desktops.

HTML Model Generator Settings

The HTML Model Generator Settings template is used to configure the table to model feature introduced in the web-modeler in QualiWare 10.8.

In the HTML Model Generator Settings you can configure the table-to-model settings and make them available for selected diagrams in the web-modeler.

  • Settings target: default value is “Table-to-Model”
  • Visual name: The text inserted here will be visual in the web-modeler
  • In Diagram type field, you can select between different Diagram types:
  • Use for templates: Here you select in which template(s) the Model Generator Settings should be available under “Import from Table” in the web-model
  • Setting content: Here you define the:
    • Column: Column Headers in the table in the web-modeler,
    • Default template: The template type of the inserted object
    • Change template:
      • false: the template type is locked and cannot be changed by the user
      • true: the template type can be changed, and an additional column is inserted right to the Column, where the user can change between the available template types defined by the underlying metamodel for the diagram type.

Below is an example of where Box in a Box is selected as Diagram type:

Below is an example of how the “Box in a box” settings works in the web-modeler for the Business Capability Model diagram:

In order to be able to access and generate models in the WebModeler, the HTMLModelGeneratorSettings objects needs to added to the HTMLPublisher and/or to the HTMLTemplateDefinition for the specific diagram Template.

The Model Generator Settings is setup through the HTMLPublisher’s Smart Capture Settings tab:

You can insert the HTMLModelGeneratorSettings in the HTMLTemplateDefinition for the specific diagram on the Smart Capture tab (or select the “Inherit default settings” to inherit from the HTMLPublisher.

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) A picture containing text, screenshot Description automatically generated Ability Diagram Description automatically generated with low confidence Approve Icon Description automatically generated
Capability Chart, scatter chart Description automatically generated Change A picture containing icon Description automatically generated Chart A picture containing writing implement Description automatically generated
Collaboration Icon Description automatically generated Comment Icon Description automatically generated Context Chart Description automatically generated
Cost A picture containing toy, vector graphics Description automatically generated Cycle Icon Description automatically generated with medium confidence Dashboard A picture containing text, electronics, display, screenshot Description automatically generated
Deleted Icon Description automatically generated Edit Icon Description automatically generated Feedback Icon Description automatically generated
Heatmap A close-up of a smart phone Description automatically generated with medium confidence Highlight Box and whisker chart Description automatically generated with low confidence Image A picture containing icon Description automatically generated
Improvement Icon Description automatically generated Information A picture containing application Description automatically generated Items Icon Description automatically generated
Link Icon Description automatically generated List A picture containing tool, screenshot Description automatically generated People Chart, icon, bubble chart Description automatically generated
Plan Icon Description automatically generated Process A picture containing funnel chart Description automatically generated Query Icon Description automatically generated
Rating A picture containing text Description automatically generated Report Chart, funnel chart Description automatically generated Risk Icon Description automatically generated
Score Chart Description automatically generated Spreadsheet Shape Description automatically generated Visualization Chart, scatter chart Description automatically generated

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

HTML Visualizer Filter

The HTMLVisualizerFilter template is used to create customized filter(s) to use in the 3D Visualizer on the web.

Click “Add Templates” to select the templates to be included in the filter.

Click “Add Relation” to insert the relation to be included in the filter.

Once a HTMLVisualizerFilter is created it becomes available in the Explore and Local Explore menu.

HTML Context Menu

The HTMLContextMenu template is for designing context menus for the web.
(relevant from version 10.2, and enhanced in version 10.3)

The symbols available for HTMLContextMenu are:
HTMLContextMenuItem

The graphical part of HTMLContextMenu is only used to define context menus; it is not used for displaying to the user. The HTMLContextMenuItems on the HTMLContextMenu are defining when and where context menus are available to the user.

Example of HTMLContextMenu:

A default context menu can be defined in the HTMLPublisher. The default context menu will be applied to objects of all templates unless specific context menu is defined on the HTMLTemplateDefinition for the template. If the default context menu is left empty then only templates with a context menu defined will get a context menu.

A default context menu defined on the HTMLPublisher:

A template specific context menu is defined on the template definition for that template:

To activate the changes in context menu setup press publish in the HTMLPublisher.

Context menu and Governance Workflow Engine
Objects governed by a GovernanceWorkflow will get an extra context menu item. The item is called Governance and is added as the last item of the context menu. It contains the possible transitions available for the object.

 

HTML Context Menu Item

Settings for the HTMLContextMenuItem
(relevant from version 10.2)

HTMLContextMenuItem sample:

Context menu item
List of items to who in the context menu

Menu Image:
Not supported

Role access
General role access for all items in the context menu.

Context menu items

The context menu supports GovernanceStateFeature and HTMLContextMenuItem. Adding a GovernanceStateFeature means adding an action to the context menu. Adding a HTMLContextMenuItem will create a sub menu in the context menu.

Context

  • The context defines where the context menu should be activated from. HyperLink means the menu will be available on objects in the repository explorer. Template means the context menu will be available when a template name is shown in the treeview part of the repository explorer. (Toolbar is not supported)

Role

  • Ability to select role-based access to the menu item.

Condition

  • Additional condition for showing the menu item. E.g. Template == RepositoryFolder

Sample list of context menu items containing one sub menu and several items with conditions set:

Settings tab on HTMLContextMenuItem

The settings defined on this tab will apply to the whole context menu. If a HTMLContextMenuItem is used as a sub menu, then only Visual name is used.

Visual name

  • Used to define the display name when used as a sub menu

Active on

  • Currently only Left Click is supported

Icon on web

  • Not used here.

Target

  • Only Dropdown supported.

Spreadsheet

The Spreadsheet template allows you to easily to review, edit and aggregate collections of data from across the repository from one window.

With the new dynamic spreadsheet, editing content from the web has never been easier.

Read more about the Spreadsheet functionality here.

Repository Folder

Folders offer access to specific groupings of objects, making objects easily accessible to the relevant stakeholders. The template name for folders in QualiWare is “RepositoryFolder”.

RepositoryFolders can be created in QLM and in the Repository Explorer from the web:

On the RepositoryFolder tab you can add a short description and create a hierarchy by including additional repository folder(s) in the folder.

If “Folder is a root folder” is selected the folder becomes available in the folder selection in QLM.

On the Advanced tab you can specify which tag(s) should be included/excluded, and set additional search conditions:

On the Objects tab you can include all objects of one of more template(s) as well as include specific object(s):

On the Visibility tab you can specify who can access the repository folder from the web.

A repository folder can also be available from the web in the repository explorer.

The Repository Explorer is configured in the HTMLPublisher in QLM, where folders can be added:

Read more about folders and hashtags here