Data Viewer Widget

Last modified on 2023/06/01 11:53

Apps - Widget - Data Viewer icon.png This widget belongs to the Basic category in the widget library. It enables you to select a list of records from a data source and display the list on traditional screens or on smartphones in different display modes, - Grid (raw data), Tile, List, or Form

  • Each mode can be customized using HTML formatting.
  • You can insert animations in the Tile and Line display modes. For example, cells may appear differently on hover or on touch, or animation effects may be run each time the page is loaded.

Notes

Open url.png See General remarks on widgets.

  • In execute mode, specific icons found to the right of the widget enable you to switch between the Grid Grid mode icon.png, Tile Tile mode icon.png and Line List mode icon.png display modes.
    • Icons are visible only if users are authorized to see them. This is defined in the Authorize View Change property. HTML formatting must also be defined for the mode in the Cell Format properties.
    • Active display modes are represented by a blue icon and inactive ones by a black icon.
    • The Grid display mode can only be accessed if it is the default display mode.
    • The Form display mode does not require specific authorization and can always be accessed in List mode or in Tile mode when you double-click one of the records. You can use the Embedded Form property to display the detailed form below the selected record, embedded within the list. You can also replace the list with the detailed form displayed in full screen mode. Open url.png See the examples.
    • To enable the Grid display mode, select the columns you want using the Data Transformer. If you do not do so, then all of the columns will be displayed.
  • On a smartphone:
    • If no HTML formatting has been defined, the data will be displayed based on the HTML formatting defined for the List mode in the Line Cell Format property.
    • The formatting for the Form display mode is defined in the Form Cell Format property.
  • The drill-down functionality is only available in the Grid display mode.

Best Practice big icon.pngBest Practice

  • In Grid mode, you can use the Theme > Cell Style and Grid Style properties to customize the layout of the table of records. For example, you can define the appearance of the header row as well as alternating rows in the table.
  • Define the table layout for the different display modes so that the size of the tiles or rows for each record in the data source is identical.
  • To display an image referenced in the data source, insert the corresponding column using the Data Picker in the text editor (Advanced Tags Apps - Text Editor - Advanced tags icon.png) and add the HTML tag <img src="Image_name">. You can define its size in the tag's height and width settings.
  • If you add an animation in Tile or List mode, you should not define animations in the Theme section.

Examples

Displaying the service catalog

        Open url.png  See the procedure to find out more about the HTML code for different modes.

Grid mode

EVApps - widget Data Viewer - Example Grid.png

Tile mode List mode
EVApps - widget Data Viewer - Example Tile.png EVApps - widget Data Viewer - Example Line.png
Form mode
Embedded Form: Box is checked Embedded Form: Box is not checked
EVApps - widget Data Viewer - Example Form - Embedded.png EVApps - widget Data Viewer - Example Form - Not Embedded.png

Displaying search results in the knowledge base

        Open url.png  See the procedure for the Knowledge Base widget. 

 

Implementation of the search field (1)

via a Global Search in KB or Knowledge Base custom widget

EVApps - Knowledge base search.png

Detailed results
in Tile mode in List mode
EVApps - widget Data Viewer - Example Line.png EVApps - Knowledge base search - Detail.png

List of properties

Content

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.
  • Note: In execute mode, the widget will only display the first 30 records. Subsequent records will be displayed in groups of 30 when you scroll down using the vertical scroll bar or the mouse wheel.
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.

Default View: Default display mode for data from the data source.

Authorize View Change: Used to indicate if users can change the default display mode for data from the data source (box is checked) or not (box is not checked). If applicable, the Tile mode icon.png Tile mode icon, List mode icon.png List mode icon or Grid mode icon.png Grid mode icon will be displayed to the right of the widget. Note: You should select the box only if you have defined specific formatting for the List and/or Tile modes in the Cell Format properties.

Show Current Record: Used to indicate if the current record should be highlighted in a green box in the widget (box is checked) or not (box is not checked). Note: This property applies to all display modes for the widget.

Tile

Tile Cell Min Width and Tile Cell Height: Height and width fields used to define, in pixels, the minimum size of the cells in Tile mode. When the size of the screen is modified, the system automatically calculates the number of cells to be displayed in one row so that the width of the cells does not fall below this limit.

Tile Cell Format: HTML formatting for Tile mode. Enter the code directly in the field or click Apps - Edit Html icon.png to open the text editor.


Enable Tile HTML Hover: Used to run an animation when the cursor moves over each cell displayed in Tile mode (box is checked).

Enable Tile HTML For Touch Devices: Used to run an animation when the finger touches each cell displayed in Tile mode on touchscreens (box is checked).

ExampleHover

example  You want to display a thumbnail containing a New request button when the cursor hovers over an image in the catalog.

Standard content Content displayed on hover or on touch
Display

Apps - Text Editor - Example hover Off.png

Apps - Text Editor - Example hover On.png

  • Select the Enable Tile HTML... option as required.
  • Click Apps - Edit Html icon.png next to Tile Cell Format and define animations in the text editor using icons Apps - Text Editor - Hover Touch toolbar.png. Open url.png See the procedure.
  • If you selected the Enable Tile HTML Hover box, click the button below the Choose Tile Hover Transition property and define the attributes of the transition in the dedicated editor.
             Apps - Text Editor - Hover - Transition editor.png
    • Select Transition: Click to show the drop-down list and select the category of effect you want. Click to select the effect you want. The animation will automatically run in the preview pane.
      • Click Apps - Play animation icon.png to run the animation again.
      • Click x in the drop-down list to delete the effect.
    • Background Color: Background color of the area for the animation.
    • Opacity (0 - 1): Tool used to define the transparency of the background color. Selecting 0 means the background color will be completely transparent while 1 means it will be completely opaque.
Opacity = 0.2 Opacity = 0.5 Opacity = 0.9

Background image - Opacity 02.png

Background image - Opacity 05.png

Background image - Opacity 09.png


Enable Custom Tile Animation: Used to define identical animation in each cell. The animation will be run each time the page is loaded in Tile mode (box is checked).

Example documentation icon EN.png  You want to display each cell with a fade effect when the page is loaded.

          Apps - widget Data Viewer - Animations Editor.png

  • Select the Enable Custom Tile Animation box.
  • Click the button below the Select Tile Animation property and define the attributes of the animation in the editor.
    EnableAnimation_Procedure
    • Select Animation: Click to show the drop-down list and select the category you want. Click to select the effect you want. The animation will automatically run in the preview pane.
      • Click Apps - Play animation icon.png to run the animation again.
      • Click x in the drop-down list to delete the effect.
    • Delay (0 - 4)s: Time in seconds before the animation is run.
    • Duration (0 - 4)s: Duration in seconds required for running the animation.           
       

    Best Practice icon.png  If the page load time or network is slow, you should increase the value in Delay so that the users can view animation correctly.

EndEnableAnimation_Procedure

Line

Line Cell Height: Height of the rows, in pixels, in List mode.

Line Cell Format: HTML formatting for List mode. Enter the code directly in the field or click Apps - Edit Html icon.png to open the text editor.

Enable Line HTML Hover: Used to run an animation when the cursor moves over each cell displayed in List mode (box is checked).

Enable Line HTML For Touch Devices: Used to run an animation when the finger touches each cell displayed in List mode on touchscreens (box is checked).

          Open url.png See the example and procedure which are identical to those in the Tile section.

Enable Custom Line Animation: Used to define identical animation in each cell. The animation will be run each time the page is loaded in List mode (box is checked).

          Open url.png See the example and procedure which are identical to those in the Tile section.

Form

Embedded Form: When List or Tile mode is enabled, this is used to indicate where the detailed form of the record is displayed when you double-click it. It can be displayed below the selected record, embedded within the list (box is checked). You can also replace the list with the detailed form displayed in full screen mode (box is not checked). You can then return to the list using Back blue icon.png. Open url.png See the examples.

Form Detail Data Source: In a master-detail relationship, this indicates the detail data source dedicated to the display in Form mode linked to the widget's master data source. Note:  This must be an EasyVista data source.

Form Detail Data Transformer: List of fields to be displayed in Form mode.

Form Cell Format: HTML formatting for the Form display mode. Enter the code directly in the field or click Apps - Edit Html icon.png to open the text editor.

Mobile

Mobile Cell Format: HTML formatting for smartphone displays. The List display mode enables users to click a record to see its details. Enter the code directly in the field or click Apps - Edit Html icon.png to open the text editor. Note: If no HTML formatting has been defined, the data will be displayed based on the HTML formatting defined for the List mode in the Line Cell Format property.

Theme

Open url.png  See the description of properties.

Procedures

 

How to display the different service catalog modes

1. Create an EasyVista data source and extract the service catalog:

  • Service Manager menu option: Operation > Service Requests > New Request
  • Filter: Hardware 
  • View: List IT Store

         EVApps - widget Data Viewer - Example DataSource.png

2. Enter the following HTML code for each display mode. The code contains references to certain data in the data source using #[FIELD('columnName')# instructions.

Tile mode (Tile Cell Format)
<style type="text/css">
   .hover:hover {
  cursor: pointer;
  border-style:solid;
  background: #ffffff;
  border-width:1px;
  border-color: #cccccc;
   }
</style>
<div class="hover" style="height: 280px"><img src="#[FIELD('Image')]#" /></div>
<div class="mix-details">
   <h4>#[FIELD('Service')]#</h4>
   <p style="margin-left: 20px; "><a class="news-block-btn white" href="#">==>  Read more</a></p>
</div>
List mode (Line Cell Format)
<style type="text/css">
   .hover:hover {
  border-style:solid;
  border-width:1px;
  border-color: #cccccc;
  background-color: #ffffff; cursor: pointer;
   }
  table {border-width:0px;}
   .hover img {max-width: 139px; padding: 10px;
   }
</style>
<table align="left" border="0" cellpadding="0" cellspacing="0" class="hover" style="width: 100%;">
   <tbody>
      <tr>
         <td width="70px"><img src="#[FIELD('Image')]#" /></td>
         <td align="left" class="description-list" width="75%">#[FIELD('Service')]#</td>
      </tr>
   </tbody>
</table>
Form mode (Form Cell Format)
<div class="mix-details">
   <h4>#[FIELD('Service')]#</h4>
</div>
<div class="dtv-row">
<div class="dtv-cell small-12 medium-5 large-4 columns" style="text-align: center;">
   <div class="dtv-row"><img src="#[FIELD('Image')]#" style="min-height: 13em; max-height: 100px;" /></div>
   <div class="dtv-row">
      <div>#BTN_EZV_NEW_REQUEST#</div>
   </div>
</div>
<div class="dtv-cell small-12 medium-7 large-8 columns">
   <div class="dtv-row dtv-memo dtv-p">#[FIELD('Description')]#</div>
</div>

How to display the Self Service portal

1. Create an EasyVista data source and extract the service catalog:

  • Service Manager menu option: Operation > Service Requests > New Request
  • Filter: General Services 
  • View: List IT Store

         EVApps - widget Data Viewer - Example DataSource 2.png

2. Enter the HTML code for List mode (Line Cell Format). The code below offers a presentation without any borders. Spaces are inserted between columns.

Representation List mode (Line Cell Format)
EVApps - widget Data Viewer - Example Line 2.png
<table align="left" cellpadding="1" cellspacing="20" style="width: 100%; border:0px solid transparent;">
   <tbody>
      <tr>
         <td style="text-align:left" width="15%"><img height="100%" src="#[FIELD('Image')]#" width="100%" /></td>
         <td style="text-align:left" width="35%">#[FIELD('Service')]#</td>
         <td style="text-align:left" width="50%">#[FIELD('Description')]#</td>
      </tr>
   </tbody>
</table>

How to implement a search field in the knowledge base

        Open url.png  See the procedure for the Knowledge Base widget.

Tags:
Powered by XWiki © EasyVista 2022