Adding Flavor to Your Search: A Recipe for Selection in Sitecore Content Hub

Welcome back to RestaurantOfMistakenOrders.com, where we continue to cook up delicious tech recipes. Today, we're adding a new ingredient to our Sitecore Content Hub dish: selection. Just as a chef carefully selects the best ingredients for a recipe, we'll use React and TypeScript to select and display the most relevant search results.

The Ingredients of Our Selection Recipe

In our digital kitchen, we're preparing a new function to add to our search functionality. This function is like a chef's special tool, allowing us to select specific items from our search results. Here's the recipe:

const selectionPoolIdentifier = "SelectionPool.Content";

const definitionNames = ["M.Asset"];

const selectionChanges = sqlDataResponse.map(item => {

return {

action: 'add' as 'add' | 'remove' | 'clear',

ids: [1334737,1334720], //example id's to be selected, or

use [item.id].map(id => Number(id)),

selectionPoolIdentifier,

definitionNames: definitionNames

};

});

applySelectionToSearch(context, selectionChanges);

export const applySelectionToSearch = (context: Context,

selectionChanges: { action: 'add' | 'remove' | 'clear', ids?: number[],

subPoolId?: number, selectionPoolIdentifier: string, definitionNames?: string[] }[]) => {

selectionChanges.forEach(change => {

const { action, ids, subPoolId, selectionPoolIdentifier, definitionNames } = change;

switch (action) {

case 'add':

context.api.selection.addToSelection(ids!, selectionPoolIdentifier, subPoolId);

console.log("ADD: call from function");

break;

case 'remove':

context.api.selection.removeFromSelection(ids!, selectionPoolIdentifier, subPoolId);

break;

case 'clear':

context.api.selection.clearSelection(selectionPoolIdentifier, subPoolId, definitionNames);

break;

default:

throw new Error('Invalid action type');

}

});

};

In this code, we're preparing our selection. We're specifying the selectionPoolIdentifier and definitionNames—think of these as the type of ingredients we're looking for. Then, we're mapping over our sqlDataResponse (our list of ingredients) and creating a new array of selectionChanges. Each item in this array represents a change we want to make to our selection.

The action property can be 'add', 'remove', or 'clear', representing whether we want to add an item to our selection, remove an item, or clear the selection entirely. The ids property is an array of the IDs of the items we want to add or remove.

Finally, we call the applySelectionToSearch function, passing in our context (the current state of our kitchen) and our selectionChanges (the changes we want to make to our dish).

The Cooking Process

Just as a chef carefully selects the best ingredients for a dish, our code selects the most relevant search results based on the user's input. When a user selects a filter, it's like choosing a specific ingredient for a dish. Our code then updates the search results accordingly, without the need for the page to refresh—much like a live cooking station!

The Final Touch

Just as a chef adds the final garnish to a dish before serving, our React and TypeScript code adds the final touch to the user experience by making search results more relevant and easier to digest. It's a seamless blend of technology and user satisfaction, ensuring that every visit to your Sitecore Content Hub is a five-star experience.

Conclusion: Bon Appétit!

With a pinch of React, a dash of TypeScript, and a sprinkle of creativity, we've cooked up a solution that's both efficient and enjoyable. Join us next time at RestaurantOfMistakenOrders.com for another tech recipe that's sure to satisfy your digital palate!