Aura Supported Attributes- Part 1

Aura Attributes play an important role in holding Data when working with Lighting Component development and here I am going to play with some Aura Attributes that support different Types

Lightning Components Developer Guide has in depth explanation about these attributes

Basic declaration of an aura attribute is '<aura:attribute name="Test" type="String"/>' here both 'name' and 'type' are required parameter's for an attribute with optional parameter's as 'access', 'default', 'required', and 'description'

For any given attribute we can declare its Type as one of the following
a. Basic Types
b. Object Types
c. Standard and Custom Object Types
d. Collection Types
e. Custom Apex Class Types
f. Framework-Specific Types

Lets put some Basic attribute types into action using a simple Lightning Component.....

From Developer Console navigate to File-->New-->Lightning Component and enter a name for your Component and click Submit

Copy below code and past it in your Component.xml file and save

<aura:component implements="force:lightningQuickAction,force:hasRecordId,flexipage:availableForAllPageTypes" access="global">
    <!--String Attribute-->
    <aura:attribute name="strng" type="String" default="Aura Test String!"/>
    <!--Boolean Attribute-->
    <aura:attribute name="bln" type="Boolean" default="True"/>
    <!--Date Attribute-->
    <aura:attribute name="dt" type="Date" default="2017-05-19"/>
    <!--DateTime Attribute-->
    <aura:attribute name="dtTm" type="Date" default="2017-05-19T10:17:36.789Z"/>
    <!--Integer Attribute-->
    <aura:attribute name="int" type="Integer" default="2255"/>  
    <!--Decimal Attribute-->
    <aura:attribute name="decml" type="Decimal" default="15.4"/>
    <p><b>Testing Aura Attributes!</b></p>
    <h2><b>String Attribute Value: <ui:outputText value="{!v.strng}"/></b></h2>
    <h2><b>Boolean Attribute Value: <ui:outputCheckbox value="{!v.bln}"/></b></h2>
    <h2><b>Date Attribute Value: <ui:outputDate value="{!v.dt}"/></b></h2>
    <h2><b>DateTime Attribute Value: <ui:outputDateTime value="{!v.dtTm}"/></b></h2>
    <h2><b>Integer Attribute Value: <ui:outputNumber value="{!}"/></b></h2>
    <h2><b>Integer Attribute Value: <ui:outputNumber value="{!v.decml}"/></b></h2>    

Now lets add this Component to our record detail page using Lightning App Builder and click Save. You should be able to see default attribute values that we have set in our Component. Here is a Link to the video that shows on how to add Lighting Components on record detail page using Lightning App Builder!

we will cover remaining Attribute Types in my next blog!

Hope you like this post and any kind of feedback or corrections are always welcome - Thanks!


Popular posts from this blog

Displaying Toast Message from Modal in Lightning Components

Lightning RecordForm - An enhanced Lightning Data Service

Lightning Component to display dynamic sObject data