How do you detect Edit Mode in the Experience Editor with Scriban?

Question

Is there a function that I can use in the Scriban template to implement conditional logic based on the fact that the page is opened in the Experience Editor?

Something like the below:

<div class="button--primary field-link">{{ sc_field item 'F1' }}</div>
{{ if is_editing }}
    <div>{{ sc_field item 'F2' }}</div>
{{ end }}

Answer 1

Yes, there is an embedded object called o_pagemode.

You can use this like o_pagemode.is_experience_editor in an if statement.

You can find all the options for the o_pagemode here: https://doc.sitecore.com/developers/sxa/101/sitecore-experience-accelerator/en/the-embedded-items-and-objects-in-the-scriban-context.html.

The following lists notable properties of the o_pagemode context object:

• is_debugging: Indicates that the page is rendered in debug mode.
• is_experience_editor: Indicates that the page is rendered within Experience Editor.
• is_experience_editor_editing: Indicates that the page is rendered within Experience Editor in Edit mode.
• is_normal: Indicates that the page is rendered for a visitor.
• is_preview: Indicates that the page is rendered within Experience Editor in Preview mode.
• is_simulated_device_previewing: Indicates that the page is rendered within Experience Editor in Simulated Preview mode.
• is_profiling: Indicates that the page is rendered with profiling information.

Example:

{{ if (o_pagemode.is_experience_editor_editing) }}
  <span>[Click here to edit the component]</span>
{{ else }}
  ... render the component here
{{ end }}