Secured Html Widget

Last modified on 2023/07/03 17:43

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.

Notes

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

Open url.png see Procedure

EVApps - widget Secured Html - Example 1.png
Display a button with an image

Open url.png see Procedure

EVApps - widget Secured Html - Example 2.png
Display a frame with tabs

Open url.png see Procedure

EVApps - widget Secured Html - Example 3.png

List of properties

Content

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

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

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.

Theme

     Open url.png  see Properties description

Procedures

How to display the number of open incidents

    Open url.png  see Example

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).
</h6>

How to display a button with an image

    Open url.png  see Example

Enter the following HTML code:

<h2>
   <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

    Open url.png  see Examples

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>
   <dd>&nbsp;</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&nbsp; 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&amp;P%20WP%2003-05.pdf">here.</a></p>
   </div>
   <div class="content" id="panel2-4">
      <p>&nbsp;</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.
        EVApps - widget Secured Html - Example 4.png

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

Tags:
Powered by XWiki © EasyVista 2022