Get HTML sections - Fluid Topics

The Get the content of an HTML section retrieves the content of a section in HTML format:

/api/khub/section/html?filter_1=value_1

Where:

filter is any metadata key that differentiates the section. Use as many metadata keys as needed to define unique content.

The following line shows an example of a Get the content of an HTML section web service call:

https://myportal.fluidtopics.net/api/khub/section/html?ft:baseId=12345&version=3.0&docType=Reference%20Guide

More information about using metadata in web service calls to target and filter content is available in Deep links.

An HTML section can be:

a short, structured publication (book or article)
a topic and its children

The Get the content of an HTML section web service performs a search using all the query parameters as filters. It then takes the top result to define the returned section (either a map or a topic).

The following lines show an example of the Get the content of an HTML section web service implementation in JavaScript.

<body>
    <input type="text" id="metaInput" placeholder="Metadata key">
    <input type="text" id="valueInput" placeholder="Value of metadata key">

    <button onclick="getTopic()">Fetch HTML</button>

    <p id="content"></p>

    <script>
        function getTopic() {
            var metaValue = document.getElementById('metaInput').value;
            var valueInput = document.getElementById('valueInput').value;

            // Fetch content from API with dynamic values
            fetch(`https://$TENANT_URL/api/khub/section/html?${metaValue}=${valueInput}`, {
                method: 'GET',
                headers: {
                    'Authorization': 'Basic XXX',
                }
            })
            .then(response => response.text())
            .then(data => {
                document.getElementById('content').innerHTML = data;
            })
            .catch(error => console.error('Error fetching data:', error));
        }
    </script>
</body>

Use case

An integrator wants to display content available in Fluid Topics in a third-party integration. The following lines show the OleanDor Maintenance Guide FTML document published to Fluid Topics:

<?xml version="1.0" encoding="UTF-8"?>
<ft:map xmlns:ft="http://ref.fluidtopics.com/v3/ft#" ft:editorialType="book" ft:lang="en-US" ft:originId="maintenance" ft:title="Maintenance Guide">
    <ft:toc>
        <ft:node ft:title="Find the anomaly" href="step1.html" type="topics">
            <ft:metas>
                <ft:meta key="procedure" type="stringTree">annual checkup</ft:meta>
                <ft:meta key="step" type="stringTree">1</ft:meta>
            </ft:metas>
        </ft:node>
        <ft:node ft:originId="Replace" ft:title="Replace the piece">
            <ft:metas>
                <ft:meta key="procedure" type="stringTree">annual checkup</ft:meta>
                <ft:meta key="step" type="stringTree">2</ft:meta>
            </ft:metas>
        </ft:node>
        <ft:node ft:title="Remove broken part" href="step2_1.html" type="topics">
            <ft:metas>
                <ft:meta key="procedure" type="stringTree">annual checkup</ft:meta>
                <ft:meta key="step" type="stringTree">2.1</ft:meta>
            </ft:metas>
        </ft:node>
        <ft:node ft:title="Put new one in" href="step2_2.html" type="topics">
            <ft:metas>
                <ft:meta key="procedure" type="stringTree">annual checkup</ft:meta>
                <ft:meta key="step" type="stringTree">2.2</ft:meta>
            </ft:metas>
        </ft:node>
        <ft:node ft:title="Checking" href="step3.html" type="topics">
            <ft:metas>
                <ft:meta key="procedure" type="stringTree">annual checkup</ft:meta>
                <ft:meta key="step" type="stringTree">3</ft:meta>
            </ft:metas>
        </ft:node>
    </ft:toc>
</ft:map>

In the Maintenance Guide document, topics are organized as follows:

Maintenance Guide
├── step_1
├── step_2
│   ├── step_2_1
│   └── step_2_2
├── step_3
└── step_4

To retrieve content about Step 1 in HTML format, the integrator sends the following API call:

https://my.fluidtopics.com/OleanDor/api/khub/section/html?step=1

The web service returns the following HTML content:

<section class="ft-section">
    <div id="IlViXXkG5Lw14EK_9tkL8w" class="ft-topic">
        <h1 class="ft-topic-title ft-toc-level-1">Find the anomaly</h1>
        <article class="ft-topic-body">
            <div class="content-locale-en-US content-locale-en">
                <div>
                    <p>Possible problems</p>
                    <ul>
                        <li>Abnormal noise</li>
                        <li>Random rotator stop</li>
                    </ul>
                </div>
            </div>
        </article>
    </div>
</section>

Once retrieved, the HTML section is displayed in a series of pop-ups to guide users through the steps of replacing a part as follows:

Steps to guide users

Get HTML sections - Fluid Topics - Latest

Integrate the Fluid Topics API