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.

Report Definition

Report definition is used to generate reports for e.g. a diagram type, and make them available on the web.

There is a set of standard reports included in the standard configuration, click here to see more about the standard reports.

Reports are designed via the template ReportDefinition.

Reports are always generated dynamically based on the content where they are executed. For example, if you click on the report button on a diagram, it will use the objects and their information contained on the diagram. To make this possible it is necessary to define what variables the ReportDefinition should gather and where it should place them in the report.

Designing a report consists of four stages: Designing the queries, arranging the attributes in the main report, designing sub-reports and finally applying advanced formatting.

  1. In the design phase it is necessary to structure the data for the report. This is done via SQL. To remove the need of learning SQL QualiWare has introduced a Query Designer that helps users build SQL scripts and tables automatically based on a graphical diagram.
  2. The queries are then used as input for the ReportDefinition where the individual attributes can be re-arranged graphically.
  3. When designing a Query that needs to read the attributes of objects that are referenced in a multi-link field it is necessary to create sub-queries and sub-reports. Sub-reports gather and organize the attributes for the underlying objects and then are themselves inserted into the main report, just like the other attributes.
  4. When the data has been defined, organized and arranged in the report it is necessary to apply advanced formatting to the report for aesthetic reasons.

See this detailed guide for more.

Once created the report can be added to the relevant template in the Template Definition, to make them available on the web, via the “Print icon” in the Toolbar.

Model Presentation

The ModelPresentation is an attempt to make it easier for the end-user to understand the meaning of the model when viewing it on the Web.

The ModelPresentation consists of a series of models or model parts shown in a sequence on the web. The sequence may include pictures, sound, video or text to explain the view of the model.

From the main settings, you can configure the scope of the presentation:

  • Relevant for:
    • Here you map the model that is subject to the presentation
  • Content Selection:
    • Here you select the content of the presentation (All revisions, Revisions across configurations, All language variants, Custom selection, Walkthrough)

Once the ModelPresentation is created and associated with e.g. a diagram in the “Relevant for”, the presentation becomes available on the web, as a tab in the classic view.

The presentation gives the user a standard set of “video control buttons”, so it is possible to jump forward, backward, stop the automatic sequencing of pictures and so on.

This example shows a definition of a ModelPresentation that fades through the all revisions of the BusinessProcessNetwork.

The custom selection is a selection of diffrent models, which can be shown in the model presententer in relation to content selected in the “Relevant for”:

Another example of a ModelPresentation is the illustrated walkthrough of a diagram. Here it is a CustomerJourneyMap that shows the journey of a persona interacting with our enterprise. Each interaction is illustrated by a TouchPoint, and the ModelPresentation includes real life explanation, photos, etc. to illustrate the journey.

As illustrated in the example above with the customer journey, it is possible to show pictures and video associated to the object.

You can specify what attributes should be shown where in the “Attributes” tab.

You specify the layout of the presenter on the “Layout” tab.