> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.
# renderingContent
> Configuration for rendering the search interface
export const Setting = ({type, default: defaultValue, defaultNote, scope, min, max, formerly}) => {
const renderedDefault = defaultValue === '' ? '""' : defaultValue;
const renderedNote = defaultNote ? `(${defaultNote})` : '';
return
- Type:
{type}
- Default:
{renderedDefault}{renderedNote}
{min && - Min:
{min} }
{max && - Max:
{max} }
- Scope:
{scope}
{formerly && -
Deprecated name:
{formerly}
}
;
};
The `renderingContent` parameter defines how your search results and facets are ordered in the user interface.
This configuration is primarily used by InstantSearch to control widget behavior, display banners, and sort or hide facets.
You can set a default using [`setSettings`](/doc/rest-api/search/set-settings) and override it dynamically with [Rules](/doc/guides/managing-results/rules/rules-overview).
## Usage
* Use with [InstantSearch widgets](/doc/api-reference/widgets/js) like `dynamicWidgets`, `Hits`, or `InfiniteHits`.
* If you're not using InstantSearch, you can [manually build a UI with `renderingContent`](/doc/guides/building-search-ui/ui-and-ux-patterns/facet-display/js#build-the-ui-without-instantsearch).
* This property has a **2 MB limit**. Exceeding this size causes errors.
## Properties
Controls how facets and their values are ordered in the UI.
List of facet names in the desired display order.
Customizes the behavior of individual facet values.
List of facet values to hide from the UI.
Explicit order for specific facet values.
How to sort facet values not listed in `order`.
* `count`. Sort by decreasing facet value count.
* `alpha`. Sort alphabetically.
* `hidden`. Hide any unlisted values.
Target URL for a rule-based redirect.
Custom widget configuration returned from active rules.
Custom data for rendering banners defined in the Merchandising Studio.
## Usage
InstantSearch uses this property to define the UI through configuration—for example,
with the [`dynamicWidgets`](/doc/api-reference/widgets/dynamic-facets/js) widget.
If you're not using InstantSearch for your frontend,
you can [build a UI with `renderingContent`](/doc/guides/building-search-ui/ui-and-ux-patterns/facet-display/js#build-the-ui-without-instantsearch)
## Example
The following example snippet uses `renderingContent` to define how results are displayed:
* In dynamic widgets, `size` is always shown before `brand`.
* For the `brand` facet: the facet value `uniqlo` is always shown first, `muji` is never shown,
and other facet values are sorted by decreasing facet count.
* For the `size` facet: only the values `S`, `M`, and `L` are shown and other facet values are hidden.
```cs C# theme={"system"}
var response = await client.SetSettingsAsync(
"INDEX_NAME",
new IndexSettings
{
RenderingContent = new RenderingContent
{
FacetOrdering = new FacetOrdering
{
Facets = new Facets
{
Order = new List { "size", "brand" },
},
Values = new Dictionary
{
{
"brand",
new Value
{
Order = new List { "uniqlo" },
Hide = new List { "muji" },
SortRemainingBy = Enum.Parse("Count"),
}
},
{
"size",
new Value
{
Order = new List { "S", "M", "L" },
SortRemainingBy = Enum.Parse("Hidden"),
}
},
},
},
},
}
);
```
```dart Dart theme={"system"}
final response = await client.setSettings(
indexName: "INDEX_NAME",
indexSettings: IndexSettings(
renderingContent: RenderingContent(
facetOrdering: FacetOrdering(
facets: Facets(
order: [
"size",
"brand",
],
),
values: {
'brand': Value(
order: [
"uniqlo",
],
hide: [
"muji",
],
sortRemainingBy: SortRemainingBy.fromJson("count"),
),
'size': Value(
order: [
"S",
"M",
"L",
],
sortRemainingBy: SortRemainingBy.fromJson("hidden"),
),
},
),
),
),
);
```
```go Go theme={"system"}
response, err := client.SetSettings(client.NewApiSetSettingsRequest(
"INDEX_NAME",
search.NewEmptyIndexSettings().SetRenderingContent(
search.NewEmptyRenderingContent().SetFacetOrdering(
search.NewEmptyFacetOrdering().SetFacets(
search.NewEmptyFacets().SetOrder(
[]string{"size", "brand"})).SetValues(map[string]search.Value{"brand": *search.NewEmptyValue().SetOrder(
[]string{"uniqlo"}).SetHide(
[]string{"muji"}).SetSortRemainingBy(search.SortRemainingBy("count")), "size": *search.NewEmptyValue().SetOrder(
[]string{"S", "M", "L"}).SetSortRemainingBy(search.SortRemainingBy("hidden"))})))))
if err != nil {
// handle the eventual error
panic(err)
}
```
```java Java theme={"system"}
UpdatedAtResponse response = client.setSettings(
"INDEX_NAME",
new IndexSettings().setRenderingContent(
new RenderingContent().setFacetOrdering(
new FacetOrdering()
.setFacets(new Facets().setOrder(Arrays.asList("size", "brand")))
.setValues(
new HashMap() {
{
put(
"brand",
new Value().setOrder(Arrays.asList("uniqlo")).setHide(Arrays.asList("muji")).setSortRemainingBy(SortRemainingBy.COUNT)
);
put("size", new Value().setOrder(Arrays.asList("S", "M", "L")).setSortRemainingBy(SortRemainingBy.HIDDEN));
}
}
)
)
)
);
```
```js JavaScript theme={"system"}
const response = await client.setSettings({
indexName: 'theIndexName',
indexSettings: {
renderingContent: {
facetOrdering: {
facets: { order: ['size', 'brand'] },
values: {
brand: { order: ['uniqlo'], hide: ['muji'], sortRemainingBy: 'count' },
size: { order: ['S', 'M', 'L'], sortRemainingBy: 'hidden' },
},
},
},
},
});
```
```kotlin Kotlin theme={"system"}
var response =
client.setSettings(
indexName = "INDEX_NAME",
indexSettings =
IndexSettings(
renderingContent =
RenderingContent(
facetOrdering =
FacetOrdering(
facets = Facets(order = listOf("size", "brand")),
values =
mapOf(
"brand" to
Value(
order = listOf("uniqlo"),
hide = listOf("muji"),
sortRemainingBy = SortRemainingBy.entries.first { it.value == "count" },
),
"size" to
Value(
order = listOf("S", "M", "L"),
sortRemainingBy = SortRemainingBy.entries.first { it.value == "hidden" },
),
),
)
)
),
)
```
```php PHP theme={"system"}
$response = $client->setSettings(
'INDEX_NAME',
['renderingContent' => ['facetOrdering' => ['facets' => ['order' => [
'size',
'brand',
],
],
'values' => ['brand' => ['order' => [
'uniqlo',
],
'hide' => [
'muji',
],
'sortRemainingBy' => 'count',
],
'size' => ['order' => [
'S',
'M',
'L',
],
'sortRemainingBy' => 'hidden',
],
],
],
],
],
);
```
```python Python theme={"system"}
response = client.set_settings(
index_name="INDEX_NAME",
index_settings={
"renderingContent": {
"facetOrdering": {
"facets": {
"order": [
"size",
"brand",
],
},
"values": {
"brand": {
"order": [
"uniqlo",
],
"hide": [
"muji",
],
"sortRemainingBy": "count",
},
"size": {
"order": [
"S",
"M",
"L",
],
"sortRemainingBy": "hidden",
},
},
},
},
},
)
```
```ruby Ruby theme={"system"}
response = client.set_settings(
"INDEX_NAME",
Algolia::Search::IndexSettings.new(
rendering_content: Algolia::Search::RenderingContent.new(
facet_ordering: Algolia::Search::FacetOrdering.new(
facets: Algolia::Search::Facets.new(order: ["size", "brand"]),
values: {
brand: Algolia::Search::Value.new(order: ["uniqlo"], hide: ["muji"], sort_remaining_by: "count"),
size: Algolia::Search::Value.new(order: ["S", "M", "L"], sort_remaining_by: "hidden")
}
)
)
)
)
```
```scala Scala theme={"system"}
val response = Await.result(
client.setSettings(
indexName = "INDEX_NAME",
indexSettings = IndexSettings(
renderingContent = Some(
RenderingContent(
facetOrdering = Some(
FacetOrdering(
facets = Some(
Facets(
order = Some(Seq("size", "brand"))
)
),
values = Some(
Map(
"brand" -> Value(
order = Some(Seq("uniqlo")),
hide = Some(Seq("muji")),
sortRemainingBy = Some(SortRemainingBy.withName("count"))
),
"size" -> Value(
order = Some(Seq("S", "M", "L")),
sortRemainingBy = Some(SortRemainingBy.withName("hidden"))
)
)
)
)
)
)
)
)
),
Duration(100, "sec")
)
```
```swift Swift theme={"system"}
let response = try await client.setSettings(
indexName: "INDEX_NAME",
indexSettings: IndexSettings(renderingContent: SearchRenderingContent(facetOrdering: SearchFacetOrdering(
facets: SearchFacets(order: ["size", "brand"]),
values: [
"brand": SearchValue(
order: ["uniqlo"],
sortRemainingBy: SearchSortRemainingBy.count,
hide: ["muji"]
),
"size": SearchValue(order: ["S", "M", "L"], sortRemainingBy: SearchSortRemainingBy.hidden),
]
)))
)
```
```cs C# theme={"system"}
var settings = new IndexSettings
{
RenderingContent = new RenderingContent
{
FacetOrdering = new FacetOrdering
{
Facets = new FacetsOrder
{
Order = new List { "size", "brand" }
},
Values = new Dictionary
{
{
"brand",
new FacetValuesOrder
{
Order = new List { "uniqlo" },
Hide = new List { "muji" },
SortRemainingBy = "count"
}
},
{
"size",
new FacetValuesOrder
{
Order = new List { "S", "M", "L" },
SortRemainingBy = "hidden"
}
}
}
}
}
};
index.SetSettings(settings);
// Asynchronous
await index.SetSettingsAsync(settings);
```
```go Go theme={"system"}
renderingContent := search.RenderingContent{FacetOrdering: &search.FacetOrdering{
Facets: &search.FacetsOrder{Order: []string{"size", "brand"}},
Values: map[string]search.FacetValuesOrder{
"brand": search.NewFacetValuesOrder([]string{"Uniqlo"}, []string{"Muji"}, search.Count),
"size": search.NewFacetValuesOrder([]string{"S", "M", "L"}, search.Hidden),
},
}}
res, err := index.SetSettings(search.Settings{
RenderingContent: &renderingContent,
})
```
```java Java theme={"system"}
FacetsOrder facetsOrder = new FacetsOrder(Arrays.asList("size", "brand"));
Map values = new LinkedHashMap<>();
values.put("brand", new FacetValuesOrder(Collections.singletonList("uniqlo"), Collections.singletonList("muji"), "count"));
values.put("size", new FacetValuesOrder(Arrays.asList("S", "M", "L"), "hidden"));
FacetOrdering facetOrdering = new FacetOrdering(facetsOrder, values);
RenderingContent renderingContent = new RenderingContent(facetOrdering);
// Synchronous
index.setSettings(new IndexSettings().setRenderingContent(renderingContent));
// Asynchronous
index.setSettingsAsync(new IndexSettings().setRenderingContent(renderingContent));
```
```js JavaScript theme={"system"}
index
.setSettings({
renderingContent: {
facetOrdering: {
facets: {
order: ["size", "brand"],
},
values: {
brand: {
order: ["uniqlo"],
hide: ["muji"],
sortRemainingBy: "count",
},
size: {
order: ["S", "M", "L"],
sortRemainingBy: "hidden",
},
},
},
},
})
.then(() => {
// done
});
```
```kotlin Kotlin theme={"system"}
val facetOrdering = FacetOrdering(
facets = FacetsOrder(order = listOf("size", "brand")),
values = mapOf(
Attribute("brand") to FacetValuesOrder
order = listOf("uniqlo"),
hide = listOf("muji"),
sortRemainingBy = SortRule.Count),
Attribute("size") to FacetValuesOrder(
order = listOf("S", "M", "L"),
sortRemainingBy = SortRule.Hidden
)
)
)
val renderingContent = RenderingContent(facetOrdering)
val settings = Settings(renderingContent = renderingContent)
index.setSettings(settings)
```
```php PHP theme={"system"}
$index->setSettings([
'renderingContent' => [
'facetOrdering' => [
'facets' => [
'order' => ['size', 'brand']
],
'values' => [
'brand'=> [
'order' => ['uniqlo'],
'hide' => ['muji'],
'sortRemainingBy' => 'count'
],
'size'=> [
'order' => ['S', 'M', 'L'],
'sortRemainingBy' => 'hidden'
],
]
]
]
]);
```
```python Python theme={"system"}
index.setSettings(
{
renderingContent: {
facetOrdering: {
facets: {
order: ["size", "brand"],
values: {
brand: {
order: ["uniqlo"],
hide: ["muji"],
sortRemainingBy: "count",
},
size: {
order: ["S", "M", "L"],
sortRemainingBy: "hidden",
},
},
},
},
},
}
)
```
```ruby Ruby theme={"system"}
index.set_settings(
{
renderingContent: {
facetOrdering: {
facets: {
order: ["size", "brand"]
},
values: {
brand: {
order: ["uniqlo"],
hide: ["muji"],
sortRemainingBy: "count"
},
size: {
order: ["S", "M", "L"],
sortRemainingBy: "hidden"
}
}
}
}
}
)
```
```scala Scala theme={"system"}
val facetOrdering = FacetOrdering(
facets = FacetsOrder(order = Seq("size", "brand")),
values = Map(
"brand" -> FacetValuesOrder(
order = Seq("uniqlo"),
hide = Seq("muji"),
sortRemainingBy = Some(SortRule.count)
),
"size" -> FacetValuesOrder(
order = Seq("S", "M", "L"),
sortRemainingBy = Some(SortRule.hidden)
)
)
)
val renderingContent = RenderingContent(facetOrdering = Some(facetOrdering))
client.execute {
setSettings of "myIndex" `with` IndexSettings(renderingContent = Some(renderingContent))
}
```
```swift Swift theme={"system"}
let facetOrdering = FacetOrdering(facets: FacetsOrder(order: ["size", "brand"]),
values: [
"brand": FacetValuesOrder(
order: ["uniqlo"],
hide: ["muji"],
sortRemainingBy: .count
),
"size": FacetValuesOrder(
order: ["S", "M", "L"],
sortRemainingBy: .hidden
)
])
let renderingContent = RenderingContent(facetOrdering: facetOrdering)
let settings = Settings()
.set(\.renderingContent, to: renderingContent)
index.setSettings(settings) { result in
if case .success(let response) = result {
print("Response: \(response)")
}
}
```