Web Components

Web components is the name given to a set of features being added to the W3C HTML and DOM specifications that support the creation of reusable components in web documents and web applications.

CUE makes use of this technology to enable the following types of extensions:

Editor side panel

An editor side panel is displayed as a pop-out panel on the left side of a CUE editor window (similar to an editor Search panel). A custom editor side panel works in the same way as the standard side panels: a new button is added to the column on the left side of the display, and selecting this button opens and closes the panel.

Editor metadata section

An editor metadata section is displayed in the pop-out attributes panel on the right side of a CUE editor window (similar to the General info and Authors sections). A metadata section works in the same way as the standard attributes sections: 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.

Custom field editor

A custom field editor extension changes the appearance and behavior of a content item field. You can, for example, configure CUE to display an integer field in a content item as a graphical slider instead of displaying a simple text field. You can also use it to display much more complex components containing many different controls and elements: a color picker component that offers the user several different ways to choose a color, for example.

Custom storyline element field editor (Content Store only)

A custom storyline element field editor extension changes the appearance and behavior of a storyline element field. It works in much the same way as a custom field editor, and enables the same kinds of possibilities. The map and table storyline elements included in the CUE Content Store's starter pack are implemented using custom storyline element field editors.

Home page panel

A home page panel occupies the main work area of the CUE home tab. 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.

Home page metadata section

A home page metadata section is displayed in the pop-out attributes panel on the right side of a CUE editor window (similar to the General info and Pages sections displayed with the Sections home page panel). A metadata section works in the same way as the standard attributes sections: 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.

All you need to do to add a web component to CUE is:

  • Create a JavaScript file containing the definition of your web component.

  • Put the web component definition in a web location that is accessible to CUE.

  • Add information about the web component to a YAML configuration file and save the file in the CUE configuration folder (/etc/escenic/cue-web-3.3). You can either create a separate configuration file for each of your web components, or create a single configuration file for all of them.

This process is described in more detail in the following sections.