HTML Node

Section: General

This section contains basic configuration elements required for any HTML implementation

Field

Requirement

Comments

Widget Name

Mandatory

Enter a name for this node.

This provides a handle to which you and others can refer, so it should be simple but meaningful and explain the node’s purpose.

Widget Subtitle

Optional

Additional text that can be used to explain the data presented by the node.

This will appear directly under the Widget Name, in a smaller text size.

Widget Header

Mandatory

Ability to hide or show the widget’s header.

Device Name

Mandatory

Ability to hide or show the device’s name.

Background Color

Optional

Ability to select desired colors as the monitor’s background color.

Border

Mandatory

Ability to hide or show the border line of the HTML widget.

Rich Text Area

Mandatory

Enter / Create a text which will be displayed on the HTML widget on the Rayven Dashboard.

You can also display your workflow field by using “##FIELDNAME##” format in the Rich Text Area.

Section: Text Area - View; Source Code

This section contains on how users can use source code in the HTML node.

Field

Requirement

Comments

Text Area

Mandatory

The easiest way to create your visualization is simply to type and format text here. You can also insert tables and images. You should see how the visualization will appear, but you can also click view > preview to display the rendered html.

Source Code

Optional

If you are proficient with html, you can create your visualization from html source, or you can edit the source created from the visualization that you created by direct entry in the text box. Note that you are limited to pure html. CSS, JavaScript, and so on, are not supported by this node. Code that is copied and pasted from an IDE might not be fully operant here.

There are also some Rayven-specific syntax variants that you may find useful:

• Display variables from the workflow by inserting ‘##FIELDNAME##’ 
• Set colors based on variables from the workflow (e.g., to implement traffic-lighting highlights. For instance, create a variable in the workflow that holds a hex color-value, based on your rules. Here is an example: "availability_colour_friday":"#FFC7CE". You can also use standard html values like ‘red’, but hex will give you much more flexibility. In your html, create a cell with the value of your variable (here, ##availability_friday##) and fill the cell with the color defined from the workflow (here, ##availability_colour_friday##) like so: <td style="border: 1px solid black; padding: 8px; text-align: right; background-color: ##availability_colour_friday##;">##availability_friday##</td>
• Add the text from a form using ‘<<_Question_ID_>>’. For instance, <<_Question_142_>>. These can be easily accessed from the ‘Add Question’ drop-down.
• Add the answer from a field on a form using ‘<<_Answer_ID_>>’. For instance, <<_Answer_142_>>. These can be easily accessed from the ‘Add Question’ drop-down.
• Insert images (note that this will require assistance from Rayven), for example id="docs-internal-guid-715c9f14-7fff-f6af-0a29-b3374c13b9fd"

Section: Tooltip Info

Field

Requirement

Comments

Show Tooltip

Optional

When checked, it allows users to display their tooltip text on the widget.

Tooltip Text

Optional

This section only exists when “Show Tooltip” is checked.

Users are able to write any tooltip message they desire which will be displayed on the widget.

Section: Group by Device Label

Field

Requirement

Comments

Device label name

Mandatory

There are no labels available in this box until you have saved at least one in the Device Labels section of the Workspace. 

Select a Label to use to filter devices.

Grouped

Mandatory

Select a method for grouping the widget on the dashboard from the dropdown:

No Grouping (widget per device): one widget will appear for each device

Group by device label value (Widget per label value): One widget will appear for each value of a label. For example, if the Label is ‘Colour’ and there are the values ‘Green’ and ‘Gold’, then two widgets will be displayed, one with devices with Colour Label equal to “Green” and one with devices with Colour Label equal to “Gold”

Group by device label name (One widget): Only one widget will be displayed and this will contain data from all devices.