Source code - Fluid Topics - Latest

The following example relies on:

• The User variable (contains information about the current user).
• The List searches web service.

To add the same Custom component:

1. In the HTML panel, copy and paste the following:

   <strong class="title">Your saved searches:</strong>
   <div class="table-searches">
     <p class="unauthenticated">You are unauthenticated, select <strong>Sign In</strong> to see your saved searches.</p>
     <p class="no_saved_search">You have no saved search, open a topic and select the <strong>Searches</strong> action to create your first saved search.</p>
   </div>
   

2. In the CSS panel, copy and paste the following:

   .title {
     text-align: center;
     display: block;
     font-size: 20px;
   }
   
   li {
     list-style-type: none;
     margin: 0;
     padding: 0;
   }
   
   a {
     color: #60ADBD;
   }
   
   a:visited {
     color: #27545D;
   }
   
   li p {
   font-size: 14px;
   }
   

3. In the JS panel, copy and paste the following:

   let FTAPI = null;
   async function main() {
     let element = document.querySelector(".table-searches");
     let unauthenticated = document.querySelector(".unauthenticated");
     let no_saved_search = document.querySelector(".no_saved_search");
   
     // If the user is unauthenticated
     if (user.isAuthenticated === false) {
       unauthenticated.style.display = "block";
       no_saved_search.style.display = "none";
       return;
     }
   
     FTAPI = await new window.fluidtopics.FluidTopicsApi();
     FTAPI["FtCallingApp"] = "custom-component-XXX";  // Change XXX to a more descriptive name
     let saved_searches = await FTAPI.get(`/api/users/${user.profile.id}/searches`);
   
     // If the user is authenticated, but has no saved search
     if (saved_searches.length === 0) {
       unauthenticated.style.display = "none";
       no_saved_search.style.display = "block";
       return;
     }
   
     // Create an unordered list
     let ul = document.createElement("ul");
   
     // Iterate over saved searches to create list items with icons and links
     saved_searches.forEach((saved_search) => {
       console.log(saved_search);
       let li = document.createElement("li");
   
       // Create the <ft-icon> element
       let ftIcon = document.createElement("ft-icon");
       ftIcon.setAttribute("variant", "fluid-topics");
       ftIcon.setAttribute(
         "style",
         `--ft-icon-font-size: 35px; color: ${saved_search.color};`
       ); // Set color dynamically
       ftIcon.setAttribute("value", "SEARCH");
       li.appendChild(ftIcon);
   
       // Create the link (a) element
       let a = document.createElement("a");
       a.textContent = saved_search.title;
       a.href = FluidTopicsUrlService.searchRequestToUrl(saved_search.searchRequest);
       a.target = "_blank"; // Open link in a new tab
   
       // Append the link to the list item
       li.appendChild(a);
   
       // Create a <p> element for the saved search's description
       if (saved_search.description) {
         // Check if the description exists
         let p = document.createElement("p");
         p.textContent = saved_search.description; // Set text content to the saved search's description
   
         // Append the description to the list item
         li.appendChild(p);
       }
   
       // Append the list item to the unordered list
       ul.appendChild(li);
     });
   
     // Clear the content of the element and append the unordered list
     element.innerHTML = "";
     element.appendChild(ul);
   }
   main();
   

4. Save the component.

5. Save and publish the page.