close

Filter

loading table of contents...

Studio Developer Manual / Version 2404

Table Of Contents

9.8.2.2 Working with the Metadata Tree

When working with the metadata tree, you have two data structures to your convenience:

  • @coremedia/studio-client.main.editor-components/sdk/preview/metadata/MetadataTree: This data structure represents the whole tree and, for example, offers methods for accessing specific nodes (by their ID) or getting a list of all tree nodes (in breadth-first order).

  • @coremedia/studio-client.main.editor-components/sdk/preview/metadata/MetadataTreeNode: This data structure represents a single metadata tree node. It offers a range of methods like retrieving the parent or the children of a node, finding specific parent nodes upwards in the hierarchy or specific child nodes downwards in the hierarchy or accessing properties of a metadata tree node.

In the following you will find two examples of how to use the metadata tree. Suppose that the FTL templates on the CAE side have been prepared to include metadata about content. At different points throughout the FTL templates the code might look as follows:

...
<#assign contentMetadata = { "contentInfo": {
  "title": self.content.title,
  "keywords": self.content.keywords }
}/>

<div <@preview.metadata contentMetadata />>
  ...
</div>
...

For more details on how to include metadata in FTL templates, please refer to the documentation Section 6.5.2, “Preview (preview)” in Frontend Developer Manual.

In a preview content item there might be multiple of such content-related metadata chunks attached to different DOM nodes. Suppose you want to gather the titles of all the contents that are included in such metadata chunks. One way to gather these titles in an array is the following:

import MetadataTree from "@coremedia/studio-client.main.editor-components/sdk/preview/metadata/MetadataTree";
import MetadataTreeNode from "@coremedia/studio-client.main.editor-components/sdk/preview/metadata/MetadataTreeNode";

//...
const metadataService = null;
const metadataTree:MetadataTree = metadataService.getMetadataTree();
const result = [];
let nodesToProcess = metadataTree.getRoot() ? [metadataTree.getRoot()] : [];

let arrayIndex = 0;
while (arrayIndex < nodesToProcess.length) {
  const currentNode:MetadataTreeNode = nodesToProcess[arrayIndex];
  if (currentNode.getProperty("contentInfo")) {
    const title = currentNode.getProperty("contentInfo").title;
    result.push(title);
  }
  if (currentNode.getChildren()) {
    nodesToProcess = nodesToProcess.concat(currentNode.getChildren());
  }
  arrayIndex++;
}

In this example, the whole metadata tree is traversed in a breadth-first manner. For each node it has to be checked whether it has the contentInfo property as there might be metadata nodes with completely other information.

The code can be simplified considerably if a filtered metadata tree is retrieved:

const metadataService = ... ;
const metadataTree = metadataService.getMetadataTree(["contentInfo"]);
let result = [];
const metadataNodesList = metadataTree.getAsList();
metadataNodesList.forEach((node:MetadataTreeNode) => {
  result.push(node.getProperty("contentInfo").title);
});

In this case, the metadata tree is filtered on retrieval, namely for metadata nodes that contain the contentInfo property. Now it is sufficient to get all metadata tree nodes as an array, walk through it and gather the content titles.

Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.