CMS Development

Manobyte
Colaborador | Partner nivel Diamond
Colaborador | Partner nivel Diamond

HUBL query for if in "edit mode"

resolver

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!

0 Me gusta
3 Soluciones aceptadas
piersg
Solución
Asesor destacado

HUBL query for if in "edit mode"

resolver

You can do this:

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

 

Ver la solución en mensaje original publicado

FabianRichter
Solución
Colaborador

HUBL query for if in "edit mode"

resolver

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.

Ver la solución en mensaje original publicado

jmclaren
Solución
HubSpot Employee
HubSpot Employee

HUBL query for if in "edit mode"

resolver

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 

Jon McLaren

Sr. CMS Developer Advocate

Get started developing on the HubSpot CMS Developer Changelog
How to optimize your CMS Hub site for speed

If my reply answered your question, please mark it as a solution, to make it easier for others to find.

Ver la solución en mensaje original publicado

6 Respuestas 6
jmclaren
Solución
HubSpot Employee
HubSpot Employee

HUBL query for if in "edit mode"

resolver

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 

Jon McLaren

Sr. CMS Developer Advocate

Get started developing on the HubSpot CMS Developer Changelog
How to optimize your CMS Hub site for speed

If my reply answered your question, please mark it as a solution, to make it easier for others to find.

piersg
Solución
Asesor destacado

HUBL query for if in "edit mode"

resolver

You can do this:

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

 

FabianRichter
Solución
Colaborador

HUBL query for if in "edit mode"

resolver

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
Participante

HUBL query for if in "edit mode"

resolver

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
Guía | Partner nivel Diamond
Guía | Partner nivel Diamond

HUBL query for if in "edit mode"

resolver

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
Colaborador | Partner nivel Diamond
Colaborador | Partner nivel Diamond

HUBL query for if in "edit mode"

resolver

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.