Raw HTML

Overview

The Raw HTML widget allows embedding arbitrary HTML into the dashboards being configured. Current widget supports output of both totally static HTML content as well as inserting the dynamic endpoint data taken from the EPR service into the HTML content. You can see the details of the configuration of both static as well as dynamic content below.

Raw HTML

Configuration

Configuring the static content in HTML

Required basic widget configuration:

Configuration schema:

config:
  type: rawHTML       # Widget type. REQUIRED.
  content: <HTML>             # Arbitrary HTML.

Example:

config:
  type: rawHTML
  content: "<div style=\"height:100%;position:relative;width:100%;background-color:#272D34\"> <div class=\"component-wrapper\" style=\"background-color:#272D34;height:100%\"> <div class=\"header-content cf\" style=\"display:flex;align-items:center;justify-content:space-between;flex-direction:row;padding:0 20px 0 0;overflow:hidden;background-color:#2B3339;height:28px;color:#9DB4BF;font-size:16px\" data-radium=\"true\"><img alt=\"Location icon\" height=\"16\" src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAvCAYAAAAb1BGUAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAQASURBVFiF5ZhdiJRVGMd//zPzzrZaQURmBUUfJOrt7I6fWRddBGYQ5IUR1E0GUtSFVztDo7uzS0H2fWOkJNGNkCVC0YX2oZk7W3STuGLoUqYrrpAu5Lwzc54uVrdxP2bPfOhN/7t5zv95fuc5vOe85x0RqOzh0mKStlam1d5YLLEAuBW4aMY5iaOG/eCd9g2kO46F1NRchtxgeY1RLYBWhk4Us4OmRE+hO/q+KXi+ePmBiuldYG0wdLr2Yv7VvkznyWB4rlheaWafgy1oAXxVY877Z7Yu6zwwdcBNDfQMlp418/vbBAa43Tv3de5IacPUgWs6n+jY7wdSbQLXqizc473d0XfT4Pmhf+6t+ESxjR3PII0ala5C97w/oGbZq1X33vUFA9idssS2yakA9BTjbpn9RMDWa4dkbkVvJjo80bnRf6PAAF62BUBX9vOJcLjOGfa2M32VUDwak1rosCfAXgPdEcg3S/r7k2VYp2CwHapa6qmBjMZqgmeBX/ND9lHFx3uB5SEdqKx1TqbVgbM9nax0rJsCnlQ+rfNVSz0J/BVWTo84wZIgK+rPr9CFep6BjMYkGwiqJ5Y4g7tDzL5S+TLEl6j6L0J8Bvc4YF6At1pY3hm0nPlM52mgGmCd74DxAGMif5T5QfAj3AIk5jSKS86M8yFF4/HSmhBf2YX5zDPmBMdDzE5sxqz+ljSTYHNQPcewA4ohZtCaXDHeWs+RG4z7IGzrGhSTODvIHA3VJGRzxdKiirfsQOamyRXLFi8vwtRv8HRQIcCZP6gXhyxaYPEoxm2hiQBmnBB2Fuku4MFGcoEL51xqodueVhnPvgaTkXgIaVUTYBD7tqdVdgDO/M6GC7QgmdsxMYcryg2WfrPAo7ZFDfd1pRYj2X8XSNP7NwCMTO8gGdRco0YT0cfAjPfrtskYSdwc7bj6cxK+Pa2yTP3Xky2nrfmliqfBAY6NRDtDT7wm9HtiPNpVG7gGvnu9qv46dW/SlvxjqswKBzg+En0KDLWZPXT8ZPTZ1OA0+O71qsrrJcLeySGqeqeNu9drWr1pcIDeZamfhT5sD1sf9KdTv8w0MiMcoBRHWeDPFslnyi56fbbBWeFvrtIlM15phWzGpjfS+rthOEAh07EHsauep44+KWQ69tQz1IUDJOelNplxokHwyaRPzblqc8LzSzXunHue8KffC/dCfpkutgwH6O2KDgFBh4+gr/YPgJbhAMmuVB7xTT2PSQeOnUrVvec1Bc9LPhnHzzH79jsTWbxhpsNkNjX8Td4zWF4h/LdAVBMuG+7RQnf0YyO1gju/qgmANl4TlF5uFNySskfibdnBkuWK8VvN1kg2mzg8Em1++L747PCpqGn4/1f/AkRidaTlImk8AAAAAElFTkSuQmCC\" style=\"padding:2px 0;margin-left:10px;margin-right:-5px\" data-radium=\"true\"> <div class=\"title\" style=\"align-items:flex-start;text-overflow:ellipsis;flex-grow:1;margin-left:10px;white-space:nowrap;overflow:hidden\" title=\"\" data-radium=\"true\">Device location </div> </div> <div class=\"content\" data-radium=\"true\"> <div> <img style=\"width:256px;height:200px; padding: 10px; display: block; margin-left: auto;margin-right: auto;\" src=\"/office.png\" alt=\"Office\"> </div> <div style=\"padding: 5px 10px 0 10px; text-align: center;\"> <p style=\"color: #b6cfdb;\">This device is located at office</p> </div> </div> </div> </div>"

Resulting screenshot:

Raw HTML-screenshot-static-html

Configuring the dynamic content in HTML

Raw HTML allows usage of such endpoint information as its metadata, application version name, creation date, etc. in HTML. See the response of this REST API call for more endpoint information that is possible to operate on.

Configuration schema:

config:
  type: rawHTML       # Widget type. REQUIRED.
  content: <HTML>             # Arbitrary HTML.
  serviceIntegration:         # Define EPR service integration if needed.
    service: <string>         # EPR service instance name.
    values:                   # Values mapping in template.
      - name: <string>        # Placeholder name.
        path: <string>        # Path to value in endpoint information JSON.

To enable dynamic value output in the HTML content, ${value_name} is used as templating notation. value_name should correspond to one of the name key in the values array from the above configuration.

Example:

config:
  type: rawHTML
  content: "<div style=\"height:100%;position:relative;width:100%;background-color:#272D34\"> <div class=\"component-wrapper\" style=\"background-color:#272D34;height:100%\"> <div class=\"header-content cf\" style=\"display:flex;align-items:center;justify-content:space-between;flex-direction:row;padding:0 20px 0 0;overflow:hidden;background-color:#2B3339;height:28px;color:#9DB4BF;font-size:16px\" data-radium=\"true\"><img alt=\"\" height=\"16\" src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAvCAYAAAAb1BGUAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAQASURBVFiF5ZhdiJRVGMd//zPzzrZaQURmBUUfJOrt7I6fWRddBGYQ5IUR1E0GUtSFVztDo7uzS0H2fWOkJNGNkCVC0YX2oZk7W3STuGLoUqYrrpAu5Lwzc54uVrdxP2bPfOhN/7t5zv95fuc5vOe85x0RqOzh0mKStlam1d5YLLEAuBW4aMY5iaOG/eCd9g2kO46F1NRchtxgeY1RLYBWhk4Us4OmRE+hO/q+KXi+ePmBiuldYG0wdLr2Yv7VvkznyWB4rlheaWafgy1oAXxVY877Z7Yu6zwwdcBNDfQMlp418/vbBAa43Tv3de5IacPUgWs6n+jY7wdSbQLXqizc473d0XfT4Pmhf+6t+ESxjR3PII0ala5C97w/oGbZq1X33vUFA9idssS2yakA9BTjbpn9RMDWa4dkbkVvJjo80bnRf6PAAF62BUBX9vOJcLjOGfa2M32VUDwak1rosCfAXgPdEcg3S/r7k2VYp2CwHapa6qmBjMZqgmeBX/ND9lHFx3uB5SEdqKx1TqbVgbM9nax0rJsCnlQ+rfNVSz0J/BVWTo84wZIgK+rPr9CFep6BjMYkGwiqJ5Y4g7tDzL5S+TLEl6j6L0J8Bvc4YF6At1pY3hm0nPlM52mgGmCd74DxAGMif5T5QfAj3AIk5jSKS86M8yFF4/HSmhBf2YX5zDPmBMdDzE5sxqz+ljSTYHNQPcewA4ohZtCaXDHeWs+RG4z7IGzrGhSTODvIHA3VJGRzxdKiirfsQOamyRXLFi8vwtRv8HRQIcCZP6gXhyxaYPEoxm2hiQBmnBB2Fuku4MFGcoEL51xqodueVhnPvgaTkXgIaVUTYBD7tqdVdgDO/M6GC7QgmdsxMYcryg2WfrPAo7ZFDfd1pRYj2X8XSNP7NwCMTO8gGdRco0YT0cfAjPfrtskYSdwc7bj6cxK+Pa2yTP3Xky2nrfmliqfBAY6NRDtDT7wm9HtiPNpVG7gGvnu9qv46dW/SlvxjqswKBzg+En0KDLWZPXT8ZPTZ1OA0+O71qsrrJcLeySGqeqeNu9drWr1pcIDeZamfhT5sD1sf9KdTv8w0MiMcoBRHWeDPFslnyi56fbbBWeFvrtIlM15phWzGpjfS+rthOEAh07EHsauep44+KWQ69tQz1IUDJOelNplxokHwyaRPzblqc8LzSzXunHue8KffC/dCfpkutgwH6O2KDgFBh4+gr/YPgJbhAMmuVB7xTT2PSQeOnUrVvec1Bc9LPhnHzzH79jsTWbxhpsNkNjX8Td4zWF4h/LdAVBMuG+7RQnf0YyO1gju/qgmANl4TlF5uFNySskfibdnBkuWK8VvN1kg2mzg8Em1++L747PCpqGn4/1f/AkRidaTlImk8AAAAAElFTkSuQmCC\" style=\"padding:2px 0;margin-left:10px;margin-right:-5px\" data-radium=\"true\"> <div class=\"title\" style=\"align-items:flex-start;text-overflow:ellipsis;flex-grow:1;margin-left:10px;white-space:nowrap;overflow:hidden\" title=\"\" data-radium=\"true\">Device location </div> </div> <div class=\"content\" data-radium=\"true\"> <div> <img style=\"width:256px;height:200px; padding: 10px\" src=\"/office.png\" alt=\"Office\"> </div> <div style=\"padding: 0 10px 0 10px; text-align: center;\"> <p style=\"color: #b6cfdb;\">Device is located in ${location}</p> </div> </div> </div> </div>"
  serviceIntegration:
    service: epr
    values:
      - name: location
        path: metadata.location

Raw HTML-screenshot-epr-response

The ${location} placeholder in the HTML from the above configuration example is substituted with the value that locates under the metadata.location path in the endpoint information REST API response.

Static resources referencing

There are two ways to embed images into the HTML content: encoding it into Base64 or referencing it from the WD external static resources.

Note, that in the previous example:

  • office.png is referenced from the static resources;
  • Location icon is encoded in Base64.

Interfaces

Raw HTML supports a number of service interfaces to perform its functional role. The key supported interfaces are summarized in the following diagram.

Raw HTML interfaces diagram

For service communication, WD widgets mainly use REST APIs.