Abhinav's Salesforce Blog: Lightning Component

Showing posts with label Lightning Component. Show all posts

Wednesday, February 5, 2020

Check type of object in Lightning controller.js

({
doInit: function(cmp) {
var recId = cmp.get('v.recordId');
var recIdSubString = recId.substring(0, 3);

if(recIdSubString=='00U'){
cmp.set("v.objectType", "Event");
}

if(recIdSubString=='500'){
cmp.set("v.objectType", "Case");
}
}
})

Saturday, February 1, 2020

Create Multiple Account with Add/Remove Functionality in Lighting Component

CreateMultipleAccount.cmp

<aura:component controller="CreateMultipleAccountController" Implements="flexipage:availableForRecordHome,force:hasRecordId">

<aura:attribute name="accountList" type="Account[]"/>

<div class="slds-m-around--xx-large">
<div class="slds-float_right slds-p-bottom_small">
<h1 class="slds-page-header__title">Add Row
<lightning:buttonIcon iconName="utility:add" size="large" variant="bare" alternativeText="Add" onclick="{!c.addRow}"/>
</h1>
</div>
<div class="container-fluid">
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
<thead>
<tr class="slds-text-title_caps">
<th scope="col">
<div class="slds-truncate">#</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Account Name">Account Name</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Account Number">Account Number</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Phone">Phone</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Action">Action</div>
</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.accountList}" var="acc" indexVar="index">
<tr>
<td>
{!index + 1}
</td>
<td>
<lightning:input name="accName" type="text" required="true" maxlength="50" label="Account Name" value="{!acc.Name}" />
</td>
<td>
<lightning:input name="accNumber" type="text" maxlength="10" label="Account Number" value="{!acc.AccountNumber}" />
</td>
<td>
<lightning:input name="accPhone" type="phone" maxlength="10" label="Phone" value="{!acc.Phone}" />
</td>
<td>
<a onclick="{!c.removeRow}" data-record="{!index}">
<lightning:icon iconName="utility:delete" size="small" alternativeText="Delete"/>
<span class="slds-assistive-text">Delete</span>
</a>
</td>
</tr>
</aura:iteration>
</tbody>
</table>
<div class="slds-align_absolute-center slds-p-top_small">
<lightning:button variant="brand" label="Submit" title="Brand action" onclick="{!c.save}" />
</div>
</div>
</div>
</aura:component>

CreateMultipleAccountController.js
({
addRow: function(component, event, helper) {
helper.addAccountRecord(component, event);
},

removeRow: function(component, event, helper) {
//Get the account list
var accountList = component.get("v.accountList");
//Get the target object
var selectedItem = event.currentTarget;
//Get the selected item index
var index = selectedItem.dataset.record;
accountList.splice(index, 1);
component.set("v.accountList", accountList);
},

save: function(component, event, helper) {
if (helper.validateAccountList(component, event)) {
helper.saveAccountList(component, event);
}
},
})

CreateMultipleAccountHelper.js
({
addAccountRecord: function(component, event) {
//get the account List from component
var accountList = component.get("v.accountList");
//Add New Account Record
accountList.push({
'sobjectType': 'Account',
'Name': '',
'AccountNumber': '',
'Phone': ''
});
component.set("v.accountList", accountList);
},

validateAccountList: function(component, event) {
//Validate all account records
var isValid = true;
var accountList = component.get("v.accountList");
for (var i = 0; i < accountList.length; i++) {
if (accountList[i].Name == '') {
isValid = false;
alert('Account Name cannot be blank on row number ' + (i + 1));
}
}
return isValid;
},

saveAccountList: function(component, event, helper) {
//Call Apex class and pass account list parameters
var action = component.get("c.saveAccounts");
action.setParams({
"accList": component.get("v.accountList")
});
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
component.set("v.accountList", []);
alert('Account records saved successfully');
}
});
$A.enqueueAction(action);
},
})

Thursday, December 1, 2016

Expression Operators in Lightning Components

The expression language supports operators to enable you to create more complex expressions.

Arithmetic Operators

Expressions based on arithmetic operators result in numerical values.

Operator	Usage	Description
`+`	`1 + 1`	Add two numbers.
`-`	`2 - 1`	Subtract one number from the other.
`*`	`2 * 2`	Multiply two numbers.
`/`	`4 / 2`	Divide one number by the other.
`%`	`5 % 2`	Return the integer remainder of dividing the first number by the second.
`-`	`-v.exp`	Unary operator. Reverses the sign of the succeeding number. For example if the value of `expenses` is `100`, then `-expenses` is `-100`.

Numeric Literals

Literal	Usage	Description
Integer	`2`	Integers are numbers without a decimal point or exponent.
Float	`3.14` `-1.1e10`	Numbers with a decimal point, or numbers with an exponent.
Null	`null`	A literal null number. Matches the explicit null value and numbers with an undefined value.

String Operators

Expressions based on string operators result in string values.

Operator	Usage	Description
`+`	`'Title: ' + v.note.title`	Concatenates two strings together.

String Literals

String literals must be enclosed in single quotation marks 'like this'.

Literal	Usage	Description
string	`'hello world'`	Literal strings must be enclosed in single quotation marks. Double quotation marks are reserved for enclosing attribute values, and must be escaped in strings.
\<escape>	`'\n'`	Whitespace characters: `\t` (tab) `\n` (newline) `\r` (carriage return) Escaped characters: `\"` (literal ") `\'` (literal ') `\\` (literal \)
Unicode	`'\u####'`	A Unicode code point. The # symbols are hexadecimal digits. A Unicode literal requires four digits.
null	`null`	A literal null string. Matches the explicit null value and strings with an undefined value.

Comparison Operators

Expressions based on comparison operators result in a true or false value. For comparison purposes, numbers are treated as the same type. In all other cases, comparisons check both value and type.

Operator	Alternative	Usage	Description
`==`	`eq`	`1 == 1` `1 == 1.0` `1 eq 1` `undefined==null`evaluates to `true`.	Returns `true` if the operands are equal. This comparison is valid for all data types. Don’t use the `==` operator for objects, as opposed to basic types, such as Integer or String. For example, `object1==object2` evaluates inconsistently on the client versus the server and isn’t reliable.
`!=`	`ne`	`1 != 2` `1 != true` `1 != '1'` `null != false` `1 ne 2`	Returns `true` if the operands are not equal. This comparison is valid for all data types.
`<`	`lt`	`1 < 2` `1 lt 2`	Returns `true` if the first operand is numerically less than the second. You must escape the `<` operator to `<` to use it in component markup. Alternatively, you can use the `lt` operator.
`>`	`gt`	`42 > 2` `42 gt 2`	Returns `true` if the first operand is numerically greater than the second.
`<=`	`le`	`2 <= 42` `2 le 42`	Returns `true` if the first operand is numerically less than or equal to the second. You must escape the `<=` operator to `<=` to use it in component markup. Alternatively, you can use the `le` operator.
`>=`	`ge`	`42 >= 42` `42 ge 42`	Returns `true` if the first operand is numerically greater than or equal to the second.

Logical Operators

Expressions based on logical operators result in a true or false value.

Operator	Usage	Description
`&&`	`isEnabled && hasPermission`	Returns `true` if both operands are individually true. You must escape the `&&` operator to `&&` to use it in component markup. Alternatively, you can use the `and()` function and pass it two arguments. For example, `and(isEnabled, hasPermission)`.
`\|\|`	`hasPermission \|\| isRequired`	Returns `true` if either operand is individually true.
`!`	`!isRequired`	Unary operator. Returns `true` if the operand is false. This operator should not be confused with the `!` delimiter used to start an expression in `{!`. You can combine the expression delimiter with this negation operator to return the logical negation of a value, for example,`{!!true}` returns `false`.

Logical Literals

Logical values are never equivalent to non-logical values. That is, only true == true, and only false == false; 1 != true, and 0 != false, and null != false.

Literal	Usage	Description
true	`true`	A boolean `true` value.
false	`false`	A boolean `false` value.

Conditional Operator

There is only one conditional operator, the traditional ternary operator.

Operator	Usage	Description
`? :`	`(1 != 2) ? "Obviously" : "Black is White"`	The operand before the `?` operator is evaluated as a boolean. If true, the second operand is returned. If false, the third operand is returned.

Monday, November 14, 2016

Get Selected HTML or Lightning component in Aura Iterator

How to detect event from Lightning Component and HTML5 components in Aura Iterator

Get selected item in aura iterator component

Coming from Visualforce background, most of us are well aware about repeater component. Same way, Lightning also offers iterator component.

Detecting Selected Lightning Component in Iterator

Usage is very simple, It is used to iterate over collection and render some HTML / Lightning component dynamically as shown below

1<aura:component>

2  <aura:iteration items="1,2,3,4,5" var="item">

3    <meter value="{!item}"/>

4  </aura:iteration>

5</aura:component>

In above example, each element in collection can be referred using variable “item”. Most of time we find ourselves in situation where we need to get value or component selected in iterator. As we don’t know upfront, how many items would be there, so identifying selected item at run time seems little bit tricky but believe me it easy.

Let’s dive into water and consider below code snippet of Lightning

1<aura:iteration items="{!v.lstItem}" var="item">

2 

3<ui:inputText change="{!c.textChange}" class="slds-input slds-m-top--large" label="" value="{!item.companyName}"/>

4 

5</aura:iteration>

In above code, we have used standard Lightning component ui:inputText and onchange event, we want to find value entered in that text box.

Below is sample code snippet from client side controller

1textChange: function(cmp, event,helper) { 

2            var target = event.getSource(); 

3            var txtVal = target.get("v.value") ;

4            console.log('Selected Value is '+txtVal); 

5    }

We have used event.getSource() method to detect component responsible to generate event. once component is found, we can use target.get(“v.value”). Aura components does not support HTML 5 data attributes and therefore we can not have any other information saved as attribute on components. If we need to store some other information, then need to come up with work around like using class, title or alt attributes.

Detecting Selected HTML Component in Iterator

If we need to store more than one value on element, Aura components could not be solution and we can move to HTML5 components. Lets consider that we have used HTML components in aura iterator tag

1<aura:iteration items="{!v.lstItem}" var="item" indexVar="index">

2<input data-selected-Index="{!index}" onchange="{!c.textChange}" type="text" value="{! item.companyName}" class="slds-input slds-m-top--large" />

3</aura:iteration>

In above example, we have saved value along with index of component in data attribute supported by HTML 5. Index of component in aura:iteration can be referred using indexVar attribute. Related code snippet for client side controller will look like

1textChange: function(cmp, event,helper) {

2  var target = event.target;

3var dataEle = target.getAttribute("data-selected-Index");

4console.log("v.selectedItem", "Component at index "+dataEle+" has value "+target.value);

5}

Below is complete source code showing how to detect at run time that selected component is Lightning Component or HTML5 component

IteratorDemo.cmp

1<aura:component >

2    <aura:attribute name="lstItem" type="Object[]" />

3    <aura:attribute name="selectedItem" type="String" default="Changed Text would be displayed here"/>

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

5<div class="slds-grid slds-wrap">

6<div class="slds-col slds-size--1-of-2">

7<div class="slds-box slds-box--small slds-theme--shade slds-text-align--center">

8<h3 class="slds-text-heading--large">Iterator on Lightning Component</h3>  

9                <aura:iteration items="{!v.lstItem}" var="item">

10                        <ui:inputText change="{!c.textChange}" class="slds-input slds-m-top--large"label="" value="{!item.companyName}"/>

11                </aura:iteration> 

12            </div>

13        </div>

14<div class="slds-col slds-size--1-of-2">

15<div class="slds-box slds-box--small slds-theme--shade slds-text-align--center">

16<h3 class="slds-text-heading--large">Iterator on HTML Component</h3> 

17                <aura:iteration items="{!v.lstItem}" var="item" indexVar="index">

18                        <input data-selected-Index="{!index}" onchange="{!c.textChange}" type="text"value="{! item.companyName}" class="slds-input slds-m-top--large" /> 

19                </aura:iteration>

20            </div>

21        </div>

22<div class="slds-col slds-align--absolute-center slds-size--2-of-2">

23<div class="slds-size--1-of-2 slds-m-top--large slds-text-heading--large">

24                {!v.selectedItem}

25            </div>

26        </div>

27    </div>

28</aura:component>

IteratorDemoController.js

1({

2    initJSONData : function(component, event, helper) {

3        helper.initJSONData(component, event, helper);

4    },

5    textChange: function(cmp, event,helper) {

6        helper.textChange(cmp, event,helper);

7    }

8})

IteratorDemoHelper.js

1({

2    initJSONData : function(component, event, helper){

3        component.set("v.lstItem",helper.getSampleJSON());

4         

5    },

6    getSampleJSON : function(){

7        return  [ { "companyName" : "Salesforce" } ,

8                 { "companyName" : "IBM" },

9                 { "companyName" : "Oracle" } ,

10                 { "companyName" : "Twitter" }]  ;

11    },

12    textChange: function(cmp, event,helper) { 

13        if(event.getSource){

14            var target = event.getSource(); 

15            var txtVal = target.get("v.value") ;

16            cmp.set("v.selectedItem",txtVal);  

17        }else{

18            var target = event.target; 

19            var dataEle = target.getAttribute("data-selected-Index");

20            cmp.set("v.selectedItem", "Component at index "+dataEle+" has value "+target.value);

21        }

22          

23    }

24})