This tutorial comprise Lightning Design System and Lightning component to manage users from Salesforce1.

  1. Create Lightning component from Developer console by going Setup-> Developer console-> File -> New -> Lightning component and name it Manage_User

Manage Users with Lightning Component

  1. 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';
 }
}

 

  1. 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);
 
 }
})

 

  1. 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>

  1. 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

  1. 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.

lightning-design-system