Editor Side Panel Configuration

The following properties must be defined to configure an editor side panel:

- id

The tag name of the web component. The name you specify must contain a hyphen. Remember also that the id property name must be preceded by a hyphen (-).

name

The display name of the component. The name is only actually displayed when the mouse is held over the side panel button.

directive

Must be set to "cf-custom-panel-loader".

webComponent

Information about the web component:

modulePath: The URL of the web component
icon: The tag name of the web component's icon. The name you specify must contain a hyphen.

mimeTypes

An array of MIME types specifying the editors for which this panel should be made available. The following MIME types may be specified:

`x-ece/story`	Escenic content editor for items other than images, videos, galleries and events
`x-ece/image`	Escenic image editor
`x-ece/video`	Escenic video editor
`x-ece/gallery`	Escenic gallery editor
`x-ece/event`	Escenic event editor
`x-ece/new-content`	Editor containing new Escenic content that has not yet been saved
`x-ece/section`	Escenic section editor
`x-ece/section-page`	Escenic section page editor
`x-ece/list`	Escenic list editor
`x-ece/*`	All Escenic editor types
`x-cci/assignment`	Newsgate assignment editor
`x-cci/storyfolder`	Newsgate story folder editor
`x-cci/*`	All Newsgate editor types
`/`	All editor types

homeScreen

Set this to true if you want your panel to function as a home page panel as well as an editor side panel. Note that home page panels are full width panels, whereas editor side panel width is restricted. Dual-purpose panels must therefore be made to display nicely in both contexts.

metadata

Not used. Should be specified as an empty array – [].

active

Set to false.

order

Determines the position of this panel button in the column of side panel/home page buttons. The buttons are arranged in numerical order from lowest to highest.

All the properties must be entered as a list item belonging to a sidePanels property. They must be indented correctly and the id property must be preceded by a hyphen (-) to indicate the start of a new list item. The following example shows the required format:

sidePanels:
  - id: "image-search"
    name: "Image Search"
    directive: "cf-custom-panel-loader"
    webComponent:
      modulePath: "http://www.example.com/webcomponents/image-search/image-search.js"
      icon: "image-search-icon"
    mimeTypes: ['*/*']
    homeScreen: false
    metadata: []
    active: false
    order: 802