Admin-Friendly Lightning Components

Introduction

It’s not a secret that the default lightning component library is lacking in some basic things. But, luckily, we can build these basic things and make them really easy and flexible to use. I’ll show you how in this post.

Before we start, if you’re not familiar with lightning components, start with the post here, designed to get you up to speed building a basic custom lightning component.

Okay, ready? Let’s get started.

Design Attributes

To illustrate how a design file works and gives the administrator a way to proportion static values to a lightning component, let’s get started by creating a basic lightning component which will display static information for us.

Open up the Developer Console, and navigate to File > New > Lightning Component. Automatically an empty component (.cmp) will be created.

Within this component we’ll add our markup, but before we get there let’s create some aura:attribute elements to hold the values the user will set.

<aura:component implements="flexipage:availableForAllPageTypes" access="global">

  <aura:attribute name="show_icon" type="Boolean"/>
  <aura:attribute name="icon_name" type="String"/>
  <aura:attribute name="cmp_title" type="String"/>
  <aura:attribute name="cmp_body" type="String"/>
  <aura:attribute name="btn_title" type="String"/>
  <aura:attribute name="btn_link" type="String"/>

  <div class="slds-box slds-theme--default">
    <!-- Markup will go here! -->
  </div>

</aura:component>

Cool, let’s pause here now and move on to the design tab. We’re ready to click on “Design” on the right-hand side.

And we’ll create a design:attribute for each aura:attribute we want the user be able to fill manually. In our case the entire element will be “static.”

<design:component>

  <design:attribute name="show_icon" label="Display Icon" />
  <design:attribute name="icon_name" label="Icon Name" />
  <design:attribute name="cmp_title" label="Title" />
  <design:attribute name="cmp_body" label="Content" />
  <design:attribute name="btn_title" label="Button Title" />
  <design:attribute name="btn_link" label="Button URL" />

</design:component>

Note that these look very similar to the aura:attribute elements we placed in the component markup, but we provide a label to each.

Now let’s go to the Salesforce setup and open the Lightning App Builder. From any lightning page, we can now see the component we created and place it (yes, it’s still empty) on a page.

On the right-hand side, we can see those fields we defined in the design file. Let’s add some values! You can find lightning icons here.

On the next page we’ll actually create the component itself!

Add comment

Recent Posts

Categories