Page Specific Properties

OrchestraCMS is content-centric, meaning that an indivdual content item can be reused anywhere in the site.  Any edits made to that content item will be reflected anywhere on the site the content item is used.  In some instances there may be a property of the content that should be specific to an instance of that content on a particular page.  For example, a menu on one page may be a main navigation menu across the top, but on a sub page it might be an accordian menu on the left.  In these instances content authors may need the ability to set certain properties of the content on a page by page basis.  In OrchestraCMS this feature is provided through page specific properties.

The widget representing the content placed on a page will have a green arrow on it that a content author can use to set these page specific properties.  

The developer needs to create the dialog that is presented when the content author clicks the icon to access these properties.  The process to enable this is:

1. Create a Visualforce page in Salesforce that will be the dialog and collect and save the properties as attributes
2. Add the name of the Visualforce page to a field on the Content Layout record of the content template.

The Properties Edit Page

When the content author clicks the page specific properties icon (shown below) on a content item, the resulting dialog that the content author uses to supply the properties is a Visualforce page from Salesforce.  

This page is very similar to a content editor page.  One difference is that it uses ce.content_pageproperties_editor instead of ce.content_properties_editor for the save function.

<apex:page controller="cms.CreateContentController" extensions="OrchestraCMSWidgetExamples" showHeader="false" sidebar="false" cache="false" title="Orchestra CMS" standardStylesheets="false">
<script type="text/javascript" language="javascript">
$(document).ready(function(){
    ce.content_pageproperties_editor('registerSaveFunction', function(){
        
        return [
            {
            "name":"CSSClassAttr", 
            "value": $('#CSSClassField').val(), 
            "type":"Text", 
            "lang":""
            }
        ]; 
    }); 
    
});
</script>

<div style="padding-top:20px;padding-bottom:20px;">
<!-- Any HTML form element or OrchestraCMS widget 
that would be valid for a content editor can be used here as well -->
    Style: <input id="CSSClassField" value="{!CSSClassAttr}"/>
</div>
</apex:page>

The Content Layout Record

The content layout object will need to have the Visualforce Edit Page Properties field added to the Salesforce page layout.  Once this field is added, it can be populated with c__VisualforcePageName on any content layout record that needs to use these page specific properties.

The Accessors

In order to use the page specific properties attributes in the rendering or logic, the accessor needs to call the attribute using the getPageProperty method instead of the getProperty method. Using the attribute from the above example, the accessor would look like:

public String CSSClassAttr{
        get {       
            
            return (String)(this.getPageProperty('CSSClassAttr'));
        }
    }