Important

You are browsing the upcoming documentation for version 5.1 of OroCommerce, OroCRM and OroPlatform, which is scheduled to be released on March 2023. Read version 5.0 (the latest LTS version) of the Oro documentation to get up-to-date information.

See our Release Process documentation for more information on the currently supported and upcoming releases.

Highlight Text View

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

Example: highlight query string in search results.

Initialization

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: [
        'div.system-configuration-content-title',
        'h5.user-fieldset span',
        'div.control-label label',
        'i.tooltip-icon'
    ],
    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) }}
</div>

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']
}));

Options

  • 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