Highlight Text View

Highlight Text View is used to highlight text in view element.

Example: highlight query string in search results.


Initialize in twig:

//example from System Configuration page content
<div data-page-component-view="{{ {
    view: 'oroui/js/app/views/highlight-text-view',
    highlightSwitcherContainer: 'div.system-configuration-content-header',
    highlightStateStorageKey: 'show-all-configuration-items-on-search',
    highlightSelectors: [
        'h5.user-fieldset span',
        'div.control-label label',
    toggleSelectors: {
        'div.control-group': 'div.control-group-wrapper',
        'fieldset.form-horizontal': 'div.system-configuration-content-inner'
    viewGroup: 'configuration'
}|json_encode }}">
    {{ _self.renderTabContent(data.form, data.content) }}

Initialize in JavaScript:

//example from "oroui/js/app/views/jstree/base-tree-view"
this.subview('highlight', new HighlightTextView({
    el: this.el,
    viewGroup: 'configuration',
    highlightSelectors: ['.jstree-search']


  • text:string - text to highlight
  • viewGroup:string - used as mediator event prefix
  • highlightSwitcherContainer:string - a class or attribute in which will render template of highlight switcher
  • highlightStateStorageKey:string - localStorage key which will contain state of visibility for not found/highlighted elements
  • highlightClass:string - class used for text highlight
  • notFoundClass:string - class used for mark content without highlighted elements
  • foundClass:string - class used for mark content with highlighted elements
  • highlightSelectors:array - array of selectors that used to find elements to highlight
  • toggleSelectors:object - array of selectors that used to find elements to mark as found or not found