Creating Custom Widgets with Broadhead

Important: This topic is for Next Generation Dashboard. To view the content for the Classic Dashboard experience see Workspaces & Dashboards (Classic).
For information on Classic experiences, see Archer Classic Experiences.

Dashboards supports a global window object called Broadhead to create customized widgets.

On this page

What is Broadhead?

Broadhead is a series of predefined commands and actions that you can use within the custom widget to provide functionality to your users that may not yet exist within Archer.

Version - Required

To specify which version of Broadhead you are using, you must include a meta tag in your custom code. As Broadhead grows, new versions of the code may be added.

Examples:

<meta name="Broadhead" content="v1" />

How do I use Broadhead to create a custom widget?

  1. Formulate your Broadhead command using the information on this page.

  2. On Edit Dashboard, drag and drop the non-report widget Custom to the Center pane.

  3. In properties, name your dashboard, and enter the command into Widgets section.

What are the Broadhead commands?

Broadhead has three commands that call different actions:

  • Send Action - update or retrieve information

  • On Action - receive the data from the Send Action command

  • Subscribe - automate the Send Action and On Action cycle

Send Action

Send Action deals with anything that changes a value, triggers an event, stores or retrieves information. This command requires the action name being called and any associated parameters. Before being performed, Archer validates the syntax to minimize the impact of incorrect code.

Examples: 

broadhead.sendAction('action-name', parameters);

Response:

In the cases where Send Action results in a response, you can handle in one of the following methods:

  • Create an On Action which asynchronously manages the response data.

  • Include an await response component to the send action command to handle the response.

    • By default, this times out after 10 seconds. You can extend that time by providing a parameter in milliseconds.

Examples: 

broadhead.sendAction('action-name', parameters).awaitResponse(15000).then((response_data) => {});

On Action

Use On Action receive content from a Send Action command, only.

Examples:

broadhead.onAction('action-name', (response_data) => {});

Response:

{
action: string,
from: string,
to: string,
messageId: string,
message: any,
responseId: string (optional)
}

Subscribe

Use Subscribe to automate the Send Action and On Action command cycle.

Examples:

broadhead.subscribe('action-name', (response_data) => {});

You may find you want to cancel an existing Subscribe command. In those cases, use Unsubscribe to stop that command.

Examples:

broadhead.unsubscribe('action-name');

What actions can be used with each command?

Use these actions with the Broadhead commands to create your own custom widgets.

The following table describes each action, which actions are available with each command, and links to more specific instructions:

Action

Description

SendAction

OnAction

Subscribe

General

Navigate

Open a URL on current tab or in a new tab.

Unavailable

Unavailable

Unavailable

Available

Storage

Use local and session storage for your Broadhead object.

Unavailable

Unavailable

Unavailable

Available

Dashboard Storage

Use to enable navigation across dashboards

Available

Available

Unavailable

Unavailable

What are General Actions?

These actions allow you to get information that is not on the custom widget. General actions work on their own and do not require a command.

Navigate allows you to open a URL in the current tab or a new tab.

Template:

broadhead.navigate(url,newTab);

Parameters:

  • url - Identify the string to open.

  • newTab - (optional) set to true to open a new tab.

Examples:

broadhead.navigate('https://go.archerirm.com/',true);

Storage

Storage allows you to use local and session storage.

Templates:

  • broadhead.localStorage.clear();

  • broadhead.localStorage.getItem(key).awaitResponse().then((response_data) => {});

  • broadhead.localStorage.setItem(key, value);

  • broadhead.localStorage.removeItem(key);

  • broadhead.sessionStorage.clear();

  • broadhead.sessionStorage.getItem(key).awaitResponse().then((response_data) => {});

  • broadhead.sessionStorage.setItem(key, value);

  • broadhead.sessionStorage.removeItem(key);

Parameters:

  • method - Chose what you want to do with storage. Options are:

    • clear - Clear the entire storage.

    • getItem - Get a single item.

    • setItem - Set a single item.

    • removeItem - Remove a single item.

  • key - Identify the item to work with.

  • value - Set the value of the item.

Examples:

  • broadhead.localStorage.setItem('Number_of_Players', 1);

  • broadhead.localStorage.removeItem('Number_of_Players');

Dashboard Storage

Use session storage to enable navigation across dashboards.

Parameters:

dashboardDetails - key used to store dashboard identifiers: dashboardId and WorkspaceId

Examples:

  • broadhead.sendAction('save-dashboard-details-to-session');

  • broadhead.sessionStorage.getItem('dashboardDetails');

  • broadhead.sendAction('remove-dashboard-details-from-session');

Caution: This untranslated topic currently resides in a temporary location. When translation is complete, we will move the topic to its final destination within the content.