At Dreamforce 15, I will have the honour of speaking at the Mobile Theatre at 4.30pm on Day One (Tuesday September 15). The topic is mobile development on Salesforce – and creating your first app with the Salesforce Mobile SDK. And no apex is required.
Here is the slide deck for the presentation.
When introducing developers to Apex, one of the key points is that Apex is only used when you need it. Where you can take advantage of the Declarative and built-in features of the platform to fulfill requirements, then thats the optimum solution.
I also try to introduce developers to new development features where possible, and it was while bringing one of my classes through Visualforce Remote Objects that I got the inspiration to make a Mobile SDK app. I also owe James Steer a lot of credit for giving me example code that got me thinking.
The App: Project Timesheets
Blue Wave Technology (who I work for) use Salesforce to manage the business of winning Opportunities, managing project requirements and delivering for customers. The data model used is actually pretty simple; Opportunity records are won from which Project records are created to plan and schedule pieces of work. Blue Wave’s consultants then create Project Timesheet records to indicate work done and time spent on a project.
Project Timesheets Data Model
I wanted to take this model and make a simple but effective app that would allow me to update my project timesheet records quickly. I wanted to create a task-focussed app (ie manage my timesheets) that had our corporate logos and look & feel that had a familiar SPA (Single Page Application) architecture.
I also wanted to show other developers who may not have made mobile apps before how it is created so I stuck to a skill set that I see as common to many developers on the platform:
I also used c3.js to make charts.
The app required the installing and using Salesforce Mobile SDK to create a Hybrid Remote app, a process which doesn’t involve any extra code. Just follow the steps in this Trailhead Module and point to a Visualforce page.
The Visualforce Page:
The Code: Remote Objects
Defining the remoteObjects tag
Querying records with RemoteObjectModel
Upserting a record with RemoteObjectModel
Step-by-Step: Re-create the Project Timesheets Application
Most of the steps here are listed in the Getting Started with Hybrid Development trailhead module.
1. In your developer org install this unmanaged package (https://login.salesforce.com/packaging/installPackage.apexp?p0=04t24000000A459). The metadata is also available on github.
2. Install the Salesforce Mobile SDK along with its pre-requisites (See Installing Mobile SDK for Hybrid Development in link above).
Note: A good way to Install Ant is via homebrew
3. Create a Connected App in your org (see previous link). Ensure to copy out the Consumer Key and the callback URI.
4. Using Terminal or the Command Prompt, navigate to a directory where the application is to be saved
5. Create a Hybrid_Remote app with the command forcedroid create or forceios create.
6. These processes will ask for some settings as follows:
- Application type: hybrid_remote
- Application name: ProjectTimesheets
- Output directory: ProjectTimesheets
- Package name: com.company.projectTimesheets
- (forceios only) Organization name: Company Inc
- Start Page for app: /apex/projectTimesheetsConsole
- (forceios only) Connected App ID: Paste the consumer key from your connected app
- (forceios only) Connected App Callback URI: Paste the callback URL from your connected app
6. (forcedroid only) In your project directory, open the www/bootconfig.json file in a UTF-8 compliant text editor and replace the values of the following properties:
- remoteAccessConsumerKey: Paste the consumer key from your connected app
- oauthRedirectURI: Paste the callback URL from your connected app
7. Create icons and splash screens to add your branding to the app on the device by adding a graphic to http://ticons.fokkezb.nl/. Use a large graphic and follow the margin and centering recommendations on the site. Replace the folders in your application directory (look for a resources sub-folder) with the folders returned.
8. Run the app by adding it to XCode or Eclipse and running on a real or virtual device.
I am including screenshots of the app here:
My Current Project Timesheets
Creating a Timesheet
Chart of Project Activities (c3.js)
My Project Timesheets – on iPhone
Here is the slide deck for the presentation.