Overview

In Gtmhub, a directive is an HTML element that helps you build insights. When you use a directive in the HTML of an insight, you have access to the advanced HTML features with one line of code.

You can use the following directives:

  • Assignee

  • Attainment

  • Avatars

  • View objective list

  • Action

  • Confidence preview


Assignee directive

This directive is an inline block element with information about a particular owner - a person or a team. It displays the avatar and the name.

Attributes: The directive is used as an HTML element and accepts one attribute - the assignee id.

The id attribute is the identification number of a given owner. It is available in Gtmhub data source in the GtmhubAssignees table.

If no assignee with the provided id is found in the database or no id is passed to the directive, it displays Missing owner.

EXAMPLE: Use the following sample:

<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 configuration of the OKR progress.
For more information, see Configure the color scale for OKRs progress.

Attributes: The directive is used as an HTML element and accepts one attribute - value.

The value attribute must be a number. If no value is passed, a default value of zero is assigned to the directive and used in the progress bar.

EXAMPLE: Use the following sample:

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

Avatars directive

This directive reads an the array of IDs specified in the "ids" property, then replaces them with the necessary HTML elements for the assignees in the list.

If the array of IDs contains more assignees than the number specified in the "preview-number" attribute, the last icon is replaced with "+n", where n indicates the number of remaining IDs. When a user hovers over the "+n" option, remaining users/teams will be shown in a tool-tip.

Attributes: The directive is used as an HTML element and accepts attributes – size and ids, and preview-number.

The size attribute is a numeric value, which indicates the size of the icons in px. Options available out of the box are s-20, s-22, s-24, s-26, s-32, s-40, and s-70.

The ids attribute is a comma separated list of assignee ids which should be displayed by the directive.

The preview-number attribute is a numeric value, which indicates how many icons you wish to display.

EXAMPLE: Use the following sample:

<avatars size="s-20" ids="data.ownerids" preview-number="3"></avatars>

ViewObjectiveList directive

This directive shows a View list link that, when clicked, opens a table with information about objectives without progress. The columns of that table are the objective’s name, its owner with avatar, and its progress bar and percentage value.

You can also name the table and send an email to all users of the listed objectives, by clicking Ask for an update. The email has subject OKRs without progress and text Please update.

Attributes: The directive is used as an HTML element and accepts attributes – title and objectives.

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.

EXAMPLE: Use the following sample:

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

Action directive

This directive sends an email when the user triggers an event, such as clicking a link or a button.

Attributes: The directive is used as an HTML element and accepts one - id and type.

The id attribute is the identification number of the assignee. The type attribute is set to to send-email.

If one or both attributes is not passed to the directive, no action is executed when the user clicks the envelope.

EXAMPLE: Use the following sample:

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

ConfidencePreview directive

This directive shows the confidence level of a key result. The confidence level labels depend on the account setup. For more information, see Configure confidence level labels.

Attributes: The directive is used as an HTML element and accepts 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 is displayed.

EXAMPLE: Use the following sample:

<confidence-preview confidence-value="{{data.confidence}}"></confidence-preview>
Did this answer your question?