Dec 13, 2016

Sujesh Ramachandran

How to Identify lightning component is added from app builder or not?




Here is a simple trick to identify whether an lightning component is added from App Builder View or referred from any other place(i.e. lightning tab) other than app builder. Just assume that the component is rendering in an app builder view and if you want to make any change specifically for app builder view. For example if you want to reneder component in one column layout in app builder view and if the component is not rendering in app builder view, and want to render the component in 2 column layout, you could use the design attributes (design:attribute) in salesforce.

Now lets see an example here, I am going to create a component which renders as one column in app builder view and 2 column in normal view(example for normal view could be lightning tab). AppBuilderCheck.cmp is the component below which has an attribute isAppbuilderView, default set to false.


Now lets create a Appbuilderview.design to expose an attributes to the app builder. Using design attributes you can provide provision to admin to set configurable values while setting up the app builder view. You can use these configurable values to design the behaviour of the components based on the inputs from design attributes. Now here we are going to set the default view of design attribute "isAppbuilderView" to true. Setting the default value make sure that while admin drag and drop this component to the app builder by default shows true, so that admin dont have to configure manually. So if this component render from app builder view, we get isAppbuilderView as true otherwise if the component render in an lightning tab then we get isAppBuilderView as false as the default setting in design attribute will be effective only if the component render from app builder view.


Screenshot of the component from App builder view and lightning tab view:

From App Builder - One Column Layout


From Lightning Tab - Two Column Layout


Follow me @ramsujesh

Sujesh Ramachandran

About Sujesh Ramachandran -

Co-Founder @ Fingertipplus Technologies | Co-Organizer of Coimbatore Salesforce Developer Group | Full Stack Coder | Blogger

Subscribe to this Blog via Email :