Secured HTML Widget

Last modified on 2024/04/03 16:19

Apps - Widget - Secured Html icon.png 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.


    Open url.png  see General remarks on widgets


  • The Secured HTML widget allows the use of scripts. However, we do not recommend their use for security reasons and to limit the side effects associated with their usage.

Best Practice

  • 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.

List of properties


HTML Code: HTML code to be displayed. Enter the code directly in the zone or click on Apps - Edit Html icon.png to open the text editor.



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 Apps - Edit icon.png. The Apps - datasources Properties - Preview button.png button below the Preview property shows the number of rows (max. 15) and columns extracted.
  • To define a new data source, click Apps - Add datasource icon.png Add Data Source in the Objects pane.

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. Open url.png See the description.

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.

Best Practice icon.png  

  • 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.


     Open url.png  see Properties description


How to display the number of open incidents

         EVApps - widget Secured Html - Example 1.png

1. Create an EasyVista data source and extract the number of open incidents:

  • Select the Service Manager menu option: Operation > Incidents > All Incidents
  • Filter: Open
            EVApps - widget Secured Html - Example DataSource.png

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.

<h6 style="text-align: center;">
   You currently have <b>#[SUM_COLUMN(1),DIGITS(2)]#</b> open incident(s).

How to display a button with an image

         EVApps - widget Secured Html - Example 2.png

1. 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>

How to display a frame with tabs

         EVApps - widget Secured Html - Example 3.png

1. Enter the following HTML code.

<div class="content active" id="panel1">
<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>
<div class="tabs-content">
   <div class="content active" id="panel2-1">
      <p>Title VII of the <a href="http:~/~/">Civil Rights</a> Act of 1964&nbsp; mandates that no person...</p>
   <div class="content" id="panel2-2">
      <p>Downlad the standard sample here.</p>
   <div class="content" id="panel2-3">
      <p>Downlad all standard policies <a ref="http:~/~/;P%20WP%2003-05.pdf">here.</a></p>
   <div class="content" id="panel2-4">

How to display an infotip

An infotip, tooltip or hint is a message that appears when you roll the mouse over certain elements.
       EVApps - widget Secured Html - Example 4.png

1. Enter the following HTML code.

<h1 title="This section provides you with the most information.">A Heading that contains a tool tip</h1>

Integration examples

Powered by XWiki © EasyVista 2024