HUBL query for if in "edit mode"

[Manobyte]

I have a few sections that use conditional logic to display different modules on a page, however this creates some issue with the modules not being there when you edit the page. So i'm looking for a way using hubl logic to determine if the page is being edited then show all the modules. I noticed there are some css classes that are different in edit mode and I have in the past used a method where all motions are conditionally hidden with css and shown in the editor, but I would much prefer if I can just use hubl to remove them entirely to prevent bloat from additional unnecessary html. If anyone has any ideas let me know!

[piersg · Accepted solution]

You can do this:

{% if request.postDict.inpageEditorUI %}
  {# will only display if page is being viewed in the editor #}
{% endif %}

[FabianRichter · Accepted solution]

I had a hard time using this snippet. It showed the content in the preview, but I could not access the modules to edit them.

So what I did, I tried to find a similar variable in the dev info. I found a more simple/native one there (maybe HubSpot added it later). So here is my solution, in case someone got the same issue: Simply change the 

{% if request.postDict.inpageEditorUI %}

... to ...

{% if is_in_editor %}

Hope this helps.

[jmclaren · Accepted solution]

Hey all, wanted to let everyone know there's actually better HubL variables to test against now:
https://developers.hubspot.com/changelog/march-2023-rollup#:~:text=are%20most%20needed.-,New%20HubL%...

These are a more reliable way of testing in HubL than using request.postDict.inpageEditorUI


Additionally JavaScript and CSS can be used as well:
https://developers.hubspot.com/docs/cms/guides/provide-a-good-editor-experience 

[piersg · Accepted solution]

You can do this:

{% if request.postDict.inpageEditorUI %}
  {# will only display if page is being viewed in the editor #}
{% endif %}

[FabianRichter · Accepted solution]

I had a hard time using this snippet. It showed the content in the preview, but I could not access the modules to edit them.

So what I did, I tried to find a similar variable in the dev info. I found a more simple/native one there (maybe HubSpot added it later). So here is my solution, in case someone got the same issue: Simply change the 

{% if request.postDict.inpageEditorUI %}

... to ...

{% if is_in_editor %}

Hope this helps.

[S2-StvSimons]

Awesome! I've been looking for the same thing - thank you Fabian.

It appears the 'request.postDict.inpageEditorUI' value is set after the editor has determined editable areas and modules in the template file, but the 'is_in_editor' property is set earlier. So something like

{% if dynamic_page_route_level == 1 or request.postDict.inpageEditorUI %}
  {% dnd_area "area_1" %}
  {% end_dnd_area %}
{% endif %}

will fail to display the DND area editable, but 

{% if dynamic_page_route_level == 1 or is_in_editor %}
  {% dnd_area "area_1" %}
  {% end_dnd_area %}
{% endif %}

 will allow the area to correctly display editable.

[webdew]

Hi @Manobyte ,

Use Boolean option. See SS: https://prnt.sc/1521i0l and on/off module with editor.

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards. 

[Manobyte]

I am looking for more of a template solution rather then a custom module one. I know how to show/hide the content (Im dealing with global content that changes based on language), but if a module is hidden this way then it becomes un editable when editing the page, and only the options that meet the current requierment are available. It could potentualy all be moved into a single custom module but then you lose the other templeting benifits of having individule modules for the content.

I was thinging that maybe using export_to_template_context might be an option, this would atleast make the modules available in the side bar, but you would lose the ability to just "click" to edit the module, and you would not be able to visually see the updates untill published.