Playing with buttons

lightning:buttonMenu

Demo

greeter2 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

buttonIconStateful 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

button group 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();

results matching ""

    No results matching ""