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