The CUE Web Component API

A web component in general contains a class that extends HTMLElement. For building CUE web components, CUE provides its own base class that extends HTMLElement, cue.core.webcomponents.CUEElement, plus a number of subclasses for use in specific types of CUE extension. To make a CUE web component you need to extend one of these subclasses.

cue.core.webcomponents.CUEElement itself is defined as follows:

export abstract class CUEElement extends HTMLElement
 implements webcomponent.CUEElement {
  public user: webcomponent.User;
  public endpoints: StringMap<uri.URI>;
  dialog: Dialog;
}

This class provides three properties:

user

The current user

endpoints

The URL(s) of CUE's back end(s)

dialog

An interface that exposes methods for creating dialogs of various kinds. For details, see Adding Dialogs to Web Components.

The subclasses fall into three main groups:

Home page panel / Editor side panel extensions

There is only one class for extending home page panels and editor side panels, cue.core.webcomponents.SidePanel. Extend this class to display a home page panel that occupies the main work area of the CUE home tab or a pop-out panel on the left side of a CUE editor window. A custom home page panel works in the same way as the standard Search and Sections panels: a new button is added to the column on the left side of the display, and selecting this button displays the panel in the main work area. On an editor page, it is displayed as a pop-out panel on the left side, similar to an editor Search panel.

Metadata panel extensions

There are several classes you can use for adding custom sections to the pop-out metadata panel displayed on the right hand side of various pages. They all work in the same way: a new button is added to the column on the right side of the display, and selecting this button opens and closes the panel, focused on the appropriate section. The following classes are available:

cue.core.webcomponents.MetadataPanelCUEElement

Extend this class to add a custom metadata panel section to the following home page panels:

• The Search panel

• The Recent panel

• The Dashboard panel

• The Archive panel

cue.core.webcomponents.SectionsMetadataPanel

Extend this class to add a custom metadata panel section to the Sections home page panel.

cue.core.webcomponents.SectionPageMetadataPanelCUEElement

Extend this class to add a custom metadata panel section to the CUE section page editor.

cue.core.webcomponents.TextEditorMetadataPanel

Extend this class to add a custom metadata panel section to CUE content editors (rich text).

cue.core.webcomponents.StorylineCUEElement

Extend this class to add a custom metadata panel section to CUE content editors (storyline).

Custom field editors

There are two classes for creating custom field editors:

cue.core.webcomponents.CustomFieldEditor

Extend this class to change the appearance and behavior of a content item field (make an integer field in a content item be displayed as a graphical slider, for example).

cue.core.webcomponents.CustomStoryElementEditor

Extend this class to change the appearance and behavior of a story element field (make an integer field in a story element be displayed as a graphical slider, for example).

These classes and their use are described in more detail in the following sections.