2

I am working in a greenfield Sitefinity 12.2 site. I am rendering the site's header and footer using custom grid widgets with placeholders defined for widgets like the site navigation. In the header is a flyout menu with placeholders I would like to populate with widgets on my page template. Unfortunately, I need to disable the site's custom JavaScript when in designer mode to prevent issues with the editing tools, so I can't access the flyout menu through normal means since it is toggled via custom JavaScript.

Ideally, I would like to conditionally render an alternative view of the flyout menu when in page designer mode to allow authors to modify the content of those placeholders. In a Razor file this is possible with something like

@if (SystemManager.IsDesignMode)

but grid widgets use .html files so Razor syntax isn't available. Is there any sort of attribute I can apply to a tag in a grid widget template to tell Sitefinity to render markup only in designer mode? If not, are there any other best practices I should be following to avoid this type of situation?

isherwood
  • 58,414
  • 16
  • 114
  • 157
  • In the layout view you can include an additional css file, e.g. backendFixes.css if you are in design mode. In this css, you can make the menu always visible, sticky, etc. – Veselin Vasilev Jan 07 '20 at 03:06

1 Answers1

3

I followed Veselin's advice and added custom styling in my layout file only in design mode. I was able to have the flyout menu always visible like this, which suits my needs. I also received the advice from someone at Sitefinity that it's possible to detect page editor in Javascript by looking for the class 'sfPageEditorWrp’, which might be useful if CSS alone doesn't cut it.

It's a simple display:block for my flyout menu, it looks a little ugly in editor but it exposes the placeholders which is what I care about. In my layout file:

@if (SystemManager.IsDesignMode)
    {
        <style>
            .mobile-menu {
                display: block !important;
            }
        </style>
    }