Home Page Panel Configuration

The following properties must be defined to configure a home page 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

For a pure home page panel, this property should be specified as an empty array – []. You can, however, specify values in which case the component will also function as an editor panel. For details of the values that may be specified, see Editor Side Panel Configuration. Note that while home page panels are full width panels, editor side panel width is restricted. Dual-purpose panels must therefore be made to display nicely in both contexts.

homeScreen

Set to true.

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: "twitter-home-panel"
    name: "Twitter Timelines"
    directive: "cf-custom-panel-loader"
    webComponent:
      modulePath: "http://www.example.com/webcomponents/twitter/twitter-home-panel.js"
      icon: "twitter-home-panel-icon"
    mimeTypes: []
    homeScreen: true
    metadata: []
    active: false
    order: 801