Quantive Results' insights use Angular components so you can quickly build out insights. When you use a component in the HTML of an insight, you have access to the advanced HTML features with one line of code.
​

You can use the following components:

This component 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 component 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 Quantive Results data source in the quantiveresultsassignees table.

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

EXAMPLE: Use the following sample:

This component shows a progress bar that gauges the progress of a given OKR. The progress bar color depends on the value passed to the component and the color configuration of the OKR progress.
For more information, see Configure the color scale for OKRs progress.

Attributes: The component 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 component and used in the progress bar.

EXAMPLE: Use the following sample:

This component 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 component 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 component .

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

EXAMPLE: Use the following sample:

This component 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 component 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:

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

Attributes: The component 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 component, no action is executed when the user clicks the envelope.

EXAMPLE: Use the following sample:

This component 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 component 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 component, nothing is displayed.

EXAMPLE: Use the following sample:

This component displays a standard image and text indicating that no data was found. It is intended to be used with the SQL for an insight returns no results.

Attributes: There are three optional attributes to control the text on the display:

title is the bold test directly below the image

subtext is the smaller text under the title

hideicon will hide the icon if set to "true"

EXAMPLE: Use the following sample:

Default sample:

Sample with custom text:

These snippets of code allows users to quickly identify the focus of the area they are viewing.

Objective icon

EXAMPLE: Use the following sample:

Key Result icon

EXAMPLE: Use the following sample:

Task icon

EXAMPLE: Use the following sample: