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>;
  public credentials: StringMap<string>;
  public dialog: Dialog;
  public notification: webcomponent.Notification;
  public abstract getTitle(): Promise<Nullable<string>>;
  public abstract getLink(): Promise<webcomponent.Nullable<webcomponent.Link>;
}

This class provides four properties and two functions:

user

The current user

endpoints

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

credentials

The credentials needed to access CUE's back end(s), available as:

credentials.escenic
credentials.newsgate
credentials.dc-x

dialog

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

notification

An interface that exposes methods for showing and hiding notifications from web components. For details, see Sending Notifications from Web Components.

getTitle()

Returns the title of the current editor.

getLink()

Returns the URL of the content item being edited.

The subclasses fall into three main groups:

Home page panel / Editor side panel extensions

There are two classes you can use for adding home page/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.

cue.core.webcomponents.ListEditor

Extend this class to display a pop-out panel on the left side of a CUE list editor window. The ListEditor class can only be used in this specific context.

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.AssignmentEditorMetadataPanel

Extend this class to add a custom metadata panel section to CUE assignment editors.

cue.core.webcomponents.SectionsMetadataPanel

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

cue.core.webcomponents.SectionPageMetadataPanel

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.StorylineEditorMetadataPanel

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

cue.core.webcomponents.StoryFolderEditorMetadataPanel

Extend this class to add a custom metadata panel section to CUE story folder editors.

cue.core.webcomponents.ContentSummaryEditor

Extend this class to add functionality to content summaries.

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.