Knowledge Base

Programmable Layouts: Publish, Preview and Direct Edit

Last Modified:
17 Sep 2020
User Level:
Power User

Introduction

TERMINALFOUR uses different modes to show Sections or content:

  • Publish: Used when a Section or content will be published live. Only approved content should be visible in this mode
  • Preview: This mode lets content editors see a preview of the Section or specific content before publishing. Pending content is also visible.
  • Direct Edit: Like Preview, in Direct Edit you can see how a page and its content will look before it is published. The added benefit is that you can also edit the content in place so you can see how your changes will look as you make them. Using Programmable Layouts, it is possible to hide/disable content in Direct Edit that is visible in Preview.

And sometimes, it is important to ensure that Programmable Layouts are working correctly and showing the relevant information only in the correct mode.  

isPreview

Since Direct Edit is a sub-mode of Preview, in Direct Edit this variable returns true.

isPreview is a global variable that returns if the content is in Preview.

(boolean) isPreviewExampleif(isPreview) { document.write('This is Preview or Direct Edit'); } else { document.write('This is Publish'); }

The result of the above code is:

This is Publish

Direct Edit

When retrieving content ofter is required to specify the isPreview content, this ensures to fetch the correct content version and displaying pending content in Preview and Direct Edit. Therefore the following method will be useless.

As already explained, isPreview always returns true when using Direct Edit. It's possible that the Content Layout could be different depending on whether Direct Edit or Preview is used. In this case, it's possible to detect the correct mode to correctly using the following code.

var deMgr = com.terminalfour.spring.ApplicationContextProvider.getBean (com.terminalfour.directedit.IDirectEditHelper); var isDirectEdit = deMgr.isCurrentRequestDirectEdit();Examplevar deMgr = com.terminalfour.spring.ApplicationContextProvider.getBean(com.terminalfour.directedit.IDirectEditHelper); var isDirectEdit = deMgr.isCurrentRequestDirectEdit(); //true only in Direct Edit var isOnlyPreview = isPreview && !isDirectEdit; //true when is preview, but not direct edit var isPublish = !isPreview; if (isDirectEdit) { document.write('This is DirectEdit'); } if (isOnlyPreview) { document.write('This is Preview'); } if (isPublish) { document.write('This is Publish'); }

The result of the above code is:

This is Publish