Secured Html Widget


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 big icon.pngBest 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 current 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 and associate a new data source with a widget, click Apps - Add datasource icon.png 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. Open url.png See the procedure.

Failed to execute the [include] macro

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 Product name - ev itsm.png 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

Google Calendar Logo - Google Agenda.png

Tags:
Last modified by Unknown User on 2017/09/08 15:01
Created by Administrator XWiki on 2014/09/02 11:45

Shortcuts

Recent Updates

Haven't been here in a while? Here's what changed recently:

-   Product name - ev itsm.png
-   Product name - ev sas.png

Interesting Content

How to Automate Integration
Add a Shortcut to an App
History
Quick Dashboard
Full text search - Stop Words

Powered by XWiki ©, EasyVista 2018