Creating opCharts HTML Widgets

opCharts HTML widgets is a way to define templates which opCharts can render and present to the user.

Prerequisites

• opCharts version >= 4.0.9
• You will need system administration privileges so you can create the required files in the /usr/local/omk directory.

How to

1. Create a new template file and have its prefix .html.ep in <omk_dir>/templates/public/. 
2. Define any arbitrary HTML inside the template as you see fit, mojolicious templates are also supported, see more on rendering mojolicious templates at https://mojolicious.org/perldoc/Mojo/Template

3. Create an opCharts component to tell the dashboard it can render this new file. For this, create a new json file in /usr/local/omk/lib/json/opCharts/components.d/: Example: acme_component.json 

   {
     "name": "What the component is called in the dashboards dropdown list",
     "ep_template_file": "The loccation of the template file",
     "options": {
       "titleText": "the component display name"
     },
     "type": "ep_template"
   }

4. Restart the omkd daemon. Please note that omkd daemon should be restarted after any change. 

Examples

acme_component

1. Create <omk_dir>/templates/public/acme_list.html.ep
2. Add the html content.

3. Create <omk_dir>/lib/json/opCharts/components.d/acme_component.json 

   acme_component.json

   {
     "name": "Acme Component",
     "ep_template_file": "public/acme_list",
     "options": {
       "titleText": "My Title"
     },
     "type": "ep_template"
   }

4. Restart omkd daemon:

   sudo service omkd restart

Wikipedia Search

In this example we will create a Dashboard with a Wikipedia Search. 

1. Create <omk_dir>/templates/public/wikipedia.html.ep
2. Add the html content:

   <div class="row">
   		<div class="container-fluid">
   			<div class="navbar-header">
                   <iframe id="wikipediaIframeExample"
                       title="Wikipedia iframe Example"
                       width="900"
                       height="600"
                       src="https://www.wikipedia.org/">
                   </iframe>
               </div>
           </div>
    </div>  

3. Create <omk_dir>/lib/json/opCharts/components.d/wikipedia_component.json 

   wikipedia_component.json

   {
     "name": "Wikipedia Component",
     "ep_template_file": "public/wikipedia",
     "options": {
       "titleText": "Wikipedia search Embebed"
     },
     "type": "ep_template"
   }

4. Restart omkd daemon:

   console

   sudo service omkd restart

5. Go to our Server Views/Dashboards: http://ourserver/en/omk/opCharts/dashboards and Add a New Dashboard. 
6. Select Data Source Type> opCharts. We will out new component, Wikipedia Component. 
7. We will see our new Dashboard:

External Server restrictions

It is not possible to embedded some webpages in an iFrame due to the CSP.  The Content Security Policy is a http header from the original server that prevents to load a webpage from an external domain - Or even the same. 

It is possible to identify wether the page has this header visiting the external webpage and looking for the existence of the content-security-policy header:

Trying to embed this webpage as an iframe, the result will be something like the following: