Summary Extension Example
This example simply displays some example text plus a link to the CUE content editor tab for the content item represented by the summary:
class MyAdditionalEditor extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = ` <style> :host { margin: 0; padding: 0; width: 100%; display: block; } .wc-additional-editor-container { padding: 10px; height: 100px; overflow: hidden; } .wc-additional-editor-group { with: 100%; height: auto; margin-bottom: 10px; font-family: "Hind", Helvetica Neue, Helvetica, Arial, sans-serif; color: #797878; font-size: 16px; } .wc-additional-editor-item-name { display: block; font-size: 12px; } .wc-additional-editor-item-content { display: block; font-size: 16px; } a.wc-additional-editor-link:link, a.wc-additional-editor-link:visited { text-decoration: none; color: #457dce; } a.wc-additional-editor-link:hover { text-decoration: underline; } </style> <div class="wc-additional-editor-container"> <div class="wc-additional-editor-group"> <span class="wc-additional-editor-item-name">Title:</span> <span class="wc-additional-editor-item-content" id="wc-additional-editor-title">This is some title here</span> </div> <div class="wc-additional-editor-group"> <span class="wc-additional-editor-item-name">Type:</span> <span class="wc-additional-editor-item-content" id="wc-additional-editor-type">bipolar</span> </div> <div class="wc-additional-editor-group"> <span class="wc-additional-editor-item-content"><a href="" class="wc-additional-editor-link" id="wc-additional-editor-editor-link">Open content</a></span> </div> </div> `; } connectedCallback() { if (this.cueInterface) { const title = this.cueInterface.item.values.title; this.shadowRoot.querySelector('#wc-additional-editor-title').innerHTML = title; const type = this.cueInterface.content.descriptor.uiProperties.label; this.shadowRoot.querySelector('#wc-additional-editor-type').innerHTML = type; const editorLink = this.cueInterface.link; this.shadowRoot.querySelector('#wc-additional-editor-editor-link').href = editorLink; } } } customElements.define('my-additional-editor', MyAdditionalEditor);