A directive is an HTML element made by Gtmhub to help make building insights a little easier. When using a directive it will give you advanced HTML features with just one line of code. There are five directives that one can use currently:

  • Assignee
  • Attainment
  • View objective list
  • Action
  • Confidence preview

Each one of them is described and explained below.

Assignee Directive

This directive is an inline block element with information about a given assignee (a person or a team) with its picture or team color and name.

It can be used only as an HTML element and accepts one attribute, which needs to be an assignee id. The id attribute is the identification number of a given assignee, which should be available in the various tables that use Gtmhub as a data-source such as AssigneeID in the GtmhubAssignees table. In case no assignee with the provided id is found in the database, or no id is passed to the directive, by default it will display Missing Owner.

Below you can find a simple example of how you can call the directive within your insight’s HTML:

<assignee id="{{data.id}}"></assignee>

Attainment Directive

This directive shows a progress bar that gauges the progress of a given OKR. The progress bar color depends on the value passed to the directive and the Color scale for OKRs progress setting. The latter is configured via the Configuration screen in the web application.

The directive can be used only as an HTML element and accepts only one attribute, called value. The value attribute must be a number. In case no value is passed, a default value of zero will be assigned to the directive and therefore used in the progress bar.

Below you can find a simple example of how you can call the directive within your insight’s HTML:

<attainment value="{{data.attainment}}"></attainment>

And below is an example of what you can use the Assignee and Attainment Directives for. Here we have a table using the Assignee Directive under the name column and the Attainment Directive being used on the progress column to the right.

View Objective List Directive

This directive shows a View list link that when clicked opens a table with information about objectives without progress, with one objective per row. The columns of that table are objective’s name, its owner (avatar and name), and its progress (progress bar and percentage value). You can also set the name of the table and send an email to all users of the listed objectives with a subject “OKRs without progress” and text “Please update” by clicking the Ask for an update button.

The directive can be used only as an HTML element and accepts two attributes - objectives and title. The objectives attribute accepts a list of objectives and titles . The list of objectives must contain name, assignee type, owner id, and attainment information for each of the objectives.

This directive makes use of the Assignee and Attainment Directives, described above.

Below you can find a simple example of how you can call the directive within your insight’s HTML:

<viewobjectivelist title="{{insight.title}}" objectives="objList"></viewobjectivelist>

Below is an example of what this directive looks like.

And once you click View List you will see.

Action Directive

This directive is meant to execute some action when the user triggers an event (e.g., clicks on a link, button, etc.). Currently, the only action available is to send an email when the user clicks a letter envelope. More actions and different UI will be added in the future.

The directive can be used as an HTML element and accepts two attributes - id and type. The id attribute is the identification number of an assignee, the same as above with the Assignee Directive. The type attribute should be the type of action that you’d like to perform - send-email is the only option currently supported .

If one or both of these attributes is not passed to the directive, no action will be performed when the user clicks on the letter envelope.

Below you can find a simple example of how you can call the directive within your insight’s HTML:

<action id="{{data.ownerid}}" type="send-email" ></action>

Below is an example how the directive looks.

Confidence Preview Directive

This directive is meant to show the confidence level of an objective or a key result as per the account’s confidence level configuration settings. You can use it to display any value in the format of your account’s confidence level settings (e.g., text, emoji, number and their styles).

The directive can be used only as an HTML element and accepts only one attribute - confidence-value. The confidence-value attribute is a numeric value, which indicates your confidence level. If no attribute is passed to the directive, nothing will be displayed.

Below you can find a simple example of how you can call the directive within your insight’s HTML:

<confidence-preview confidence-value="{{data.confidence}}"></confidence-preview>

And below is an example of how this directive would look.

Did this answer your question?