Playing with buttons
lightning:buttonMenu
Demo
Code : Component: Greeter.cmp
URL: Repo
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome"
access="global" >
<aura:attribute name="greeting" type="String" default="Hello World"/>
<lightning:button label="{!v.greeting}" onclick="{!c.changeGreeting}" />
<lightning:buttonMenu iconName="utility:settings" alternativeText="Settings"
onselect="{! c.handleLangMenuSelect }">
<lightning:menuItem label="English" value="en" />
<lightning:menuItem label="Tamil" value="ta"/>
<lightning:menuItem label="Hindi" value="hi"/>
<lightning:menuItem label="Malayalam" value="ml" />
<lightning:menuItem label="French" value="fr"/>
<lightning:menuItem label="Spanish" value="es" />
<lightning:menuItem label="Italian" value="it" />
<lightning:menuItem label="Urdu" value="ur" />
<lightning:menuItem label="Kannada" value="kn" />
<lightning:menuItem label="Telugu" value="te" />
</lightning:buttonMenu>
</aura:component>
Code : Controller: GreeterController.js
// Component Controller
// it can have handlers
//
// Controller can make use of functions in the Helper
//
// Helper contains reusable methods the Controller can make use of
//
({
// onclick handler for the button
// brings in 'component' and 'helper'
changeGreeting : function(component, event, helper) {
// set this component variable (v.greeting) to the 'newGreeting'
// with the help of the helper function : updateGreeting(component)
helper.updateGreeting(component);
},
//onselect handler for the buttonMenu
handleLangMenuSelect: function(component, event, helper) {
helper.updateGreetingGivenLang(component, event);
}
})
Code : Helper: GreeterHelper.js
// Helper
// Helper provides reusable functions to the Controller
// -------------------Benefits of the helper----------------------
/* Since Helper is shared across everything,
* it allows us to share and keep logic across of Controllers and Renderers in one place
*
* It also helps us keep logic within Controllers and Renderers lean.
*/
// ----------------------------------------------------------------
({
updateGreeting : function(component) {
// get a randomized greeting message
var newGreetings= ["Bonjour!", "வணக்கம் ", " Buenos días", "Buon giorno!", " السلام علیکم", "ನಮಸ್ಕಾರ", "నమస్కారం " ];
var rand = Math.floor((Math.random() * 6 ) );
// update the button label with the new lang greeting
component.set("v.greeting", newGreetings[rand]);
},
// updates the given button (component ) text to
// value got out-of onselect event from the buttonMenu component
updateGreetingGivenLang : function(component, event) {
var greetLang = { "en": "Hello World",
"fr": "Bonjour!",
"ta": "வணக்கம் ",
"es": " Buenos días",
"it": "Buon giorno!",
"ur": " السلام علیکم",
"kn": "ನಮಸ್ಕಾರ",
"te": "నమస్కారం ",
"ml": "നമസ്തേ",
"hi": "नमस्ते ।"
}
// value got out-of onselect event from the buttonMenu component
var lang = event.getParam('value');
// update the button label with the new lang greeting
component.set("v.greeting", greetLang[lang]);
}
})
lightning:buttonIconStateful and lightning:badge
Demo
Code : Component: Greeter.cmp
URL: Repo
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome"
access="global" >
<!-- button -->
<aura:attribute name="greeting" type="String" default="Hello World"/>
<lightning:button label="{!v.greeting}" onclick="{!c.changeGreeting}" />
<!-- buttonMenu -->
<lightning:buttonMenu iconName="utility:settings" alternativeText="Settings"
onselect="{! c.handleLangMenuSelect }">
<lightning:menuItem label="English" value="en" />
<lightning:menuItem label="Tamil" value="ta"/>
<lightning:menuItem label="Hindi" value="hi"/>
<lightning:menuItem label="Malayalam" value="ml" />
<lightning:menuItem label="French" value="fr"/>
<lightning:menuItem label="Spanish" value="es" />
<lightning:menuItem label="Italian" value="it" />
<lightning:menuItem label="Urdu" value="ur" />
<lightning:menuItem label="Kannada" value="kn" />
<lightning:menuItem label="Telugu" value="te" />
</lightning:buttonMenu>
<!-- buttonIconStateful and badge -->
<aura:attribute name="numClicks" type="Integer" default="0"/>
<aura:attribute name="liked" type="Boolean" default="true"/>
<lightning:buttonIconStateful iconName="utility:like"
selected="{!v.liked}"
alternativeText="Like"
onclick="{! c.handleLikedToggle }"/>
<lightning:badge label="{!v.numClicks}" />
</aura:component>
Code : Controller: GreeterController.js
// Component Controller
// it can have handlers
//
// Controller can make use of functions in the Helper
//
// Helper contains reusable methods the Controller can make use of
//
({
// onclick handler for the button
// brings in 'component' and 'helper'
changeGreeting : function(component, event, helper) {
// set this component variable (v.greeting) to the 'newGreeting'
// with the help of the helper function : updateGreeting(component)
helper.updateGreeting(component);
},
//onselect handler for the buttonMenu
handleLangMenuSelect: function(component, event, helper) {
helper.updateGreetingGivenLang(component, event);
},
// handles the buttonIconStateful on select event
handleLikedToggle : function (component, event) {
var liked = component.get("v.liked");
component.set("v.liked", !liked);
var currentNumClicks = component.get("v.numClicks");
currentNumClicks++;
component.set("v.numClicks", currentNumClicks)
}
})
Code : Helper: GreeterHelper.js
// Helper
// Helper provides reusable functions to the Controller
// -------------------Benefits of the helper----------------------
/* Since Helper is shared across everything,
* it allows us to share and keep logic across of Controllers and Renderers in one place
*
* It also helps us keep logic within Controllers and Renderers lean.
*/
// ----------------------------------------------------------------
({
updateGreeting : function(component) {
// get a randomized greeting message
var newGreetings= ["Bonjour!", "வணக்கம் ", " Buenos días", "Buon giorno!", " السلام علیکم", "ನಮಸ್ಕಾರ", "నమస్కారం " ];
var rand = Math.floor((Math.random() * 6 ) );
// update the button label with the new lang greeting
component.set("v.greeting", newGreetings[rand]);
},
// updates the given button (component ) text to
// value got out-of onselect event from the buttonMenu component
updateGreetingGivenLang : function(component, event) {
var greetLang = { "en": "Hello World",
"fr": "Bonjour!",
"ta": "வணக்கம் ",
"es": " Buenos días",
"it": "Buon giorno!",
"ur": " السلام علیکم",
"kn": "ನಮಸ್ಕಾರ",
"te": "నమస్కారం ",
"ml": "നമസ്തേ",
"hi": "नमस्ते ।"
}
// value got out-of onselect event from the buttonMenu component
var lang = event.getParam('value');
// update the button label with the new lang greeting
component.set("v.greeting", greetLang[lang]);
}
})
lightning:buttonGroup
Demo
Code : Component: Greeter.cmp
URL: Repo
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome"
access="global" >
<aura:attribute name="greeting" type="String" default="Hello World"/>
<aura:attribute name="imgsrc" type="String"
default="https://raw.githubusercontent.com/mohan-chinnappan-n/lex-book-code-samples/master/Greeter-2/img/l-donkey.png"/>
<!-- buttonIconStateful and badge -->
<aura:attribute name="numClicks" type="Integer" default="0"/>
<aura:attribute name="liked" type="Boolean" default="true"/>
<lightning:card title="Greeter"
iconName="standard:account" footer="">
<p>lightning:card <hr/></p>
<!-- button -->
<lightning:button label="{!v.greeting}" onclick="{!c.changeGreeting}" />
<aura:set attribute="actions">
<!-- buttonMenu -->
<p>lightning:buttonMenu</p>
<lightning:buttonMenu iconName="utility:settings"
alternativeText="Lang Settings"
onselect="{! c.handleLangMenuSelect }">
<lightning:menuItem label="English" value="en" />
<lightning:menuItem label="Tamil" value="ta"/>
<lightning:menuItem label="Hindi" value="hi"/>
<lightning:menuItem label="Malayalam" value="ml" />
<lightning:menuItem label="French" value="fr"/>
<lightning:menuItem label="Spanish" value="es" />
<lightning:menuItem label="Italian" value="it" />
<lightning:menuItem label="Urdu" value="ur" />
<lightning:menuItem label="Kannada" value="kn" />
<lightning:menuItem label="Telugu" value="te" />
</lightning:buttonMenu>
</aura:set>
<!-- card body -->
<p class="slds-p-horizontal_small">
<br/>
<p>lightning:buttonIconStateful</p>
<lightning:buttonIconStateful iconName="utility:like"
selected="{!v.liked}"
alternativeText="Like"
onclick="{! c.handleLikedToggle }"/>
<lightning:badge label="{!v.numClicks}" />
<!-- buttonGroup -->
<hr/>
<h4>lightning:buttonGroup</h4>
<lightning:buttonGroup>
<lightning:button label="Donkey" aura:id="donkey" variant="brand" onclick="{!c.showLove}"/>
<lightning:button label="Donkey-2" aura:id="baby-donkey-1" onclick="{!c.showLove}"/>
<lightning:button label="Cow" aura:id="cow" onclick="{!c.showLove}"/>
<lightning:button label="Mule" aura:id="mule" onclick="{!c.showLove}"/>
<lightning:button label="Horse" aura:id="horse" onclick="{!c.showLove}"/>
<lightning:button label="Goat-1" aura:id="goat-1" onclick="{!c.showLove}"/>
<lightning:button label="Goat-2" aura:id="goat-2" onclick="{!c.showLove}"/>
<lightning:button label="Peacock" aura:id="peacock-1" onclick="{!c.showLove}"/>
<lightning:buttonIcon iconName="utility:close"
aura:id="donkey"
variant="brand"
onclick="{! c.showLove }"
alternativeText="Show Donkey please!" />
</lightning:buttonGroup>
<br/>
<img src="{!v.imgsrc}"/>
</p>
</lightning:card>
</aura:component>
Code : Controller: GreeterController.js
// Component Controller
// it can have handlers
//
// Controller can make use of functions in the Helper
//
// Helper contains reusable methods the Controller can make use of
//
({
// onclick handler for the button
// brings in 'component' and 'helper'
changeGreeting : function(component, event, helper) {
// set this component variable (v.greeting) to the 'newGreeting'
// with the help of the helper function : updateGreeting(component)
helper.updateGreeting(component);
},
//onselect handler for the buttonMenu
handleLangMenuSelect: function(component, event, helper) {
helper.updateGreetingGivenLang(component, event);
},
// handles the buttonIconStateful on select event
handleLikedToggle : function (component, event) {
var liked = component.get("v.liked");
component.set("v.liked", !liked);
var currentNumClicks = component.get("v.numClicks");
currentNumClicks++;
component.set("v.numClicks", currentNumClicks)
},
// handles the buttonGroup button onclick event
showLove: function(component, event) {
// event.getSource().getLocalId() returns the aura:id of the clicked button.
// event.getSource().get("v.name") returns the name of the clicked button
//
var item = event.getSource().getLocalId();
var type = '.png';
if (item === 'baby-donkey-1') type = '.gif';
var imgSrcBase = "https://raw.githubusercontent.com/mohan-chinnappan-n/lex-book-code-samples/master/Greeter-2/img/l-";
var imgSrc = imgSrcBase + item + type;
component.set("v.imgsrc",imgSrc);
},
})
Code : Helper: GreeterHelper.js
// Helper
// Helper provides reusable functions to the Controller
// -------------------Benefits of the helper----------------------
/* Since Helper is shared across everything,
* it allows us to share and keep logic across of Controllers and Renderers in one place
*
* It also helps us keep logic within Controllers and Renderers lean.
*/
// ----------------------------------------------------------------
({
updateGreeting : function(component) {
// get a randomized greeting message
var newGreetings= ["Bonjour!", "வணக்கம் ", " Buenos días", "Buon giorno!", " السلام علیکم", "ನಮಸ್ಕಾರ", "నమస్కారం " ];
var rand = Math.floor((Math.random() * 6 ) );
// update the button label with the new lang greeting
component.set("v.greeting", newGreetings[rand]);
},
// updates the given button (component ) text to
// value got out-of onselect event from the buttonMenu component
updateGreetingGivenLang : function(component, event) {
var greetLang = { "en": "Hello World",
"fr": "Bonjour!",
"ta": "வணக்கம் ",
"es": " Buenos días",
"it": "Buon giorno!",
"ur": " السلام علیکم",
"kn": "ನಮಸ್ಕಾರ",
"te": "నమస్కారం ",
"ml": "നമസ്തേ",
"hi": "नमस्ते ।"
}
// value got out-of onselect event from the buttonMenu component
var lang = event.getParam('value');
// update the button label with the new lang greeting
component.set("v.greeting", greetLang[lang]);
}
})
// let us toast it
var toastEvent = $A.get("e.force:showToast");
toastEvent.setParams({
"title": "Image shown!",
"message": "Toast from " + item
});
toastEvent.fire();