Secured Html Widget
This type of widget belongs to the Basic category in the widget library. It enables you to insert HTML code in the app in order to display:
- Information on the layout using HTML tags, e.g. frames, tables, images, etc.
- Data from a data source.
Notes
see General remarks on widgets
- For security reasons, the Secured HTML widget does not authorize the use of scripts.
Best practice
- You should use the Secured HTML widget:
- To display external data from a data source.
- When you do not want to use scripts. Otherwise you should use the HTML Script widget for dynamic and interactive code.
- To insert a simple action button name (without an image) that contains a link to a web page or to the messaging system, you should use the Button widget.
Examples
| Example | Representation |
|---|---|
| Display the number of open incidents
|
 |
| Display a button with an image
|
 |
| Display a frame with tabs
|
 |
List of properties
Content
HTML Code: HTML code to be displayed. Enter the code directly in the zone or click on 
to open the text editor.
Data
DataSource
Data Source: External data source associated with the widget.
- The drop-down list displays all of the data sources available in the app.
- To modify the data source or to view its contents, you should click
. The 
button below the Preview property shows the number of rows (max. 15) and columns extracted. - To define a new data source, click
Add Data Source in the Objects pane.
DataTransformer
Data Transformer: Used to define the structure and scope of the data source, apply statistical aggregate functions and modify the order of the measures displayed.
- Click Setup / Preview Data below the Data Transformer property to open the dedicated window. See the description.
EnableDrilldown
Enable Drilldown (Note: Only for an EasyVista data source data source using a view with grouping levels): Used to indicate if data is aggregated (box is checked - the drill-down functionality is enabled) or not (box is not checked).
example Breadcrumbs widget: Breakdown of equipment by location.
- If you want the widget to display the breakdown in a grouping level, you should not check this box.
- Add a Breadcrumb widget to facilitate navigation within grouping levels.
Theme
Procedures
How to display the number of open incidents
see Example
1. Create an EasyVista data source and extract the number of open incidents:
- Select the
menu option: Operation > Incidents > All Incidents - Filter: Open
2. Enter the following HTML code. The number of incidents displayed is equal to the sum of the values in the Quantity column of the data source.
You currently have <b>#[SUM_COLUMN(1),DIGITS(2)]#</b> open incident(s).
</h6>
How to display a button with an image
see Example
Enter the following HTML code:
<span style="color:#FFFFFF;">
<img alt="" src="./activities/com/easyvista/53b119e6a11b7/resources/upload/booklet.png" style="width: 40px; height: 40px;" />
<b>Legal Services</b>
</span>
</h2>
How to display a frame with tabs
see Examples
Enter the following HTML code:
<dl class="tabs" data-tab="">
<dd class="active"><a href="#panel2-1">Discrimination</a></dd>
<dd><a href="#panel2-2">NDA</a></dd>
<dd><a href="#panel2-3">Compliance</a></dd>
<dd> </dd>
</dl>
<div class="tabs-content">
<div class="content active" id="panel2-1">
<p>Title VII of the <a href="http:~/~/www.eeoc.gov/laws/statutes/titlevii.cfm">Civil Rights</a> Act of 1964 mandates that no person...</p>
</div>
<div class="content" id="panel2-2">
<p>Downlad the standard sample here.</p>
</div>
<div class="content" id="panel2-3">
<p>Downlad all standard policies <a ref="http:~/~/www.managementagility.com/MA%20SOX%20P&P%20WP%2003-05.pdf">here.</a></p>
</div>
<div class="content" id="panel2-4">
<p> </p>
</div>
</div>
How to display an infotip
An infotip, tooltip or hint is a message that appears when you roll the mouse over certain elements.
Enter the following HTML code:
