Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
An extension to show content items that are linked to the current item.
<html>
<head>
<link href="https://contentful.github.io/ui-extensions-sdk/cf-extension.css" rel="stylesheet">
<script src="https://contentful.github.io/ui-extensions-sdk/cf-extension-api.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.1/mustache.min.js"></script>
<style>
body {
margin: 0;
color: #8091a5 !important;
overflow: hidden;
}
p {
margin-top: 0;
margin-bottom: 1em; }
ul {
padding-left: 2em;
}
</style>
</head>
<body>
<div id="content"></div>
<script id="template" type="x-tmpl-mustache">
<p>
There are {{terms.length}} term(s) linked to this chapter.
</p>
<ul>
{{#terms}}
<li><a title="{{fields.synonyms.en-US}}" href="/spaces/{{sys.space.sys.id}}/entries/{{sys.id}}" target="_blank">{{fields.title.en-US}}</a></li>
{{/terms}}
</ul>
</script>
<script>
window.contentfulExtension.init(function (extension) {
extension.space.getEntries({
'content_type': 'term',
'order': 'fields.title',
'fields.chapters.sys.id': extension.entry.getSys().id,
'locale': 'en-US'
}).then(function(results){
console.log(results.items[0]);
var rendered = Mustache.render(document.getElementById('template').innerHTML, {terms: results.items});
document.getElementById('content').innerHTML = rendered;
extension.window.startAutoResizer();
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment