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
  • 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>

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?