Building Hybrid Remote Apps with Mobile SDK and Remote Objects

1. Barry Hughes Senior Developer Barry.hughes@bluewavegroup.eu @barryhughes Look Ma, No Apex Mobile Apps with RemoteObjects and Mobile SDK

2. Safe Harbor Safe harbor statement under the Private Securities Litigation Reform Act of 1995: This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services. The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of any litigation, risks associated with completed and any possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-K for the most recent fiscal year and in our quarterly report on Form 10-Q for the most recent fiscal quarter. These documents and others containing important disclosures are available on the SEC Filings section of the Investor Information section of our Web site. Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.

3. About Blue Wave Group and Me • Based in the UK and Ireland • 30+ Employees • IBM Premier Partner (since 2000) • Salesforce Cloud Alliance Partner (since 2009) • IBM Principal Certified Developer (since 2000) • Salesforce Certified Advanced Developer (since 2013) • Certified App Builder & Platform Developer I & II • Co-organiser of Salesforce Developer Group in Dublin, Ireland • Salesforce Certified Instructor – EMEA (since 2012) Hello DEV501 people! Barry Hughes

4. Inspiration for an App • …and a presentation ‘Extra Topics’ in DEV501 classes Visualforce Remote Objects Could I build a hybrid remote app with no Apex? • Needed an idea for an app • Internal Blue Wave Requirement • Filling out my Project Timesheets

5. Salesforce Mobile Development • There are many options! Hybrid Apps (Mobile SDK) • Native Apps • (Mobile SDK) 3rd Party Frameworks

6. The Goal for the Project Timesheets app • Our Brand, Our Logo, Our Icon • Focused on a Specific Task Fast, inexpensive development • Minimize development learning curve • Use existing skills • Single Page Application Architecture

7. What I will use • Keeping it simple • Hybrid Remote App (Mobile SDK) • Visualforce with HTML5 and CSS3 • Bootstrap • Angularjs • JQuery • C3.js for Charting • What features and functionality could be delivered in a SPA using these tools?

8. Demo Project Timesheets Mobile App

9. The app on a phone

10. Code Snippets • remoteObjectModel • generate JavaScript model classes, one per sObject, which can be used to make data access calls directly from your JavaScript code. • require Object and field API names • Fields are accessible in JavaScript if they are defined here remoteObjects Allows for proxy objects that enable basic Querying and DML operations on sObjects directly from JavaScript <!-- Remote Objects definition to set accessible sObjects and fields --> <apex:remoteObjects > <apex:remoteObjectModel name="Project__c” fields="Id,Name,Opportunity_Name__c,Customer_Name__c" /> <apex:remoteObjectModel name=”Project_Timesheet__c" jsShorthand=”ts" fields=”Id, Project__c, Date_of_Work__c, …"/> </apex:remoteObjects> <!– JavaScript object (JSON) representation of a Salesforce object with the fields specified above  varoSfProject = new RemoteObjectModel.Project__c(); varoSfTimesheet = new RemoteObjectModel.Project_Timesheet__c(); or varoSfTimesheet = new RemoteObjectModel.ts(); Remote Objects component Javascript Object creates a Javascript object object from a defined remoteObject’s data model • jsShorthand • maps the full SalesforceAPIname to a simpler, shorter name to use in your JavaScript code. • In managed packages, eliminates the use of your organization’s namespace in the packaged code

11. Code Snippets Project Timesheet Object JavaScript object that will now allows data querying Returning a list of records Build Query Parameters JavaScript object that builds a filtered, ordered, limited and offset query (JSON) • <!-- JavaScript to make Remote Objects calls (Queries)  aTimesheet = []; • varoSfTimesheet = new RemoteObjectModel.Project_Timesheet__c(); varQueryParam = { where: { Consultant_Name__c: {eq: '{!$User.FirstName} {!$User.LastName}’} }, • orderby: [ {Date_of_Work__c: "DESC"} , {Customer_Name__c: "ASC"} ] , • limit: timesheet_PageSize }; • QueryParam.offset= 100; • oSfTimesheet.retrieve( QueryParam, function( err, records ) { // error } • angular.forEach( records, function( oTimesheet ) { • varsId = oTimesheet.get( 'Id' ); • if( sId ) { • aTimesheetList.push( { Id: sId, Name : oTimesheet.get('Name' ) • , Date_of_Work__c: oTimesheet.get('Date_of_Work__c' ) • , Project_Name__c : oTimesheet.get('Project_Name__c' ) • , Project_Name_Text__c : oTimesheet.get('Project_Name_Text__c' ) • …… • } ); Execute the Query RemoteObjectModel has a retrieve method that executes SOQL queries and returns an array of data (JSON) Collect the Data The records variable can be looped over to push record data into the aTimesheet array.

12. Code Snippets Saving a Record Javascript code calls Save function passing the Project Timesheet object. If the object’s ID field is null, we know it is a new record A gotcha! • varfSave = function( oTimesheet ) { • varbNew = ( oTimesheet.Id == null ); • // Cannot do a complete copy as we are referencing non-writeable fields • // var c = new RemoteObjectModel.Project_Timesheet__c( angular.copy( oTimesheet ) );  Not a good idea!! • // instead we create a new timesheet object and set it up with the current timesheet values • varc = new RemoteObjectModel.Project_Timesheet__c(); • c.set('Id', oTimesheet.Id); // Not setting the Id - used as part of the upsert • c.set('Date_of_Work__c', oTimesheet.Date_of_Work__c); • c.set('Billable__c', oTimesheet.Billable__c); • c.set('Consultant_Name__c', oTimesheet.Consultant_Name__c); • c.set('Duration__c', oTimesheet.Duration__c); • c.upsert( function( err, results ) { if( err ) { return; } • if( bNew && !err ) { • oTimesheet.Id = results[0]; • aTimesheetList.push( oTimesheet ); • bLoaded = false; • } else if( !bNew && !err ) { bLoaded= false; } Formula Fields If the remoteObjectModel has included formula fields, saving the passed in Timesheet object will fail (can’t save those). New Object A new remoteObjectModel object can be created and populated using .set DML Using upsert here (Summer 14) to cater for inserts and updates. insert, update, delete also available

13. Pros (1) Keeping it simple

14. Pros (2) Keeping it simple

15. Cons (1) Where there are issues

16. Cons (2) Where there are issues

17. Opinion Thumbs Up! A worthwhile exercise • Easy to use and focused on a need – our consultants really like it • Its is a very fast way to create a simple app – development time is less as there are no apex classes required (Though AngularJS tests should be considered). • Kept the SPA in a single Visualforce Page – should have created a suite of js files • Ionic uses similar skillset to create this app. • forcetk.js, sforce.jscould also be used in a Visualforce page to create the same app. • A good app to recreate to learn other skill sets (Heroku, Native, Lightning)

18. Speaking of Lightning How relevant are Visualforce Remote Objects now we can create Lightning Components? Elephant in the room? “Visualforce as a JavaScript Application Container …. is a perfectly good way to build interactive applications today. It’s the reason we originally built toolkits like Remote Objects and JavaScript remoting. If you’re a confident AngularJS or React or other JavaScript framework developer, your expertise will take you a long way developing apps for Salesforcewith the tools you know.” Trailhead ‘User Interface Development Considerations’

19. Speaking of Lightning Elephant in the room? Awishlist….. • Can we have a set of Lightning Component tags that allow for the same functionality as Visualforce Remote Objects? • Can we remove the need for Apex in Lightning? (@AuraEnabled != @RemoteAction) But one thing we can do….. • The Mobile SDK DOES allow us to open a Lightning Application as a hybrid remote application!

20. Useful Links The great code giveaway….. All code and step-by-step instructions are at http://devinthecloud.wordpress.com(including all of the code!!) All about Visualforce Remote Objects: https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_remote_objects.htm and an excellent blog post here https://developer.salesforce.com/page/Building_Single_Page_Apps_with_JavaScript_and_Visualforce_Remote_Objects

21. Useful Links (2) The great code giveaway….. Mobile SDK and Trailhead https://developer.salesforce.com/trailhead/trail/mobile_sdk_intro Add charts to your Visualforce pages http://c3js.org/ Create icons and splash screens for your app: http://ticons.fokkezb.nl/ http://makeappicon.com/

22. Any Questions?