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 '19 at 14:00
  • I'm not entirely sure what that means, to be honest. – Chance Mar 15 '19 at 14:27
  • See help.salesforce.com/… for more information on what I'm talking about. – sfdcfox Mar 15 '19 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 '19 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 '19 at 14:43

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 '19 at 14:14

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.