Follow

[AppInsights] Widgets - HTML widget: overview

Our HTML widget is a robust tool for users who wish to add custom content to their dashboard environment.  You can iframe videos or webpages, represent data using a selection of Javascript libraries -- Backbone.jsHighchartsd3.js -- or simply write HTML code directly within the app.

To get started, navigate to the services pane on the right side of the app ("+ Add widget" button).  Select “Content Widgets” and then the “<HTML>” tile -- you’ll notice that a new widget has been deployed to your dashboard.

Screen_Shot_2018-01-17_at_4.22.52_PM.png

Screen_Shot_2018-01-17_at_4.22.59_PM.png

Now that you have your widget, you need to specify if you will be using HTML or one of the integrated Javascript libraries to populate your widget.  Hit the gear icon at top right of your widget and select the “Edit Widget Settings” menu.

html_overview_3_02

You’ll immediately be defaulted to the “Widget Settings” tab where you can select a Javascript library.  If you would like to use HTML code, you do not need to check a box.  Simply hit the save button and by default the widget will be prepared to accept / process your HTML.

Please note: you cannot add HTML to your new widget prior to entering the “Edit Widget Settings” menu and hitting the “Save” button.


html overview 4

Now that you’ve specified your library of choice, you’ll want to start adding your script.  To do so, you’ll once again need to navigate to the gear icon at top right of your widget -- this time select the “Add Data” menu.  You’ll then be presented with a large text field where you can enter your code.  Just be sure to hit the “Save” button once you’ve made your changes!

html_overview_5_02

html overview 6

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request