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

• 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

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

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

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

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

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.

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.