HTML Feature

The HTMLFeature is used to configure different settings in the Web-front end.

The template can be used to pre-defined features (such as the Smart Importer or PowerPoint Generator) and other advanced customized features (JSScripts).

A subset of the Features can be configured.

The following (configurable) feature types are available:

AskList (Create / Select / Update) (QualiWare 10.10)
Hashtag
ReferenceLink (QualiWare 10.10)
WebForm
WebModeler

In addition there is a Custom type that can be used to insert customised features.

Feature type – AskList (Create/Edit/View) (QualiWare 10.10)

There are 3 different types of AskLists features available, (used in the Getting Started Tile in the Desktop):

Create
Edit
View

All of them have the same configuration and behavior. When clicked on the web front end, an ask list will be shown

When a template is selected each of the types will have a different behavior:

Create will prompt a “Create New” dialog where the user can name the object

- When create is clicked the new object will open in the Web-Modeler (if it is a diagram) or in the editable Web-Dialog.

Edit, will open the selected object in “edit-mode”, i.e. the Web-Modeler (if it is a diagram) or in the Web-Dialog.

View, will open the selected object in the Web Front End (as configured in the HTMLTemplateDefinition), e.g. the corresponding Dashboard associated to the selected diagram.

The content (List of templates) in the Ask List is defined by the referene parameter in the Feature, using a HTMLParameter object.

The Ask List will contain the templates listed in Value field, and contain the title as defined in the string.

Feature type – Hashtag

This type enables the hashtag feature in the ContextMenu in the Repository Explorer, to work with hashtags related to the object.

Feature type – ReferenceLink (QualiWare 10.10)

The ReferenceLink is used to link to external references and include them as link in HTMLDashboardItems (used in the Getting Started Tile in the Desktop).

The item will link to the reference link in the object inserted in the Reference link field. This could be an ExternalDocument, where the link is inserted in the File Details.

Feature type – WebForm

The WebForm is used to create new object, e.g. as a part of a ContextMenu in the Repository Explorer.

The example above creates a new object (ChangeRequest) and link it to the existing object with the link “Concern”.

The WebForm can also be used as a part of a HTMLContentBox in a HTMLDashboardItem on a Dashboard.

The HTMLContentBox contains a HTMLFeature (WebForm) and a link to a HTMLQueryResultView.

The content box shown on the web front-end as a part of a DashboardItem (example from the EDGY Enterprise Desktop).

Feature type – WebModeler

This type is used in the Repository Explorer in the ContextMenu to open the diagram in the webmodeler.

HTML Parameter

The HTMLParameter is used to specify parameters in relations to various HTML settings:

In relation HTMLDashboardItem, when configuring the highlight feature.

In the example below the style of the objects (in the underlying highlight query) is specified, a long with the opacity of the complentery object, i.e. the objects not included in the underlying query.

In the example below the style of the objects (in the underlying highlight query) is specified, a long with the legend and position of the legend. The parameter {} are refering to parameters in the underlying query.

The parameter shown above is related to the Multiple highlight functionality that was introduced in QualiWare 10.9.

In relation HTMLDashboardItem, when configuring the QuickSearch method.

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, e.g.

templates: ‘BusinessProcessNetwork,BusinessProcess,Activity,ExternalDocument,WorkflowDiagram’,

The parameter shown above is related to the QuickSearch Method that was introduced in QualiWare 10.10.

In relation HTMLFeature, e.g. when configuring the content of an AskLists, containing the available templates in an “Create”, “Edit” or “View” list as a part of the Getting Started tiles.

PropertySheet

QualiWare 10.10 introduces a new propertysheet template, that enables to get a spreadsheet view of:

default properties for an object
a set of properties for an object for multiple:
- Configurations
- Languages
- Revisions

This enables the user to easily explore and modify properties of different variants of the same objects.

The behavior of the propertysheet can be selected from the list under code behaviour.

On the Settings tab it is possible to right click in the window and “Add standard parameters”.

As a part of these settings, it is possible to specify the behavior of the spreadsheet.

In the setting you can specify how many colums should be included in the spreadsheet. If more revisions are available the sheet will show the following coloum:

Property
First revision
Latest X revisions (e.g in the case of 5, the 3 latest will be shown, along the first revision 0).

Business Gauge

Gauges are a form of charts that can be used to in the web solution.

When used in relation to a contextbox with a checklist they aggregate based upon the checked selection.

Business Gauges can be used in the center top content of the HTMLTemplateDefinition.

Concerns: Here you link to an object of the type which data you would like to display (in the example above an InformationSystem)

Value:

For the gauge chart to display anything, it needs some values. Values are provided by either using URL parameters or by setting up a checklist in a HTMLContentBox left or right panel. When using a checklist, the attributes, defined in Value, will be taken from the selected objects and used in the gauge chart.

Prompt: The prompt that explains to the user, what this value means.
Attribute: The attribute to take a value from.
Color: The color of the value. It will be used in the legend next to the prompt, and also in the chart. Colors should be defined in hexadecimal.
Shape: The shape of how the value is shown in the chart. Shape does not have any meaning for a radial gauge chart as all values will be shown as arrows.
For horizontal and vertical gauge charts, the following options apply:
- bar – shows the value as a bar in the chart.
- arrow – shows the value as a small arrow along the axis in the chart.
Margin: Margin does not have any meaning for a radial gauge chart and for arrow shapes in horizontal and vertical gauge charts.
For bar shapes in horizontal and vertical gauge charts, margins can be used to place the bars next to each other.
If no margin is used, then the bars will be placed on top of each other which will make it difficult for users to easily read the values.
Tip: Use a margin divisible by 7 to space the bars evenly.

Settings:

Title: The title will be shown in the top of the gauge chart on web.

Type:

Vertical:

Horizontal:

Radial:

Miscellaneous display settings:
These are a mix of settings that each has an impact on how the final chart is displayed.

Height: Height in pixels of the gauge chart without the legend.
Width: Width in pixels of the gauge chart without the legend.
Start angle: Only applicable to radial gauge chart.
The starting angle of the chart.
End angle: Only applicable to radial gauge chart.
The ending angle of the chart.
Minor unit: The minor unit of the chart shown with a small line.
Major unit: The major unit of the chart shown with a bigger line than minor unit.
min: The minimum value of the chart.
max: The maximum value of the chart.

Ranges:

Ranges can be used to define if a range should be shown in a specific color. This can be used to enable a user to quickly see if any values are outside of normal values or in other ways concerning.

From: The value at which the color should start.
It is accepted that the From value is the same as another range’s To value.
To: The value at which the color should end. It is accepted that the To value is the same as another range’s From value.
Color: The color of the range in hexadecimal.

HTML Desktop

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

THe HTMLDesktops are inserted in the HTMLPublisher on the Personal Page tab to create a collection of available desktops in the platform.

Desktop with HTMLTiles

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.

Dashboard-UI for Desktop (version 10.10)

The HTMLDesktop is also used in version 10.10 to configure the Journey based Desktops. To achieve this the HTMLDesktop should only contain HTMLDashboards (you can insert one or more dashboards on a desktop, to enable multiple layouts, e.g. made different dashboards for different roles)

Note that to enable the desktop functionality, introduced in QualiWare 10.10, the HTMLDesktop must only contain HTMLDashboard(s). If HTMLTiles are included in a HTMLDesktop, the behaviour of the desktop will change and the desktop will not be included in the list of available 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:
- Box in a box: used to create diagrams where objects on the same row are placed inside each other, e.g. Business Capability Models and Requirement Models (see example below)
- Swimlane: used to create Workflow Diagrams and Business Process Diagrams (see example above)
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 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 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.
Role filer: possibility to set a filter for which role(s) the dashboard should be available (see more about roles here)
Configuration filter: filter for what configuration the dashboard 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

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 repository explorer on 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.