How do I create/expose properties that will be passed to my component from the Lightning App Builder

Question

I want to expose some properties in the Lightning App Builder that can be set and passed to my component.

At present I don't have the proper code and so I am getting this screen.

Say I wanted to have a property called PostalCode how would I set this up within my component to provide a text box within the App Builder to set this value for the component?

Right now I have a standard Attribute for Postal Code and its not displaying a property.

    <aura:attribute name="PostalCode" type="String"/>

Is there an additional attribute or completely different tag I should be using to set this up?

Answer 1

You have to create a design file (yourComponent.design). In the file you should put tags like so:

<design:component>
    <design:attribute name="sObj" label="sObject" description="The Object that contains your field to update." />
    <design:attribute name="field" label="Field To Update" description="The field you want you update with the stopwatch results..." />
</design:component>

I have included some that I am using as a reference. These tags correspond to actual aura:attributes that I have defined in my component.

<aura:attribute name="sObj" type="String"/>
<aura:attribute name="field" type="String"/>

The names have to match.

Reference:

• Configure Components for Lightning Pages and the Lightning App Builder