Headless Aura Component

Question

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?

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
    </aura:if>

</aura:component>

JS:

({

    doInit : function(component, event, helper){
        if(window.location.href.includes('flexipageEditor/surface.app?') ){
            console.log('In App Builder');
            component.set("v.isAppBuilder" , true);
        }else{
             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.