Page Mode

There are a number of different page modes that can be used to determine the user context:

OrchestraCMS contains an available merge field for use on page templates

{!api.page_mode}

In the examples below, the markup between the tags is only rendered if the page mode matches the merge value being tested. This can also be used to load different scripts/CSS depending on the page mode being viewed or any other code. Common uses include:

• Loading or excluding different scripts or styling based on the page mode. This is recommended when loading JavaScript that would interfere with the application interface. For example

    <apex:outputText rendered="{!api.page_mode != 'edit'}">
         <script src="{!URLFOR($Resource.CustomResource, 'js/yourCustom.js')}" />
    </apex:outputText>

• Loading different scripts in Preview versus Production so you can test out JavaScript and css changes without affecting your live website.  For example

    <apex:outputText rendered="{!api.page_mode == 'prev'}">
         <script src="{!URLFOR($Resource.PreviewResource, 'js/yourCustom.js')}" />
    </apex:outputText>

    <apex:outputText rendered="{!api.page_mode == 'production'}">
         <script src="{!URLFOR($Resource.LiveResource, 'js/yourCustom.js')}" />
    </apex:outputText>

• Rendering code or markup that should only be rendered when the page is in edit mode.  For instance when adding panel hints to a page template

    <apex:outputText rendered="{!api.page_mode == 'edit'}">
         <div class="hintClass">
              <strong>Panel Hint text goes here</strong>
         </div>
    </apex:outputText>

Full Page Example

<apex:page controller="cms.CoreController" standardStylesheets="false" showHeader="false" sidebar="false">
    <apex:composition template="{!page_template}">
        <apex:define name="header">
            <apex:outputText rendered="{!api.page_mode == 'edit'}">
                <!-- Stylesheet for use in Edit Mode -->
                <apex:stylesheet value="{!URLFOR($Resource.orchestraPageSupport, 'css/stylesheet_for_edit_mode.css')}" />
            </apex:outputText>
            <apex:outputText rendered="{!api.page_mode == 'prev'}">
                <!-- Text for the user to indicate we're in Preview Mode -->
                <apex:outputText>You are in Preview Mode. This is a simulated view of what the page will look like in its current state.</apex:outputText>
            </apex:outputText>
            <apex:outputText rendered="{!api.page_mode == 'prev' && CONTAINS(api.page_params, 'renderedMode')}">
                <!-- Text for the user to indicate we're in Rendered Mode -->
                <apex:outputText>You are in Rendered Mode. This will allow you to select and edit content from the rendered page.</apex:outputText>
            </apex:outputText>
            <apex:outputText rendered="{!api.page_mode == 'prev' || api.page_mode == 'production'}">
                <!-- Separate stylesheet for use in Preview and Production Mode -->
                <apex:stylesheet value="{!URLFOR($Resource.orchestraPageSupport, 'css/stylesheet_for_preview_and_production_mode.css')}" />
            </apex:outputText>
            <apex:outputText rendered="{!api.page_mode == 'production'}">
                <!-- Additional JavaScript libraries or resources for use in Production Mode -->
                <script type="text/javascript" src="{!URLFOR($Resource.orchestraPageSupport, 'js/my_javascript.js')}"></script>
                <script type="text/javascript" src="{!URLFOR($Resource.orchestraPageSupport, 'js/my_other_javascript.js')}"></script>
            </apex:outputText>
        </apex:define>
        <apex:define name="body">
            <div class="homeCarousel">
                <apex:outputText rendered="{!api.page_mode == 'edit'}">
                    <div class="ocmsHint">
                        <strong>Small Block With Image</strong> ❧ carousel items <br/>
                        ❧ Omit title field;
                    </div>
                </apex:outputText>
                <cms:Panel panelName="carouselImage" panelController="{!controller}" panelWidth="300px" panelHeight="170px" panelContentLayouts="SmallBlockWithImage" panelLimit="5" />
            </div>
        </apex:define>
    </apex:composition>
</apex:page>

JavaScript

The following example shows how to determine which page mode is running.

if (CMS.page_mode == 'edit') {
    console.log('Edit Mode');
} else if (CMS.page_mode == 'prev' && CMS.page_params.indexOf('renderedMode') !== -1) {
    console.log('Rendered Mode');
} else if (CMS.page_mode == 'prev') {
    console.log('Preview Mode');
} else if (CMS.page_mode == 'production') {
    console.log('Production Mode');
}