Use Lightning Design Resource in your component

Use Lightning Design Resource in your component /Lightning Map

Hello friends!! Have you ever considered designing your application to set up some features for admins? Yes!!  even admins without any prior knowledge to coding, can configure your lightning component. It is very interesting to hear, right? It is even more interesting to code. Let’s begin…

Use design resource to expose your component attributes to tools like lightning app builder. This will allow admins to edit attributes at design time. Design resource resides in the same folder where your .cmp component resides.

We will use lightning map component to mark the address set by the user. This way we will cover both, the design resource and lightning map component. Sounds interesting? Let’s go!!.

Lightning Map Overview:-

Lightning map component, introduced from api 44.0 onward can show a single or multiple locations. The component does so using geolocoding data and mapping imagery from Gogle Mps.

 

PROPERTYTYPEDESCRIPTION
locationobjectAddress elements (City, Country, PostalCode, State, and Street) or a set of
latitude and longitude coordinates. If you specify address elements and
coordinates for one location, the map uses the coordinates. To support reliable geocoding of addresses, if you specify Street, you must also specify at least
one of City, Country, PostalCode or State.
titlestringThe location title for the marker, displayed in the location list and in the info window when you click a marker.
descriptionstringThe information displayed in the info window when you click a marker or location
title.
iconstringThe icon that’s displayed next to the location title in the list. Only Lightning Design System icons are supported. Custom marker icons are currently not supported.
The default is standard:location. For more information, see Displaying Multiple Addresses.

Create a component, LightningMap.cmp and set the attributes as followed:- 

 LightningMap.cmp

<aura:component implements=”force:appHostable, flexipage: availableForAllPageTypes,  flexipage: availableForRecordHome,force:hasRecordId” access=”global” >

    <aura:attribute type= “String” Name=”Country”  />

    <aura:attribute type= “String” Name=”State”  />

    <aura:attribute type= “String” Name=”City”  />

    <aura:attribute type= “String” Name=”Street”  />

    <aura:attribute name=”mapMarkers” type=”Object[]”/>

    <aura:handler name=”init” value=”{! this }” action=”{! c.init }”/>

<lightning:map

        mapMarkers=”{! v.mapMarkers }” />

    </aura:component>

We have added init handler in our component so that the init method is called as soon as our component is rendered, and this init method sets the values of the attributes required for marking our map.

Let’s see controller:- 

 ({

init : function(component, event, helper) {

      component.set(‘v.mapMarkers’, [

            {

                location: {

                    Country: component.get(“v.Country”),

                    Street: component.get(“v.Street”),

                    City: component.get(“v.City”),

                    State: component.get(“v.State”)

                },

            }

        ]);

    }

})

Note:- Country, Street, City and State are properties already defined in lightning map component, we have used these properties to mark an address here.

 

Now, our component is ready to show the map, all we need to do is pass some values to it. We will achieve this here by using design resource. So following will be the code of your LightningMap.design

LightningMap.design: –

<design:component>

<design:attribute Name=”Country” Label= “Country”   />

    <design:attribute  Name=”State” Label= “State”  />

    <design:attribute  Name=”City” Label= “City”  />

    <design:attribute  Name=”Street” Label= “Street”  />

 

</design:component>

We have just mapped the attributes defined in components to the design attributes so that  component could pick the value at design time.

Save all your code and open lightning app builder, drag this custom component to a ection in the page and see the output, which looks like below:- 

Lightning map Design Resource

Note:-   We have only used text in design system, we can add picklist too by adding datasource to the attribute. Also we can get values from backend to show in picklist, this could be another good topic, I will write later.

I hope you enjoyed this section. You can suggest me something you want to know more about, in comment section. Till then signing off!!!!! Happy Coding 🙂

(Visited 125 times, 1 visits today)

Leave a Reply