The Enterprise Search UI search interface is designed to be easy to configure, allowing the administrator to perform basic re-configuration with out the need to re-code.

The following can be configured:

Facets presented on the results page
Sort options presented on the results page
Icons presented against the individual results on the results page
Fields returned in the CSV file downloaded
Language and more

Panel

title	On this page

Table of Contents

maxLevel	2

Info
New features and more customization are constantly added to ESUI. This documentation may not contain the lasted features. Ask to colleagues if you don't find a feature you need.

Configuring Tabs

Adding new tabs allow to split the content by type, index or by feature (File browser). Each tab can have custom and unique configuration compare with the global config. For instance, you can set different facets and sorting options on each tab. This is as simple as following these two steps:

In the file src/assets/configs/search.json into the tabs property add the name of the new tab to the array.
1. Example: "tabs": ["movies","NEW TAB"]
Create a new json file into the folder: src/assets/configs/tabs. having the same name you add in the array.

Code Block

language	js
theme	Midnight
title	Example .json tab file configuration

{
  "index": "gdpr",
  "filters": {},
  "grouping": {
    "enabled": false,
    "attribute": "author",
    "addKeyword": true,
    "size": 6
  },
  "results":{
    "titleField": "doc.title",
    "urlField": "doc.url",
    "contentField": "doc.content",
    "teaserField": "content",
    "dateField": "doc.last_modified",
    "mimeTypeField": "doc.normalizedMimeName",
    "other_fields": ["doc.author", "doc.last_modified"],
    "metadataFields": ["doc.author", "doc.docProcessingStatus"],
    "thumbsField": "thumbnails.pageThumbnails",
    "thumbPreviewId": "preview",
    "thumbOriginalId": "original",
    "thumbPathId": "@binaryPath"
},
  "facets": [
    {
      "id": "type",
      "displayName": "Document Type",
      "field": "normalizedMimeName.keyword",
      "sort": "valueAsc",
      "type": "string",
      "maxValues": 100,
      "maxDisplay": 5,
      "mimeIcon": true
    }, 
    {
      "id": "author",
      "displayName": "Author",
      "field": "author.keyword",
      "sort": "countDesc",
      "type": "string",
      "maxValues": 100,
      "maxDisplay": 5,
      "mimeIcon": false,
      "multipleSelection": true
    }
  ]
}

Configuring the Facets

The facets displayed to the user are configured via the src/assets/configs/facets.json file. The configuration as shipped is shown below:

Code Block

language	js
theme	Midnight
title	Facet configuration

[
  {
    "id": "source",						// Id (arbitrary)
    "displayName": "Content Source",  	// Display name
    "field": "sourceName.keyword",		// Field to build facets/filter on
    "sort": "countAsc",					// Order
    "type": "string",					// Type
    "maxValues": 100,					// Maximum buckets
    "maxDisplay": 5,					// Maximum buckets displayed on the ui
    "expanded": true
  }, 
  {
    "id": "genre",
    "displayName": "Genre",
    "field": "metadata.genres.name.keyword",
    "sort": "countDesc",
    "type": "string",
    "maxValues": 100,
    "maxDisplay": 5,
    "mimeIcon": false,					 // This field contains the mime type - show an icon based on it
    "multipleSelection": true,
    "expanded": true
  },  
   {
    "id": "type",
    "displayName": "Document Type",
    "field": "normalizedMimeName.keyword",
    "sort": "valueAsc",
    "type": "string",
    "maxValues": 100,
    "maxDisplay": 5,
    "mimeIcon": true,
    "expanded": true
  },
  {
    "id": "date",
    "displayName": "Date",
    "expanded": true,
    "field": "metadata.release_date",
    "sort": "valueDesc",
    "type": "date_histogram",
    "ranges": "year",						// Initial range to values to display
    "format": "yyyy-MM-dd HH:mm:ss",		// Format of the date
    "histogram" : {							// For date histograms, control the number of empty bars
      "year": 0,							//   Years only display the returned facet buckets, but control as below
      "month": 3,
      "day": 3,								//   Maximum of 3 empty ones between populated ones
      "hour": 0,							//   Only the populated ones
      "15m": 0
    }
  }
]

The facets are presented to the user in the order given in the file.

You may need to alter the facets, add an item to the array, or update or remove an existing one. When making changes, pay particular attention to the following fields:

displayName - the title that will appear in the facet display on the left of the results page
field - the search engine field name that will be used to calculate/filter the facet.
NOTE: it is likely that you will need to perform configuration of the field in the search engine to make it available for use as a facet.
sort - the type of sort used for the facet
- countAsc/countDesc - sort by the number of documents with the given value
- valueAsc/valueDesc - sort by the value
type - the type of facet - currently only string and date_histogram are supported
maxDisplay - the number of facet values that will be displayed before a "display more" link will be offered

Info

title	Custom Facet by Tab

You can have different facets per tab. Just add a field called "facets" in the specific Tab json configuration file and follow the same syntax described in this section. The facets defined there will take priority.

Configuring the Sort Options

The sort options given on the results page are configured via the src/assets/configs/search.json file. The configuration as shipped is shown below:

Code Block

language	js
theme	Midnight
title	Sort configuration

"sort": [
    {"sort": "_score", "displayName": "Relevancy","order":"desc"},
    {"sort": "origin", "displayName": "origin","order":"desc"},
    {"sort": "title.keyword", "displayName": "Title","order":"desc"}
  ]

You may need to alter the facets, add an item to the array, or update or remove an existing one. When making changes, pay particular attention to the following fields:

displayName - the legend in the sort pulldown
sort - the field to use to perform the sort
order - direction on the sorting (asc/desc)
NOTE: it is likely that you will need to perform configuration of the field in the search engine to make it available for use as a sort field.

The sort order pull-down list will be populated in the order that the options appear in the file.

Info

title	Custom Sorting by Tab

You can have different sorting options per tab. Just add a field called "sort" in the specific Tab json configuration file and follow the same syntax described in this section.

Configuring display fields

It is common the index schema don't match with the fields names set by default on ESUI. To adjust the display fields to your schema use the following file src/assets/configs/results.json. Change the values at the right of the fields. Those are relative to the doc object returned by the SEIAserver.

Code Block

language	js
theme	Midnight
title	src/assets/configs/results.json

{
    "titleField": "doc.title",
    "urlField": "doc.url",
    "contentField": "doc.content",
    "teaserField": "content",
    "dateField": "doc.lastModified",
    "mimeTypeField": "doc.normalizedMimeName",
    "other_fields": ["doc.imdb_id", "doc.metadata.genres.name", "doc.moviedb_id"],
    "metadataFields": ["doc.imdb_id", "doc.metadata.genres.name", "doc.moviedb_id"],
    "thumbsField": "thumbnails.pageThumbnails",
    "thumbPreviewId": "preview",
    "thumbOriginalId": "original",
    "thumbPathId": "@binaryPath"
}

According the numbered image the fields in the results.json file correspond to the following:

mimeTypeField titleField urlField dateField other_fields	Image Added
6. metadataFields	Image Added

Note

title	Adding Custom Display result fields

Use the field other_fields If you need to add custom fields to display in the UI. After this you must add an entry to the i18n files for the display label. For instance, the file src/assets/i18n/en.json should have a field called doc.imdb_id.

Multilingual support i18n

Support for multiple languages is supported by default but it will required configuration. Current languages supported are: English, Spanish and Czech. This library use the same language configuration set in the client browser to choose which language display.

Adding support for a new language is a matter to add a new file at this folder src/assets/i18n following the naming convention of i18n.

Code Block

language	js
theme	Midnight
title	src/assets/i18n/en.json

{
  "app": {
    "title": "Enterprise Search UI",
    "desc": "search system",
    "desc_admin": "Admin UI - Development Environment",
    "logo_desc": "Accenture digital | Enterprise Search UI",
    "logo_desc_admin": "Accenture digital | Admin UI - Development Environment",
    "version": "Development version 2.0",
    "copyright": "All rights reserved"
  },
  "navbar": {
    "item_1": "All",
    "item_2": "Browse",
    "login_user": "User name",
    "login_password": "Password",
    "login_btn": "Login",
    "logout_btn": "Logout",
    "search_home": "Enterprise Search UI",
    "export_btn": "Export",
    "export_alt": "Export to file",
    "import_btn": "Import",
    "import_alt": "Import from file"
  },
  "search": {
    "q_placeholder": "Enter file, employee, client, project, cost center, keywords",
    "q_remove": "Remove query",
    "count": "results",
    "sorted": "sorted by",
    "search": "Search",
    "advanced_search": "Advanced search",
    "alert": {
      "bad_query": {
        "label": "Attention",
        "phrase": "Sorry, but no results were found based on your query. Perhaps try changing your query, using different or fewer words?",
        "or": "or",
        "clear_query_and_all_filters": "clear query and all filters"
      }
    },
    "facets": {
      "content_source": "Content source",
      "document_type": "Document type",
      "date": "Date"
    },
    "facetused": {
      "used_filters": "Used filters",
      "remove_filter": "Remove this filter",
      "remove_all_filters": "Remove all filters"
    },
    "sort": {
      "field": {
        "_score": "Relevancy",
        "lastModified": "Date modified",
        "title.keyword": "Title"
      }
    },
    "grouping":{
            "metadata.genres.name": "genre"
    }
}

The structure of the json is free but it should match with the object structure in you data. You use this feature directly on the HTML view using the angular pipe translate

Examples:

Code Block

language	xml

{{ 'search.alert.bad_query.phrase' | translate }}

The field search.alert.bad_query.phrase should exist in the respective i18n file and should have a non empty value.

Grouping Results

By default, results grouping are enabled. You can disable this option by changing the “enabled” property to false in the file src/assets/configs/grouping.json

The “attribute” property corresponds to the attribute used by the search engine to perform aggregations, so you need to update this configuration based on your application requirements.

Code Block

language	js
theme	Midnight
title	CSV configuration

{
    "enabled": true,  
    "attribute": "metadata.genres.name",
    "facetName": "genre",
    "addKeyword": true,
    "size": 6
 }

Modifying the Highlighting

Modify the highlight default behavior by changing the file src/assets/configs/search.json . This feature is currently only working for elasticsearch solutions. The object structure and syntax is the same as elasticsearch documentation states. For more options check official documentation. https://www.elastic.co/guide/en/elasticsearch/reference/6.8/search-request-highlighting.html

Code Block

language	js
theme	Midnight
title	src/assets/configs/search.json

...  
"highlight": {
    "pre_tags": ["<strong>"],
    "post_tags": ["</strong>"],
    "fields": {
      "name": {"fragment_size": 100, "number_of_fragments": 1},
      "title": {"fragment_size": 100, "number_of_fragments": 1},
      "content": {"fragment_size": 100, "number_of_fragments": 1},
      "url": {"fragment_size": 100, "number_of_fragments": 1}
    }
  },
  "nohighlightQuery": ["undefined", "", "*", "*:*"],
...

Two fields are used in the cofiguration:

highlight: This object is send to the SEAIserver and it is included into the search query.
nohighlightQuery: This array indicates which query will not include highlighting. Basically wildcards. You can add any query you want here.

To disable highlighting just leave the highlight field empty.

Configuring the Icons

The icons displayed against the individual results displayed to the user are configured via the src/assets/configs/mimeTypes.json file. The configuration as shipped is shown below.

Code Block

language	js
theme	Midnight
title	Icon configuration

{
    "filedefault": "file",
    "icons":   [
        { "value":"placeholder", "icon": "file"},
        { "value":"aspire/text", "icon": "file-document"},
        { "value":"text", "icon": "file-document"},
        { "value":"aspire/pdf", "icon": "file-pdf"},
        { "value":"pdf", "icon": "file-pdf"},
        { "value":"aspire/xml", "icon": "file-xml"},
        { "value":"xml", "icon": "file-xml"},
        { "value":"excel", "icon": "file-excel"},
        { "value":"image", "icon": "file-image"},
        { "value":"word", "icon": "file-word"},
        { "value":"aspire/powerpoint", "icon": "file-powerpoint"},
        { "value":"powerpoint", "icon": "file-powerpoint"},
        { "value":"aspire/video", "icon": "file-video"},
        { "value":"video", "icon": "file-video"},
        { "value":"aspire/folder", "icon": "folder"},
        { "value":"folder", "icon": "folder"},
        { "value":"aspire/audio", "icon": "audiobook"},
        { "value":"audio", "icon": "audiobook"},
        { "value":"aspire/html", "icon": "language-html5"},
        { "value":"html", "icon": "language-html5"},
        { "value":"aspire/application", "icon": "application"},
        { "value":"application", "icon": "application"},
        { "value":"aspire/archivefile", "icon": "archive"},
        { "value":"archivefile", "icon": "archive"},
        { "value":"aspire/calendar", "icon": "calendar-text"},
        { "value":"calendar", "icon": "calendar-text"},
        { "value":"aspire/link", "icon": "link-box-variant"},
        { "value":"link", "icon": "link-box-variant"},
        { "value":"url", "icon": "link-box-variant"},
        { "value":"aspire/list", "icon": "format-list-bulleted"},
        { "value":"list", "icon": "format-list-bulleted"},
        { "value":"aspire/database", "icon": "database"},
        { "value":"database", "icon": "database"},
        { "value":"aspire/visio", "icon": "assets/img/icons/icon-visio.png", "isImage": true},
        { "value":"visio", "icon": "assets/img/icons/icon-visio.png", "isImage": true},
        { "value":"aspire/java", "icon": "assets/img/icons/icon-java.png", "isImage": true},
        { "value":"java", "icon": "assets/img/icons/icon-java.png", "isImage": true},
        { "value":"aspire/project", "icon": "assets/img/icons/icon-project.png", "isImage": true},
        { "value":"project", "icon": "assets/img/icons/icon-project.png", "isImage": true},
        { "value":"bb", "icon": "assets/img/icons/icon-bestbets.png", "isImage": true}
    ]
}

The file consists of the mimeType reported back by a document in the mimeTypeField field from the search index against the icon that should be displayed for that mime type. The icon value correspond to a class name of the icon library Material Design Icon: https://materialdesignicons.com/

Page tree

Versions Compared

Old Version 20

New Version Current

Key

Configuring Tabs

Configuring the Facets

Configuring the Sort Options

Configuring display fields

Multilingual support i18n

Grouping Results

Modifying the Highlighting

Configuring the Icons

Page tree

Page History

Versions Compared

Old Version 20

New Version Current

Key

Configuring Tabs

Configuring the Facets

Configuring the Sort Options

Configuring display fields

Multilingual support i18n

Grouping Results

Modifying the Highlighting

Configuring the Icons