- Umbraco Search Result Item
- What is it?
- A Search Result Item is a custom component that controls how individual search results are displayed in the backoffice search results. It allows you to customize the visual presentation of search results for specific entity types - showing additional information, custom icons, badges, or any other visual elements.
- Documentation
- Always fetch the latest docs before implementing:
- Extension Types
- :
- https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-types
- Foundation
- :
- https://docs.umbraco.com/umbraco-cms/customizing/foundation
- Extension Registry
- :
- https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-registry
- Related Foundation Skills
- Umbraco Element
- For implementing the result item element
Reference skill:
umbraco-umbraco-element
Workflow
Fetch docs
- Use WebFetch on the URLs above
Ask questions
- What entity type? What additional info to display?
Generate files
- Create manifest + element based on latest docs
Explain
- Show what was created and how to test
Minimal Examples
Manifest (manifests.ts)
import
type
{
ManifestSearchResultItem
}
from
'@umbraco-cms/backoffice/extension-registry'
;
const
manifest
:
ManifestSearchResultItem
=
{
type
:
'searchResultItem'
,
alias
:
'My.SearchResultItem'
,
name
:
'My Search Result Item'
,
element
:
(
)
=>
import
(
'./my-search-result-item.element.js'
)
,
forEntityTypes
:
[
'my-entity'
]
,
}
;
export
const
manifests
=
[
manifest
]
;
Element Implementation (my-search-result-item.element.ts)
import
{
html
,
css
,
customElement
,
property
}
from
'@umbraco-cms/backoffice/external/lit'
;
import
{
UmbLitElement
}
from
'@umbraco-cms/backoffice/lit-element'
;
import
type
{
UmbSearchResultItemModel
}
from
'@umbraco-cms/backoffice/search'
;
@
customElement
(
'my-search-result-item'
)
export
class
MySearchResultItemElement
extends
UmbLitElement
{
@
property
(
{
type
:
Object
}
)
item
?
:
UmbSearchResultItemModel
;
render
(
)
{
if
(
!
this
.
item
)
return
html
; return html ` <umb-icon name= ${ this . item . icon ?? 'icon-document' }
;
}
static
styles
=
css
.result-item {
display: flex;
align-items: center;
gap: var(--uui-size-space-3);
padding: var(--uui-size-space-3);
text-decoration: none;
color: inherit;
}
.result-item:hover {
background: var(--uui-color-surface-alt);
}
.content {
display: flex;
flex-direction: column;
}
.name {
font-weight: 500;
}
.type {
font-size: var(--uui-type-small-size);
color: var(--uui-color-text-alt);
}
;
}
export
default
MySearchResultItemElement
;
declare
global
{
interface
HTMLElementTagNameMap
{
'my-search-result-item'
:
MySearchResultItemElement
;
}
}
Result Item with Extended Data
// If your search provider returns extended data
interface
MySearchResultModel
extends
UmbSearchResultItemModel
{
description
?
:
string
;
status
?
:
string
;
updatedDate
?
:
string
;
}
@
customElement
(
'my-search-result-item'
)
export
class
MySearchResultItemElement
extends
UmbLitElement
{
@
property
(
{
type
:
Object
}
)
item
?
:
MySearchResultModel
;
render
(
)
{
if
(
!
this
.
item
)
return
html
;
return
html
<umb-icon name=
${
this
.
item
.
icon
??
'icon-document'
}
` ; } } Result Item for Multiple Entity Types const manifest : ManifestSearchResultItem = { type : 'searchResultItem' , alias : 'My.SearchResultItem.Custom' , name : 'Custom Search Result Item' , element : ( ) => import ( './custom-result-item.element.js' ) , forEntityTypes : [ 'my-entity-a' , 'my-entity-b' , 'my-entity-c' ] , } ; Picker Search Result Item // For customizing results in picker search (content pickers, media pickers, etc.) import type { ManifestPickerSearchResultItem } from '@umbraco-cms/backoffice/extension-registry' ; const manifest : ManifestPickerSearchResultItem = { type : 'pickerSearchResultItem' , alias : 'My.PickerSearchResultItem' , name : 'My Picker Search Result' , element : ( ) => import ( './my-picker-result.element.js' ) , forEntityTypes : [ 'my-entity' ] , } ; Item Model Properties Property Description entityType The entity type identifier unique Unique identifier for the item name Display name icon Icon name (optional) href URL to navigate when clicked That's it! Always fetch fresh docs, keep examples minimal, generate complete working code.