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.

Cloud Architecture Diagram

The QLM user creates a new “CloudArchitectureDiagram” the same way as for any other diagram he/she is used with. Then by opening this diagram for the first time, the user is asked to associate it to the Cloud Provider as on the figure below.

Une image contenant texte Description générée automatiquement

Adding a “CloudGrouping”

As for any symbol, the CloudGrouping Symbol defaults to a base provider’s symbol, then its appearance is aligned with the qualification of this grouping (called “GroupingCategory”).

First the user places a grouping default symbol as on the figure below:

Graphical user interface Description automatically generated

Then the user opens the newly placed GloudGrouping and qualifies it to the appropriate Grouping Category, by selecting within the list of Azure Cloud Grouping Categories, as on the figure below:

Graphical user interface Description automatically generated

Applying the change or saving the changed description of the Cloud Grouping (pressing OK) changes the appearance of the CloudGrouping symbol according to the selected category.

Adding a Cloud Service

When adding and qualifying a Cloud Service, hence defining its appearance, the user will be driven by the meta-model to qualify the service.

First the user selects the “Cloud Service” symbol in the symbol’s palette and places it in the diagram page and gives it a name, as shown on the figure below:

Graphical user interface, application Description automatically generated

The user is asked for defining the Cloud Category of this Cloud Service, as shown in the figure below:

Une image contenant texte Description générée automatiquement

The user selects the appropriate Cloud Category.

Then the user is asked for defining the Instance Type of this Cloud Service based on the selected Cloud Category, as shown in the figure below:

Graphical user interface, application Description automatically generated

The user selects the appropriate Instance Type.

Then the user is asked for defining the Resource Type (if any for this Instance Type) of this Cloud Service based on the selected Instance Type (if none, the user clicks OK), as shown in the figure below:

Graphical user interface, text, application Description automatically generated

The user selects the appropriate Resource Type (if any), then press OK.

The Cloud Service gets its appropriate appearance based on the selected category, instance type and resource type (if any), as shown in the figure below:

Graphical user interface, application Description automatically generated

Relating a Cloud Grouping with Enterprise Architecture elements

Cloud Groupings can be related with specific types of elements of the Enterprise Architectures, as shown in the figure below:

Location
Organization
Zone

The selected element will be inserted in the Relates to field of the previously selected CloudGrouping

Graphical user interface, application Description automatically generated

Relating a Cloud Service with Enterprise Architecture elements

Cloud Services can be related with specific types of elements of the Enterprise Architecture as shown in the figure below:

ComputerService
Computer
Database
DataWarehouse
Equipment
Firewall
InformationSystem
Network
Software
Technology
TechnologyComponent

Graphical user interface, application Description automatically generated

Facilitating analysis and reporting

Diagrams show the relationships between Cloud Services and Cloud Groupings (Services within Groupings and reverse), but it is useful to get this knowledge from the repository without browsing the diagrams and use it within reports.

That’s the reason, the “Cloud Grouping” and the “Cloud Service” templates manage and show these relationships which are computed at close of the diagram combining cloud groupings and cloud services, and at time of opening either a Cloud Grouping instance or a Cloud Service Instance. As these relationships are computed, they are not editable: the user cannot add nor delete such relationships shown in the “Cloud Grouping” and “Cloud Service” templates.

Services contained in a Cloud Grouping

Graphical user interface, application Description automatically generated

Cloud Services grouped within the “Availability zone” Cloud Grouping.

Cloud Groupings containing a given Cloud Service

Graphical user interface, application Description automatically generated

Cloud Groupings containing this Cloud Service instance.

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

OrganizationMap:EDGY

Purpose: The purpose of the Organization Board is to set up team structures and group people together to realize the capabilities of the enterprise. It divides and organizes our work into roles and responsibilities.

Core concerns: An organization is a complex social structure. People form organizations to collaborate and co-create outcomes they cannot achieve alone without explicit agreements about membership, responsibilities and behavioral rules. Organizations are fractal: they are made up of nested structures (e.g. business unit-department-team) that have similar attributes on each level, such as purpose, goals, capabilities and hierarchy.

The Organization Board is a part of the EDGY language created by the Intersection Group.

HTML Model Generator Settings

HTML Dashboard

Configuration of Dashboards

HTML Dashboard Item

Example: Custom Image on a DashboardItem

DashboardItem – ContextInfo

DashboardItem – ObjectLink

DashboardItem – RASCI

DashboardItem – TableOverview – Context

DashboardItem – HierarchyView

Appendix

DashboardItem Icon Source Cheat Sheet

OrganizationMap:EDGY

Story:EDGY

Purpose:EDGY

People:EDGY

Object:EDGY

Outcome:EDGY