Content Hub Tip #24: Subscribe to change the event of the Search component

 

A while back, a client of mine asked if we could add a small button on the Assets page so that the designers could easily copy the Id of the Asset. I immediately started thinking about a solution. Within half an hour I could add a button to the Asset card, as seen in the image below. Then it was just a question of adding a click event, and voila. When hitting the button it copies over the Asset Id to the user's clipboard.

Job well done or so I thought. Before I deliver the functionality for testing, I like to ensure it works as expected. One of the most annoying problems I ran into, was when the number of results would be lowered and raised again. 

So what happened?

For each asset within the Search components, the Content Hub renders a card, as shown above here. The number of cards that are shown is limited by two factors, first, there is the page limit and the second is the search total. What happened was the following. When opening the Assets page, its initial load gave back over 1000+ search results. So the number of cards (aka assets) that were rendered on the page was equal to the page limit of 40. So 40 times an extra button was added to each card. Then when someone would start filtering the assets. This works still fine until the number of assets goes below the page limit. Then the DOM starts removing cards, thus removing also the extra button, from the Assets page. If I then would remove the filter, the cards are then recreated to match the page limit. Those newly created cards didn't have the extra copy button anymore.

In order to fix this, we need some sort of event to let the code know that the search result has been changed. So I started searching the Content Hub documentation for some clues if that was possible. I found the following page. This confirmed to me that it was possible to attach to events from a given component within the Content Hub. The only problem, it lacks the information on how it exactly works.

After a support ticket, I've got the answer to how it works!

How can you hook up an event?

This is actually a whole lot easier than I expected. Below here you can find out how to subscribe to a changed query event and a changed search result event. The most important part of this code is the id of the search component. In order for the code to work you need to set the proper context. You can easily find the id of your search component with the following steps:

1. Open the page, for example, the Assets page
2. Click on the Component you need the Id of
3. Copy over the Id from the URL
   https://[instancename].sitecoresandbox.cloud/en-us/admin/searchcomponent/9815
4. Replace the 9815 in the code below with your component id

$(document).ready(function() {
	options.contexts['9815ChangeQuery'].subscribe(function(val) {
		window.alert('change query');
	});

	options.contexts['9815SearchResult'].subscribe(function(val) {
		window.alert('search results');
	});
});

Happy codin'!