Skip to Main Content

CSS

With CSS, you can make the SearchBox look like you prefer. The following CSS was used to achieve the sleek design on this page.

#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 Template

SearchBox Pro comes with three result template options: "Default", "Custom", and "Search configuration".

Default

The default template comes with a neutral-looking style. You can enable and disable column mappings, like deciding if you want to display icons, subheadings, etc. You can see it and remix it in the APEX Template Studio.

Custom Template

Try it out

You can provide your own template for the search results. In this example, the following is used:

<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.

These are the placeholders available from your search configuration:

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

Search config template

Try it out

Inside a search configuration under "Icon and Display" there is a field called Default Result Row Template. This field will be used to show the results. In this example, the following templates are used:

Projects

<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.

Tasks

<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.