This tutorial comprise Lightning Design System and Lightning component to manage users from Salesforce1.
- Create Lightning component from Developer console by going Setup-> Developer console-> File -> New -> Lightning component and name it Manage_User
- Create new apex class in your code with following code.
public class ManageUsers{ @AuraEnabled public static List<User> getUsers(){ List<User> user = [select id,Name,isActive from user]; return user; } @AuraEnabled public static String updateUser(String Userid){ List<User> user = [select id,Name,isactive from user where id=:Userid limit 1]; if(user[0].isactive==true) user[0].isactive=false; else user[0].isactive=true; update user; return 'User updated successfully'; } }
- Create Manage_UserHelper.js with following code which will communicate with apex controller.
({ //Fetch the accounts from the Apex controller getUserList: function(component) { var action = component.get("c.getUsers"); //Set up the callback action.setCallback(this, function(actionResult) { component.set("v.Users", actionResult.getReturnValue()); }); $A.enqueueAction(action); }, deActivateUser:function(component,userid,event) { event.target.setAttribute("label","Active"); var action = component.get("c.updateUser"); action.setParams({ "Userid" : userid }); var self = this; action.setCallback(this, function(actionResult) { var target = event.target; if(target.innerHTML=='DeActivate') target.innerHTML='Activate'; else target.innerHTML='DeActivate'; component.set("v.response", actionResult.getReturnValue()); }); $A.enqueueAction(action); } })
- Create Manage_User.cmp with following code
<aura:component controller="ManageUsers" implements="flexipage:availableForAllPageTypes"> <style> .hideme { display:none; } .showme { display:block; float:left; } </style> <aura:handler name="init" action="{!c.doInit}" value="{!this}" /> <aura:attribute name="Users" type="List"/> <aura:attribute name="response" type="String"/> <ltng:require styles="/resource/SLDS0102/assets/styles/salesforce-lightning-design-system-ltng.css" /> <div class="slds"> <div class="slds-notify slds-notify--alert slds-theme--inverse-text slds-theme--alert-texture" role="alert"> <span class="slds-assistive-text">Info</span> <h2>{!v.response}</h2> </div> <table class="slds-table slds-table--bordered slds-table--striped"> <thead> <tr> <th scope="col"><span class="slds-truncate">Name</span></th> <th scope="col"><span class="slds-truncate">Details</span></th> </tr> </thead> <tbody> <aura:iteration items="{!v.Users}" var="user"> <tr> <td> {!user.Name}</td> <td> <button id="{!user.Id}" dataid="{!user.Id}" data="{!user.Id}" onclick="{!c.showDetails}" class="slds-button slds-button--neutral"> <aura:if isTrue="{!user.IsActive}"> DeActivate <aura:set attribute="else"> Activate </aura:set> </aura:if> </button> </td> </tr> </aura:iteration> </tbody> </table> </div> </aura:component>
- Lightning design system is part of this package so Install following lightning design system package in to your org
https://login.salesforce.com/packaging/installPackage.apexp?p0=04t61000000T0UT
- Create a new lightning application and add following component to it
<aura:application > <c:Manage_User /> </aura:application>
If everything goes fine you can see following output.
Comments