ElasticSearch List

Used to show large or small amounts of data, Elastic Search Data List components are built using an Elastic Search Index configuration.

The following are authoring guidelines for the Elastic Search Data List.

The Data List component is designed to organize information in a clean and structured format as an unordered list (UL). It has built-in search, sort, and filter functionalities.

To use the Elasticsearch Data List component, you will first need to set up an Elasticsearch index. Please contact the DoIT WCM team for more information.

Once you have your Elasticsearch index set up, you can quickly build a data list based on information from the Elasticsearch Index by adding the "Elastic Search List" component to your page and setting up its properties and elements.

Properties

• Elastic Search Index Name: Enter the name of the elastic search index created by DoIT.
• Error/No Results Message: Enter a message to display if there are errors or no results are found.
• Enable Search: Checking this will allow users to search the data list.
• Search Placeholder: Enter text to display as placeholder text in the search field.
• Display Pagination: Checking this allows users to move between pages of data when next two fields are populated
• Paginate after (Desktop): Indicate how many list items will display before pagination takes effect on desktop devices.
• Paginate after (Mobile): Indicate how many list items will display before pagination takes effect on mobile devices.
• ID: Enter a unique ID for the list component.
• Class: Enter a custom CSS class name for the list component.

Elements

Add elements for each field of data you want to include in your data list. Once added, you will set up the following settings.

Index Field Name: Enter a field name from your elastic search index to display in this element.

Element Details

• Field Display Name Label: Enter a user-friendly name for the index field to display to the user.
• Index Field Type: Select the data type of the index field from a dropdown list. Options are:
  • Text
  • Date
  • Date/Time
  • Number
  • Image: This will come from Elastic as a text link/URL to the image location.
• Search Operator: If filtering by keyword, indicate if you want to search if the element "Contains," "Is Equal To," "Is Not Equal To," "Greater Than," "Greater Than or Equal To," "Less Than," or "Less Than or Equal To" the keyword provided.
• Keyword: Enter a keyword for the Search Operator above.
• Link Element: To link elements, the elastic search index must first be set up to include a field with URLs you want to link to. If you want the fields in this element to link, check this box and then include these additional settings:
  • Link Field Name: Indicate which field in the elastic search index has the correct URL for linking the value in this element.
  • Open in New Tab: Check for links to open in a new tab
  • Is Email Address: Indicate if the hyperlink is an email address that will launch a new email from the end-user's mail software.
  • Is Phone Number: Indicate if the hyperlink is a phone number, which can initiate a call on mobile devices and certain desktop calling software.

Element Display

• Element Field Name Label Styling: Select the styling for the field's display name from a dropdown list. Options include: Hidden, H1-H6, Paragraph, Small, Legal.
• Element Value Styling: Select the styling for the element's value from a dropdown list. This option is grayed out if 'Image' is selected as the field type. Options include: Hidden, H1-H6, Paragraph, Small, Legal.
• Enable Filter: Check this box to enable filtering for this element.
• Enable Sorting: Check this box to enable sorting for this element. 
• Choose Order for Sorting Column: If sorting is enabled, select whether you want to sort in "Ascending Order" or "Descending Order."
• Set this column for default sorting: Once enabled for an element, this field will be grayed out for all other elements.
• Element Label Class Name: Enter a custom CSS class for the element's label.
• Element Value Class Name: Enter a custom CSS class for the element's value.
• Once you hit SAVE, you will see the list on your page with the selected elements displayed.