Important

We are updating the images for OroCommerce version 6.1 to align with the latest changes in the back-office design. During this transition, some images may still show older versions. Thank you for your patience as we work to update all visuals to reflect these changes.

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