Custom quick search (configuration)

Custom quick search is an element of a grid, detail, or dashboard layout block that adds customizable search box instead of the standard embedded search box. As this custom quick search is part of a layout block, it can be located anywhere on a page. Custom quick search can be configured to search data in multiple grids using a single search box. However, custom quick search cannot search in the parent grid – only in grids within the same layout block or child layout blocks.

If a custom quick search is added, it replaces the standard search box on the grid pages where data is searchable through the custom quick search.

To add custom quick search to a page

  1. In CMS, go to Contents and expand the node of a grid page, detail page, or dashboard (home) depending on where you want to add custom quick search.
  2. Select the icon next to the corresponding layout block node ( grid, detail, or home dashboard). Alternatively, select and hold (or right-click) the node, and then select Create.

    Tip

    The layout block settings define where your custom quick search will be located on the page. If you want your custom quick search to look tidy, above all the grid(s) where data is searchable, we recommend creating a child layout block for the grids that will be searchable through the custom quick search. In this scenario, if you are going to use the View type layout block setting for these child grids (for example, to organize them into tabs), leave the View type layout block setting blank in the layout block where custom quick is added make the custom quick search always visible while you navigate through the related grids.
  3. Select Custom Quick Search.
  4. On the header, enter the custom quick search name that will be used to identify it in CMS.
  5. On the General tab, fill in the general settings:
    1. Title - Specifies the title of the custom quick search box that will be displayed on the grid page if specified. Specifying the title is optional.
    2. Subtitle - Specifies the subtitle of the custom quick search box that will be displayed on the page if specified. Specifying the subtitle is optional.
    3. Icon - Specifies the image that will be displayed in front of the title if specified. Adding an icon is optional. When choosing an icon, select any icon library set except umbraco-icon because icons from this icon library are not meant to be used with front end elements – this may cause bugs and visual glitches.
    4. Width settings - Specifies the adaptive grid width settings for the custom quick search box per device. The width is automatically adjusted depending on the device the page is opened from.
    5. Hide element - This setting hides the custom quick search box from the page. It can be configured per member group. Select one or several member groups, for which this custom quick search box will be hidden. Alternatively, you can select the ~All~ check box to hide it for all member groups (without the necessity to select every member group's check box) or select the Hide element check box to have all member groups selected at once.
    6. Background color - Specifies the color that will be used as background of this custom quick search box.
    7. Background image - Specifies the image that will be displayed in the background of this custom quick search box.
    8. Description - Specifies a description of this custom quick search box.
    9. Navigate-to page - Specifies the portal page that will be displayed when the portal member edits a record. For a custom quick search box, filling in this setting is not required.
    10. Content-from page - Specifies the portal page that will be displayed instead of the created page. The path on the address bar will be that of the original page. Use this setting only if you want to redirect the member to another existing portal page. Select Add to add a page that will be displayed instead of the source page. For a custom quick search box, filling in this setting is not required.
    11. Redirect-to page - Specifies the portal page that will be displayed instead of the created page. The path on the address bar will be that of the target page. Use this setting only if you want to redirect the member to another existing portal page. Select Add to add a page that will be displayed instead of the source page. For a custom quick search box, filling in this setting is not required.
  6. On the Custom quick search tab, fill in the custom quick search-related settings:
    1. Placeholder text - Specifies text that will be shown in the custom quick search box untilt the member starts typing a search query.
    2. Related grids - Specifies related grids in which records will be searchable using this custom quick search. You can only set up related grid within this same page, such as grids in other layout blocks of this page. Child grids in relation to this grid are searchable by default. If there are no related grids selected, quick search will work for all grids on the page (within the same layout block or lower, but not in the parent grid(s) if any). Therefore, configuring related grids makes sense only if you want to make data searchle in some of the related grids (not all) through custom quick search; otherwise, you don't have to configure related grids. Make sure that related grids are created within the same or (recommended) a separate childlayout block. To add a related grid, select the icon.
      1. Grid - Specifies a grid in which records will be searchable using this custom quick search. You can only select a grid that is within the same or child layout block.
      2. Grid title - Specifies the title of a grid in which records will be searchable using this custom quick search. This title is shown only in CMS for user convenience: there can be a lot of related grids, and using any logical custom name for the user would make it easier to identify a grid during the setup process.

        Note

        The related grids settings are not automatically cleared if the related grid pages are deleted; these settings need to be manually updated.
  7. Select Save and publish to save the changes and publish them on the front end. Optionally, if you were editing the page, you can select Save and preview to preview how the page will look like on the front end.

Now you can use custom quick search on the configured page to search in all related grids at once.