It is possible to retrieve the HTML content of a given topic with its original styling using the Get a topic's styled content web service:
/api/khub/topic/styled-content?$FILTER_1=value_1&...&$FILTER_N=value_n
Where:
/$FILTER_1
is any metadata key-value pair that differentiates the topic from other topics./$FILTER_N
represents however many other metadata key-value pairs are needed to target a unique topic. See Create deep links for examples of metadata pairs.
- Cross-document links and internal links pointing outside of the topic are disabled in the response (
data-ft-warning="excluded-from-rendering"
). Fluid Topics provides metadata such asdata-clusterid
ordata-contentid
which can allow users or programs to access the target of a link using Deep links. - The topic's children are not included in the response.
The following line shows an example of how to call this web service:
https://myportal.fluidtopics.net/api/khub/topic/styled-content?ft:baseId=12345&version=3.0&docType=Reference%20Guide
The following lines show an example of implementing the web service in JavaScript:
getTopic(meta, value) {
fetch('https://<host>/<tenantId>/api/khub/topic/styled-content?'
meta '=' + value, {
method: 'get',
headers: {
'Content-Type': 'text/html'
}
})
.then(
response => response.text(),
error => console.log('failed to fetch html', error)
)
.then(
/* display the html wherever you want */
html => alert(html),
error => console.log('failed to fetch html', error)
)
}
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 ft:editorialType="book" ft:lang="en-US" ft:originId="maintenance" ft:title="Maintenance Guide" xmlns:ft="http://ref.fluidtopics.com/v3/ft#">
<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: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 document, topics are organized as follows:
Maintenance Guide
├── step_1
├── step_2
├── step_3
└── step_4
To retrieve content about Step 1 in HTML format, the integrator sends the following request:
https://my.fluidtopics.com/OleanDor/api/khub/topic/styled-content?step=1
The request returns the following HTML content:
<!doctype html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title> annual checkup </title>
<link href="https://my.fluidtopics.com/OleanDor/stylesheets/customizations.css?v=f02cb8db" rel="stylesheet">
</head>
<body>
<section class="title">
<div class="content-locale-en-US content-locale-en depth-1" lang="en-US">
<h1> annual checkup </h1>
</div>
</section>
<section class="topic">
<div class="content-locale-en-US content-locale-en depth-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla molestie pellentesque porta. Sed accumsan turpis eget condimentum auctor. Integer aliquam tempor blandit. Maecenas eu euismod nunc. Quisque posuere vitae nulla vel blandit. Sed mattis eros eget tincidunt gravida. Vestibulum tincidunt, metus non facilisis fermentum, enim nunc commodo lorem, vel dapibus sapien nulla sit amet eros. Donec ultricies non metus at ullamcorper. Nulla imperdiet consectetur molestie.
</div>
</section>
</body>
</html>
When displayed in a UI, the HTML content is styled.