Customization

Modes

The SeachBar item comes with two modes: item and spotlight.

• In item mode there is always a visible search input wherever you place the item. While typing the results will appear in a floating pane below the item.

• In spotlight mode a button is rendered. Upon clicking it a modal dialog will appear with the search input and the results.

• As the item mode might not be suitable for smaller screens, there is a responsive mode where the mode switches from item to spotlight at a specific width.

Look and Feel

Attributes

You can change the usual item attributes to change the appearance of the searchbox. Here is a list of the most important ones:

• Icon: The icon that is displayed in the searchbox.
• Placeholder: The placeholder text in the search input.
• Label: The label of the searchbox. (there is also a custom attribute to hide the label)
• Template: Optional/Above/Floating
• Template Attributes: Size, margins, etc.

CSS

You can customize the look and feel of the searchbar via CSS. Here is an example that utilizes CSS variables:

Example:

#P0_GLOBAL_SEARCH_wc {
    /* increase searchbar width */
    --uc-sbp-item-width: 20rem;
    /* change sizes of the popover */
    --uc-sbp-item-popover-width: 700px;
    --uc-sbp-item-popover-height: 500px;

    /* make the input rounded */
    --uc-sbp-item-border-radius:  99px;
    /* change colors */
    --uc-sbp-item-color: white;
    --uc-sbp-item-background-color: rgb(255 255 255 / 25%);
    --uc-sbp-item-icon-color: white;

    /* increase spacing left to the searchbar */
    margin-left: 2rem;
}

/* the item ID points to the input element
   in item mode it has the class "is-item" and "is-spotlight" for the other mode
*/
#P0_GLOBAL_SEARCH.is-item {
    /* remove border */
    border: none;
    /* increase spacing to the search icon */
    padding-left: 2.3rem;
}

/* white outline on focus
*/
#P0_GLOBAL_SEARCH.is-item:focus {
    outline: 1.5px solid white;
}

#P0_GLOBAL_SEARCH_wc .apex-item-icon {
    /* move search icon more into the input */
    margin-right: -4px;
}

Result:

Search Results

You have three ways of customizing what information is displayed in the search results and how it looks via templates.

Default Template

SearchBox Pro comes with a default template with a neutral look that works with any APEX theme style.

As search configurations come with plenty of placeholders that you might not want to display in the searchbox, you can enable/disable any of these slots:

You can of course add custom CSS rules to modify the look of the default template.

You can inspect or modify the default template in the APEX Template Studio.

Custom Template

If you want to have full control over the look of the search results, you can create a custom template. A good starting point can be to fork the default template and modify it to your needs in the APEX Template Studio. Don't forget to globally load the CSS styles for the template.

Here is a list of all the placeholders you can use:

• PK1
• PK2
• TITLE
• SUBTITLE
• DESCRIPTION
• ICON
• LINK
• SCORE
• BADGE
• LAST_MODIFIED
• CUSTOM_01
• CUSTOM_02
• CUSTOM_03
• CONFIG_LABEL (name of the search config)

Example:

<div class="u-flex u-align-items-center">
  <div class="margin-right-sm">
    {case CONFIG_LABEL /}
    {when Tasks /}
    <span class="fa fa-flag-pennant" style="margin-top: 2px; padding: 6px; background: var(--u-color-4); color: var(--u-color-4-contrast); border-radius: 0.5rem;" aria-hidden="true"></span>
    {otherwise /}
    <span class="fa fa-apex" style="margin-top: 2px; padding: 6px; background: var(--u-color-10); color: var(--u-color-10-contrast); border-radius: 0.5rem;" aria-hidden="true"></span>
    {endcase/}
  </div>
  <div class="u-flex-grow-1">
    <div>#TITLE#</div>
    {if DESCRIPTION /}<div class="u-lineclamp-1" style="font-size: 0.65rem; color: var(--ut-component-text-muted-color);">#DESCRIPTION#</div>{endif /}
  </div>
</div>

View/modify example custom template in APEX Template Studio.

Use search configuration template

In search configurations there already is a field to define your own template. In this setting the searchbox will just reuse this template. If you have multiple search configurations assigned to the searchbox item, each result will use the template of the correlating search configuration.

Example:

Projects template:

<div class="u-flex u-align-items-center">
    <div class="margin-right-sm">
      <span class="fa fa-search" style="margin-top: 2px; color: #94a3b8;" aria-hidden="true"></span>
    </div>
    <div class="u-flex-grow-1">
      &PROJECT.
    </div>
    <div class="margin-left-md" style="font-size: 0.5rem; border: 1px solid #cbd5e1; padding: 2px; color: #64748b; border-radius: 2px;">P</div>
</div>

View/modify example project template in APEX Template Studio.

Note that you reference the column names and not the position names in the search configuration template.

Task template:

<div class="u-flex u-align-items-center">
    <div class="margin-right-md" style="font-size: 0.5rem; border: 1px solid #cbd5e1; padding: 2px; color: #64748b; border-radius: 2px;">T</div>
    <div class="u-flex-grow-1">
      <div>&TASK_NAME.</div>
      <div style="color: #475569; font-size: 0.6rem;">&PROJECT.</div>
    </div>
</div>

View/modify example task template in APEX Template Studio.