Data Viewer Widget
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
See General remarks on widgets.
- In execute mode, specific icons found to the right of the widget enable you to switch between the Grid
, Tile
and Line
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.
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
- 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
) 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
See the procedure to find out more about the HTML code for different modes.
Grid mode | |
---|---|
Tile mode | List mode |
![]() |
![]() |
Form mode | |
Embedded Form: Box is checked | Embedded Form: Box is not checked |
![]() |
![]() |
Displaying search results in the knowledge base
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 |
|
---|---|
Detailed results | |
in Tile mode | in List mode |
![]() |
![]() |
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
. 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.
- 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.
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,
List mode icon or
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 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 |
|
|
- Select the Enable Tile HTML... option as required.
- Click
next to Tile Cell Format and define animations in the text editor using icons
.
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.
- 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
to run the animation again.
- Click x in the drop-down list to delete the effect.
- Click
- 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.
- 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.
Opacity = 0.2 | Opacity = 0.5 | Opacity = 0.9 |
---|---|---|
|
|
|
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).
You want to display each cell with a fade effect when the page is loaded.
- 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
to run the animation again.
- Click x in the drop-down list to delete the effect.
- Click
- Delay (0 - 4)s: Time in seconds before the animation is run.
- Duration (0 - 4)s: Duration in seconds required for running the animation.
If the page load time or network is slow, you should increase the value in Delay so that the users can view animation correctly.
- 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.
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 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).
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).
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 .
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 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 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
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
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
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) |
---|---|
![]() |
<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
See the procedure for the Knowledge Base widget.