Elastic Search [Detailed Display]

This component allows you to currate a page using individual or multiple fields returned by a specific search query, typically fed by a query string value. The goal of this component is to help build reusable dynamic pages which surface Elastic Index driven data. Think of it in terms of a Master/Detail view, you build the "master" list using components such as the Elastic Search Datatable or Elastic Search Datalist and then returns from that a link to a dynamic "details" page containing one or more of these components to view a specific records details.

This component differs from the Search Results component which displays a list of all results returned from a search query. Instead, this component focuses on presenting an in-depth, comprehensive display of a single result. This allows for showing more detailed information and additional fields that wouldn't be practical in a condensed list view. In addition, this control allows you to control the field level formatting of each return and which fields of the record show to the user.

You can choose to use a single instance of this control on a page and create a linear version of output or put multiple instances of this control onto a page and create a very specific purposful output formatted to your desire.

Example use-case: An agency wants to display a listing of licensed vendors, and each individual vendor has a record which contains the vendors address, phone number, website address, products they supply, board members, etc.. All that information won't fit onto a single Datatable or list efficiently or in a pleasing manner. So the solution is to create a lookup table with minimal information such as name, city, county and then link the name field to a dynamic page where the visitor can view ALL the information for that specific vendor. This saves having to create a individual page for every vendor and means each vendor can be displayed exactly the same, ensuring consistency in branding and presentation.

Prerequisite: Before using this component make sure you have an existing Elastic Search Index available. Elastic search indexes are created by Web Services staff and can be automatically populated from a variety of data sources. Web Services can configure on-premise data locations such as Microsoft SQL server, File Server CSV, Excel, XML, JSON feeds and other formats to regularly send data to Elastic Search Indexes. This type of "data shipping" means you can have a flattened data-cube of your report data available in Elastic and the various AEM Elastic based driven components directly within your website, no iframe or embed required.

To use the Elastic Search [Detailed Display] component, first set up an Elasticsearch index. Please contact the DoIT Web Services team for more information.

Once the Elasticsearch index is set up, add the "Search Result Detailed Display" component to the page and configure its overall properties and individual elements.

Basic Configuartion

• Elastic Search Index Name: Enter the name of the Elastic Search index that contains the search results data. This index name must exactly match an existing index in the search infrastructure.
• Results Display: Add elements for each field of data to include in the detailed display. Click the "Add" button at the bottom of the Results Display section to create a new field configuration. Once added, configure the settings for each element.
• Error Message: Rich text field. Enter the text to display when the search returns no results (e.g., "No results found. Please try a different search term.").
• ID: Enter a unique ID for the component.
• Class: Enter a custom CSS class name for the component.

Results Display

• Index Field Name: Enter the index field name from the elastic search index to pull in data for this element

• Field Display Details
  • Field Display Name Label: Enter a user-friendly name for the index field to display to the user (e.g., "Agency", "Date/Time", "Logo"). This is the label text that will appear before the field value.
  • Index Field Type: Select the data type of the index field from the dropdown list. Depending on the Index Field Type selected, different element configuration fields are presented. Field Type options include:
    • Text
    • Date
    • Image - Image field types, in the Elastic index, should be fully qualified URLs, including the protocol and domain (e.g., https://www.example.com/image.jpg rather than /image.jpg
  • Field Display Name Label Styling:Select the styling for the field's display name label from the dropdown list. Options include: Hidden, H1-H6, Paragraph, Small, Legal.
  • Field Value Styling: Select the styling for the element's value from the dropdown list. Options include: Hidden, H1-H6, Paragraph, Small, Legal.
  • Alt Tag Index Field Name: or image types, specify the tag index field name  that contains the alternative text for the image. Note that alt text values are limited to 255 characters and will be automatically truncated if longer.
  • Link Element: Check this box to make the field value clickable/linkable. When checked, the field will function as a hyperlink. The Elasticsearch index must first be set up to include a field with URLs to link to. If linking elements, the following settings are shown.
  • Link Field Name: Specify the index field that contains the URL for the link (e.g., "site_url").
  • Open in New Tab: Check this box to have links open in a new browser tab/window.
  • This is an Email Address: heck this box if the field contains an email address. This will format it as a mailto: link.
  • This is a Phone Number: Check this box if the field contains a phone number. This will format it as a tel: link for mobile devices.

An example can be found on the IIS News Details page for any press release. The information for each part of the release, contact info, title, main article content, attachments, etc.. example link: Gov. Pritzker Announces the Fourth Cohort of the Governor’s Office Academy of Leadership (G.O.A.L.) Thirty-four emerging leaders selected to strengthen cross-agency collaboration and operational effectiveness

If elements are not appearing in the detailed display, verify the following:

• The field names specified (Index Field Name, Alt Tag Index Field Name, Link Field Name) match the exact field names in the search index
• The Elasticsearch Index Name is correctly entered and matches an existing index
• The index contains data for the specified elements
•  The Field Display Name Label field is NOT empty (even if the styling is set to hidden)
• Contact the DoIT Web Services team if assistance is needed with field mapping or index configuration

If linked elements are not functioning properly:

• Verify that the Link Element checkbox is checked
• Ensure a Link Field Name is specified
• Confirm the Link Field Name exists in the search index and contains valid, fully qualified URL values
• For email addresses, verify the "This is an Email Address" checkbox is also checked
• For phone numbers, verify the "This is a Phone Number" checkbox is also checked

If the styling of elements is not displaying correctly:

• Check that the correct styling option is selected from the dropdown menus
• Verify that custom CSS classes (if used) are properly defined in the site's stylesheet
• Remember that heading styles (H2-H6) should be used sparingly to maintain visual hierarchy
• Consider using "Hidden" for labels where context is obvious to reduce visual clutter

If image elements are not showing:

• Confirm the Index Field Type is set to "Image"
• Confirm the "Field Display Name Label" field is not empty
• Verify the All Tag Index Field Name is correctly specified
• Ensure the index contains valid, fully qualified image URLs or paths for the specified element

To change the display order of elements:

• Use the up/down arrows next to each element configuration to reorder them, by dragging and dropping into the order wanted
• The component displays fields in the order they are configured
• Individual elements can be removed by clicking the trash icon next to each element