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.
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:
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
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.
For service communication, WD widgets mainly use REST APIs.