Sitecore Content Hub is a really powerful solution for any organisation. If offers endless extension possibilities and when you build your own entities a lot of flexibility.

Recently on a project I’m working on we built our own entity and required functionality to hide an ‘Add New’ button on a creation component if an asset relation was added.

We were working with Sitecore Content Publisher templates and only wanted the user to add a single template. We also wanted the button to show again if the template on the relation was removed.

In a different post I mentioned realtime events which could be used here however we wanted to link up to the search component itself.

---

First attempt at a solution

The first version used a JavaScript interval to keep clicking the refresh button on the search component. Then after querying the entity updating the visibility of the button.

This was not the best way to accomplish the task as the client code was executed every few seconds. Also the code keeps executing until the page is closed or navigated away from.

Better solution

We needed to find a better solution and after some searching found the following page on external page component events. This has all the different events and after some coding got a solution.

You need to subscribe to 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 identifier. You can easily find the ID of your search component with the following steps:

1. Open the page, that has the search component on
2. Click on the search component you need the ID of
3. Copy over the ID from the URL – https://%5Binstancename%5D.stylelabs.io/en-us/admin/searchcomponent/1234
4. Replace the 1234 in the code below with your component ID

contexts[1234SearchResult].subscribe((val) => {
        if (val && val.totalItemCount !== undefined) {
            const selector = ".creation-component a[title='Select template']";
            if (val.totalItemCount == 0) {
                hideOrShowButton(selector, false);
                $('.m-selection-component').children().each(function (el) {
                    $(this).hide();
                });
            }
            else {
                hideOrShowButton(selector, true);
            }
        }

---

I hope this offers something to anyone trying to work with events in Content Hub

Happy coding!