cms:Panel

The cms:panel component provides a droppable area for content to be placed on the page within OrchestraCMS by your content authors.

Since the cms:panel component is provided for use by authors to place content within the application, all panels need to be contained in the section of the Visualforce page.

Example

<div class="myPanelWrapper">
    <cms:Panel panelName="myPanelName" panelController="{!controller}"
        panelContentLayouts="contentlayoutName" panelLimit="5"
        panelDynamic="true" panelDynamicGroup="1" />
</div>

Throughout this document, the terms Content Layout and Content Template are used interchangeably and refer to the same thing.

To identify the name of the Content Template:

• In OrchestraCMS Setup, under Templates, click Content Templates.
• To the right of the Content Template, click Edit.
• The value to the right of the Name label is the content layout name.

Example with Hint Text

<div class="myPanelWrapper">
    <apex:outputText rendered="{!api.page_mode == 'edit'}">
        <div class="panelHint">
            <strong>PlainText</strong> Flavour text to help content authors when creating pages
        </div>
    </apex:outputText>
    <cms:Panel panelName="myPanelName" panelController="{!controller}"
        panelContentLayouts="contentlayoutName" panelLimit="5"
        panelDynamic="true" panelDynamicGroup="1" />
</div>

Best Practices

• Panel Names should be unique within a page template; however, panels provided for the same use between page templates should have the same name. For example a panel used for a common menu between page templates should have the same panelName in each template.
• It is not recommended to create a separate panel for each piece of content. Each panel used may result in a very small delay as the panel is checked. Consolidating multiple content items and types into a single panel will provide better overall performance. Use the markup of the content items themselves to target styling and JavaScript for different types of content.
• Use overflow styling on panels so that as more content is added to the panel, the panel's height grows:

.ocms-content-panel {
    padding-bottom: 24px;
    height: auto;
}

• Panel styling (placement and sizing) is achieved through the use of CSS in a static resource. If there is a need to have different static resources when in Edit mode, one can do so by using the available Page Mode merge variable to determine when to render each resource
• Panels should be styled so that they're wide enough to show their contents.

Attributes

panelName

Required, String value. An identifier for the content panel. This should be unique within a page template, and named the same when used for the exact same content on another page template. For example, if you have a panel for a common menu, this should be the same identifier on all page templates.

panelController

Required, cms.CoreController value. The executing page controller that will interact with OrchestraCMS. This value should always be the merge field {!controller}.

panelContentLayouts

Optional, String value. Limits the content templates that can be placed in the panel. The content templates that can be added to the panel. The format is a string value that contains a comma separated list of content template names. For example: panelContentLayouts="ClassStyledMenu,TextBlock,PlainText"

panelLimit

Optional, Numeric value. The number of content items that are allowed to be dropped into the panel.

panelDynamic

Optional, Boolean value. Instructs the panel to send one Ajax request for all content in the panel, instead of one request for each piece of content when the value is set to “true”.

panelDynamicGroup

Optional, Numeric value. Instructs the panels to group panels with the the same value set for the panelDynamicGroup attribute into one Ajax request.

For example, any panel with a panelDynamicGroup value of “1” will be grouped with any other panels that also have a value of “1”.

If there are many content items in panels sharing the same panelDynamicGroup, there might be a delay returning the markup of those items to the page. In order to not have the page appear blank on initial load, it might be advisable to have some panels returning simple content, such as the header and footer, in a different panelDynamicGroup.

This attribute is only used when the panelDynamic attribute is set to “true”.