7

I'd like to know if there is a way to detect that the component is in the design mode. By saying "design mode" I mean the situation when we're moving the component to/from Object Record page in Lightning App Builder and changing its attributes. Usually, most component frameworks have such ability, for example in .NET

2

There's a Debug mode available in Lightning Components if that's what you are looking for.

Quoting the relevant text

There are two modes: production and debug. By default, the Lightning Component framework runs in production mode. This mode is optimized for performance. It uses the Google Closure Compiler to optimize and minimize the size of the JavaScript code. The method names and code are heavily obfuscated.

When you enable debug mode, the framework doesn't use Google Closure Compiler so the JavaScript code isn't minimized and is easier to read and debug.

To enable debug mode for your org:

From Setup, enter Lightning Components in the Quick Find box, then select Lightning Components. Select the Enable Debug Mode checkbox. Click Save.

Depending on your exact use case, you may also want to look at the Lightning Inspector Chrome Extension.

  • Ok, got it. My question was about detecting design mode programmatically. Say, I'd like to show one UI in design mode (while user's changing component location and attributes) and another UI on actual Record page. Is that possible? – Mike Raven Jun 3 '16 at 18:01
  • I don't think that's possible. If my answer helped with the info you were looking for, please mark it as an answer for everyone's benefit. – Gaurav Kheterpal Jun 3 '16 at 18:05
  • 2
    This doesn't answer the question at all though. – E.J. Wilburn May 17 '18 at 0:23
2

Here's a hacky way of accomplishing this. It relies on the URL of the page editor not changing.

Component:

<aura:component implements="flexipage:availableForRecordHome">
    <!-- Attributes -->
    <aura:attribute name="inDesignMode" type="Boolean" default="false"/>

    <!-- Handlers -->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <!-- Body -->
    <aura:renderIf isTrue="{!v.inDesignMode}">
        <lightning:card>
            Component is in design mode.
        </lightning:card>
    </aura:renderIf>
</aura:component>

Controller:

({
    doInit: function (component, event, helper) {
        var inDesignMode = document.location.href.toLowerCase().indexOf( 
'flexipageeditor' ) >= 0;
        component.set("v.inDesignMode", inDesignMode);
    },
})

I'd recommend implementing it as a service component if you need to use it in multiple components.

  • Pity still no legit way to do this; URL in April 2018 is e.g. /visualEditor/appBuilder.app?id=0M03C00000004K8SAI. – Keith C Apr 3 '18 at 12:39
  • Actually the URL fragment used in the example is correct. The URL you indicate is the URL for the page builder but it wraps the editable contents containing the LEX components in an IFRAME with a src of /flexipageEditor/surface.app. I also thought it was the appBuilder URL initially until my code didn't work. :) – E.J. Wilburn Apr 3 '18 at 23:13
  • 1
    Just ran into this How to Identify lightning component is added from app builder or not? that seems like a good approach. – Keith C May 8 '18 at 11:16
  • Haven't tested that approach yet myself but I like it better assuming it works as intended. – E.J. Wilburn May 17 '18 at 0:21
  • Hi @KeithC can you share what was in How to Identify lightning component is added from app builder or not? The site is no longer available and it is also not in the Wayback machine. – Tim Lewis Jan 4 at 16:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.