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