Search Filter Widget

Last modified on 2024/02/14 11:14

Apps - Widget - Search Filter icon.png  This widget belongs to the EasyVista category in the widget library. It enables you to filter data in data sources linked to Service Manager using a dynamic search field.

  • The search is run on Service Manager menu items, in discussions and in the knowledge base.
  • The widget applies the search criteria to the different data sources simultaneously.
  • You can define an app page specifically for displaying search results.

Notes

     Open url.png See General remarks on widgets.

  • You can select all the data source fields in each data source linked to the widget.
    • The list of fields in the data source that can be used as search criteria is defined by EasyVista. You cannot modify it.
  • For better results, the fields defined by EasyVista must be indexed and case-sensitive.
  • The search will examine each keyword entered by users and search for it in each previously added field.
  • Each keyword must be present in at least one field defined by EasyVista.
  • For security reasons, the processing will exclude a list of keywords from the search.

Caution

  • In execute mode, the search will apply to all widgets in the app using the same EasyVista data sources as the those defined for the Search Filter widget.

Best Practice

  • You should use a Search Filter widget to filter Service Manager data using a dynamic search field and a Filter List widget to consult the data using a list of dynamic filters. You can combine these two widgets when they are both linked to the same EasyVista data source.
  • You can modify the graphic properties of the different widget elements, e.g. font, size, alignment, or color, using the Theme section and the Theme > Search section for the overall configuration.

Examples

  • Run a search in the employee directory using several search criteria, e.g. login, email, function and department.
             Employee directory - Example with several criteria.png
Displaying widgets Searching
  • (1) Bar Chart and Data Viewer widgets pointing to an EasyVista data source called All Problems.
  • (2) Data Viewer widget pointing to an EasyVista data source called All Incidents.
Apps - widget Search Filter - Example before search.png
Search using the Open filter for all records from both data sources. Apps - widget Search Filter - Example after search.png
Example2
  • Run a search combining a Search Filter widget and a Filter List widget pointing to the same EasyVista data source.
Searching Filtering
Enter the keyword, failure, to search for incidents using the Search Filter widget (1). The Bar Chart widget and Data Viewer widget pointing to the same EasyVista data source will automatically be refreshed. Select the Open filter in the list of incidents to display only those that are open using the Filter List widget (2). Both widgets will automatically be refreshed.
Apps - widgets Filter List and Search Filter - Example - Search restriction.png Apps - widgets Filter List and Search Filter - Example - Search and Filter restrictions.png
Example2_End

List of properties

Content

DeviceNativeStyle

Device Native Style: For an app designed for use on a smartphone, this indicates if the widget should be displayed according to the style guide of the smartphone browser (box is checked) or according to the standard Service Apps style (box is not checked).

Box is checked: Smartphone mode (Android or iPhone) Box is not checked: Standard Service Apps mode
Apps - widget Search Filter - Device native style On.png Apps - widget Search Filter - Device native style Off.png
SearchPlaceholder

Search Placeholder: Text displayed in the search area (1) which is automatically cleared once the user starts typing.
         Search placeholder example.png

Best Practice icon.png  You should use this field as an input help, e.g. by indicating the available search criteria.

Clear Search Input: Used to indicate (box is checked) or not (box is not checked).

Target Page: Page defined specifically for displaying search results.

  • Click Apps - Edit icon.png to open the page in the Design pane.
  • Click Apps - Delete 2 icon.png to cancel the page selection.

Data Source And Fields: List of data sources and fields where the search will be run.
         Apps - widget Search Filter - Datasource and fields properties.png

  • Add Item to add a data source to the search.
  • Apps - Edit icon.png : Used to modify or view the contents of the data source.
  • Apps - Delete icon.png : Used to remove the data source. All previously selected fields will be cleared from the search criteria.
  • Apps - Order objects icon.png : Used to modify the order of data sources when running the search.
  • Search Fields: List of data source columns in which records are searched.
    • Click Apps - Delete 2 icon.png to delete one of the selected columns.

Theme

 Open url.png See the description of properties.
 

Display Configurable element Properties to specify
Graphic Properties - General elements.png (1) Background color of the widget General properties > Background Color list 2
(2) Background color of the search field General properties > Background Color list 1
(3) Rounded corners of the search field Search section > Radius

Best Practice icon.png  Apply a radius of 0 if you want a border with right angles.

(4) Search icon Apps - Search icon.png

   The search icon is defined by EasyVista. You cannot modify it.

Search section
  • Icon Size: Size of the icon
  • Search Icon Color: Color of the icon
  • Search Icon Background Color: Background color of the icon
Graphic Properties - PlaceHolder element.png (5) Text displayed in the search field when the page is opened General properties > Element = PlaceHolder
Graphic Properties - Text Before Search element.png (6) Font color during data entry General properties > Element = Text Before Search
Graphic Properties - Text After Search element.png Display after the search is run
  • (7) Font color
  • (8) Background color of the search field
General properties > Element = Text After Search

Procedure: How to implement a Search Filter widget

Step 1: Add data sources

1. Open the app you want.

2. Add data sources linked to Service Manager from which you want to select the widget's search criteria.
 

Step 2: Implement the Search Filter widget

1. Add a Search Filter widget in the Design pane.

2. Select in the Data Source And Fields list the data source from which the widget should point.

3. Select in the Search Fields area the fields to be used as a search criterion.

4. Click Add Item to add another data source to the search.

5. Define the graphic properties of the widget in the Theme section.

6. Define the widgets for displaying the search results.

  • If you want to insert them in a different page, select the page from the Target Page list.
     

Step 3: Check that the widget works correctly

1. Launch the app by clicking EVApps - GUI - Execute icon.png in the toolbar.

2. Check the workability of the widget.

Tags:
Powered by XWiki © EasyVista 2024