Source code - Fluid Topics - Latest

Conditional Facets in the Search Page

Category
Technical Notes
Audience
public
Version
Latest
  1. Go to the Portal menu and open the Theme section.

  2. Under Custom LESS, copy and paste the following CSS style:

    /* Hide a facet for everyone but the admins */
    [data-ft-facet-id='audience_type'] {
      display: none;
    }
    
  3. Go to the Portal menu and open the Custom JavaScript section.

  4. Copy and paste the following script:

    // Hide a facet for everyone but the admins
    document.addEventListener('ft:pageopening', hideFacetOnSearchPage);
    
    function hideFacetOnSearchPage() {
      // data-ft-facet-id to hide
      const facetId = 'audience_type';
    
      // Check if you are on the search page
      if (!window.location.pathname.includes('/search/all')) {
        return;
      }
    
      // Check if you have the rights to see the facet
      let user = FluidTopicsAuthenticationService.getUser();
      let userHasRightsToSeeFacet = user.roles.indexOf('ADMIN') >= 0 || user.roles.indexOf('CONTENT_PUBLISHER') >= 0;
      if (!userHasRightsToSeeFacet) {
        return;
      }
    
      // Select the node that will be observed for mutations
      const facetsContainer = document.querySelector('.facets');
      if (!facetsContainer || facetsContainer.classList.contains('observed')) {
        return;
      }
    
      // Options for the observer (which mutations to observe)
      const config = { attributes: false, childList: true, subtree: true };
    
      // Callback function to execute when mutations are observed
      function displayFacet() {
        let facet = facetsContainer.querySelector(`[data-ft-facet-id='${facetId}']`);
        if (!facet) {
          return;
        }
        facet.style.display = 'block';
      }
    
      // Create an observer instance linked to the callback function
      const observer = new MutationObserver(displayFacet);
    
      // Start observing the target node for configured mutations
      facetsContainer.classList.add('observed');
      observer.observe(facetsContainer, config);
    
      // Display facet once after adding observer
      displayFacet();
    }
    
  5. Save.

Once saved, the Audience facet is only visible to ADMIN and CONTENT_PUBLISHER users.