I am creating some aura components that are really only used as notifications if a record meets certain criteria. Sometimes this criteria cannot be summed up with a single field so as to use the filter ability on the lightning page editor. I only want the box and a toast to show up given conditions.

I have accomplished this through aura, but now I have the components display as completely blank on the lightning page editor, which makes it a little hard to know which one is which.

Is there a way to have a component not show on the record, but have some kind of display on the lightning page editor so that I can know which component I am moving/adding?

  • Are you using the Lightning Console, by any chance?
    – sfdcfox
    Mar 15, 2019 at 14:00
  • I'm not entirely sure what that means, to be honest.
    – Chance
    Mar 15, 2019 at 14:27
  • See help.salesforce.com/… for more information on what I'm talking about.
    – sfdcfox
    Mar 15, 2019 at 14:35
  • Ha, silly me. We DO have lightning console, yes. I as an admin use the traditional tab layout, though. Why does this matter?
    – Chance
    Mar 15, 2019 at 14:42
  • Oh, wait, you think it would be better to build this in the utility bar? Would it be able to pop up?
    – Chance
    Mar 15, 2019 at 14:43

1 Answer 1


I have a way to do that, not sure if its the best.

Whenever you open the component in appbuilder, the window.location.href contains flexipageEditor/surface.app? . You can use that to your advantage.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="isAppBuilder" type="String" default="false"></aura:attribute>

    <aura:if isTrue="{!v.isAppBuilder}">
        My Component in App Builder




    doInit : function(component, event, helper){
        if(window.location.href.includes('flexipageEditor/surface.app?') ){
            console.log('In App Builder');
            component.set("v.isAppBuilder" , true);
             console.log('Not App Builder');   

So here your isTrue block will only show if your app is viewed in app builder.

The only drawback is when SF changes their URL format for app builder, then this logic wont work.

  • 1
    I'd avoid doing that as a matter of forward compatibility, but it is rather ingenious.
    – sfdcfox
    Mar 15, 2019 at 14:14

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .