Tag Archives: Lightning

SVG in Lightning Component Bundle

SVG resource is to define a custom icon for the lightning component when it appears in the Lightning App Builder’s component pane. SVG icons is used in Salesforce Lightning App Builder or Community Builder.

Here is a lightning component with default SVG icon:

Sample Component:

<aura:component implements="flexipage:availableForAllPageTypes">
    <strong>Sample Component</strong>
</aura:component>

The default SVG icon looks like below:

Edit the SVG for custom SVG icon of above “Sample” lightning component: To customize the default SVG, click SVG in the component sidebar of the Developer Console.

Custom Sample Component SVG icon: Here I’ve changed the custom SVG icon to a rectangle filled with blue color. You can change it to as per your requirement.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
	<rect width="400" height="300" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

The custom SVG icon looks like below:

Displaying Static Resources Image in Lightning Component

To reference a specific resource in component markup, we can use $Resource.resourceName within an expression. resourceName is the Name of the static resource. In a managed packaged, the resource name must include the package namespace prefix, like $Resource.yourNamespace__resourceName.

Sample Code:

<aura:component>
    <!-- Stand-alone static resources image file-->
    <img src="{!$Resource.resourceName}"/>
    <!-- Stand-alone static resources image file with Namespace-->
    <img src="{!$Resource.yourNamespace__resourceName}"/>
    
    <!-- Asset from an archive static resource image file-->
    <img src="{!$Resource.resourceName + '/assets/images/logo.png'}"/>
    <!-- Asset from an archive static resource image file with Namespace-->
    <img src="{!$Resource.yourNamespace__resourceName + '/assets/images/logo.png'}"/>
</aura:component>

Custom Label in Salesforce

Custom labels enable developers to create multilingual applications by automatically presenting information (for example, help text or error messages) in a user’s native language. Custom labels are custom text values that can be accessed from Apex classes, Visualforce pages, or Lightning components. The values can be translated into any language Salesforce supports.

We can create up to 5,000 custom labels for your organization, and they can be up to 1,000 characters in length.

Setup | App Setup | Custom Labels | Click ‘New Custom Label’ Button

Fill in the details and Click ‘Save’ button.

 

Custom Label in Visualforce page:
$Label.CustomLabel for Visualforce page.

<apex:page standardController="Account">
	
<h1>Example for Custom labels</h1>

	<apex:outputLabel value="{!$Label.Message}"/>
</apex:page>

 

Custom Label in Apex Class:
System.Label.Label_name for apex class

String msg = System.Label.Message; 

 

Custom Label in Lightning Component:
$Label.c.labelName for the default namespace.
$Label.namespace.labelName if your org has a namespace, or to access a label in a managed package.

<aura:component implements="flexipage:availableForAllPageTypes">
    
<div onclick="{!c.clickLabel}">
        <ui:outputText value="{!$Label.c.Message}" />
    </div>

</aura:component>

 

Custom Label in Javascript:
$A.get(“$Label.c.labelName”) for the default namespace.
$A.get(“$Label.namespace.labelName”) if your org has a namespace, or to access a label in a managed package.

({
    clickLabel : function(component, event, helper) {
        var label = $A.get("$Label.c.Message");
        alert(label);
    }
})

Lightning Component Bundle

A Lightning component bundle includes following resources:

Resource Resource Name Usage
Component or Application sample.cmpor sample.app The only required resource in a bundle. Contains markup for the component or
app. Each bundle contains only one component or app resource.
Controller sampleController.js Contains client-side controller methods to handle events in the
component.
Helper sampleHelper.js JavaScript functions that can be called from any
JavaScript code in a component’s bundle
CSS Styles sample.css Contains styles for the component.
Documentation sample.auradoc A description, sample code, and one or multiple references to example
components
Renderer sampleRenderer.js Client-side renderer to override default rendering for a component.
Design sample.design File required for components used in Lightning App Builder, Lightning pages,
Community Builder, or Cloud Flow Designer.
SVG File sample.svg Custom icon resource for
components used in the Lightning App Builder or Community Builder.