I recently shared a sample Employee Directory / Org Chart application built with React Native. That version of the application used a Node.js back-end. In this post, I’ll share the same application powered by a Salesforce back-end and built with the Salesforce Mobile SDK. Salesforce automatically provides the org chart data for users (employees) and contacts, so it makes a lot of sense to build this type of app on the Salesforce platform. The Salesforce Mobile SDK provides a series of services that make it easy to build React Native apps that integrate with Salesforce: authentication, Salesforce REST services library, push notification, encrypted database, offline synchronization, etc.
Watch the video to see the Employee Directory application in action:
Follow the steps below to install and run the application on your system. These instructions assume you are developing an iOS app on a Mac.
Step 1: Install React Native
Follow the React Native getting started instructions to install React Native. Make sure you select your Mobile OS and Development OS for the right instructions.
Step 2: Install the Salesforce Mobile SDK
- On the command prompt, type the following command to install CocoaPods:
sudo gem install cocoapods
CocoaPods is a dependency manager for Swift and Objective-C used by the Salesforce Mobile SDK to merge Mobile SDK modules into Xcode projects.
- Type the following command to install the Salesforce Mobile SDK for iOS:
sudo npm install -g forceios
Step 3: Create the Project
- Open a command prompt and type the following command to create a new React Native application using the Salesforce Mobile SDK:
forceios create
Answer the prompts as follows (adjust the package name and organization name as needed):
Enter your application type (native, native_swift, react_native, hybrid_local, hybrid_remote): react_native
Enter your application name: SalesforceEmployeeDirectory
Enter the package name for your app (com.mycompany.myapp): com.mycompany.orgchart
Enter your organization name (Acme, Inc.): MyCompany, Inc
Enter output directory for your app (leave empty for the current directory): - Navigate (cd) to the project directory:
cd SalesforceEmployeeDirectory
- Open a command prompt and type the following command to start the local server:
npm start
- Open another command prompt and type the following command to run the app in the emulator:
react-native run-ios
Step 4: Import Sample Data
- Sign up for a new Developer Edition.
- Click this link to install the OrgChart unmanaged package into your org. The package adds an ImportOrgChartData Visualforce page and two fields (Picture__c and Include_In_Org_Chart__c) to the Contact object.
- In the Developer Console, open the ImportOrgChartData Visualforce page. Click the Preview button, and click the Import Data button.
Step 4: Implement the Project
- Clone the sample app repository:
git clone https://github.com/ccoenraets/employee-directory-react-native-salesforce
- Copy the app folder from employee-directory-react-native-salesforce into your SalesforceEmployeeDirectory project folder
- Open index.ios.js. Delete the existing content and replace it with:
import {AppRegistry} from 'react-native'; import EmployeeDirectoryApp from './app/EmployeeDirectoryApp'; AppRegistry.registerComponent('SalesforceEmployeeDirectory', () => EmployeeDirectoryApp);
- Hit Cmd + R to refresh the app in the emulator
Code Highlights
There are two parts to the Salesforce integration in this application:
- Authentication: The auth object of the react-native-force module makes it easy to authenticate with Salesforce using OAuth. Check out the EmployeeDirectoryApp class for details.
- REST Services: The net object of the react-native-force module makes it easy to invoke the Salesforce Rest services. Check out the employee-service-salesforce module for details.