Source code - Fluid Topics - Latest

The following example relies on:

• The Get a topic's content web service
• The Map variable (contains information about the current open map).
• The Topic variable (contains information about the current open topic).

To add the same Custom component:

1. Open the Topic templates designer, and open a page.
2. Add a Conditional visibility component.

3. In the component's Settings, add the following rule:

   Field	Value
   Apply when matching	At least one rule
   Rule condition	Document metadata
   Operator	Contain
   Metadata key	ft:isUnstructured
   Metadata value	false

   This rule hides the component for content for which a Markdown version is not available.

4. Add a Custom component inside the Conditional visibility component, and open it.

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

   <button>
     <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="m640-360 120-120-42-43-48 48v-125h-60v125l-48-48-42 43 120 120ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-480H160v480Zm0 0v-480 480Zm60-120h60v-180h40v120h60v-120h40v180h60v-200q0-17-11.5-28.5T440-600H260q-17 0-28.5 11.5T220-560v200Z"/></svg>
   </button>
   

   The SVG is a Markdown logo.

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

   button {
     border: 0;
     background-color: transparent;
     cursor: pointer;
     margin: 10px;
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background-color 200ms linear;
     border-radius: 50%;
   }
   
   button:hover {
     background-color: #eeeeef;
   }
   

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

   async function displayTopicMarkdown() {
     try {
       FTAPI = await new window.fluidtopics.FluidTopicsApi();
       FTAPI["ftCallingApp"] = "custom-component-topic-markdown-source";
       const url = `/api/khub/maps/${map.id}/topics/${topic.contentId}/content?format=markdown`;
       window.open(url, "_blank");
     } catch (error) {
       console.error("Error opening URL:", error);
     }
   }
   
   const button = document.querySelector("button");
   if (button) {
     button.addEventListener("click", displayTopicMarkdown);
   }
   

   Custom components that call the Fluid Topics API must include an ftCallingApp header. To exclude these API calls from billing, set the ftCallingApp value to a name starting with custom-component.

8. Save the component.

9. Save and publish the page.