React-Native, Swift and Salesforce Mobile SDK

blog-post

Last week, Salesforce released a new version of their Mobile SDK – Salesforce Mobile SDK 4.0. And it is a big one. Full details of the release can be found here and the new Mobile SDK Developer Guide is available.

The eye-catching change (for me anyway) is the ability to create React Native apps when using forcedroid or forceios. Forceios also has a new option to create a Native Swift app. I have been looking into both React Native and Swift over the last few months and it is very cool that we can now easily create mobile apps for these.

I was first made aware of the new Mobile SDK changes from the excellent ‘Salesforce Mobile SDK: React Native tutorial‘ put together by Raja Rao DV (@rajaraodv), Developer Advocate at Salesforce. The tutorial concentrates on forceios to create a react-native app – but similar steps can be followed with forcedroid.

Screen Shot 2016-01-15 at 11.10.32 p.m.

I am an avid user of Udemy.com’s on-line tutorial service and have enrolled in Stephen Grider’s excellent Build Apps with React Native course. He has recently added a number of videos on React Native and Android – as android support was added in October 2015.

Rob Percival’s udemy course The Complete iOS 9 Developer Course – Build 18 Apps is also highly recommended.

I am currently re-writing my ‘Project Timesheets‘ SPA from Visualforce into a Lightning SPA. Once I’ve this done I intend on re-creating that app in React Native and Swift over the coming months. I will blog all results and code here.

Advertisements

Lightning components require My Domain

Hands up who’s gotten this message when running Lightning Applications since the Winter 16 release?

“Lightning components require My Domain. Please contact your system administrator for more information.”

To fix this, follow these steps

  1. Setup | Administer | Domain Management | My Domain
  2. Enter a domain name of your chosen. In the below screen shot, I am using a developer org which is why ‘-dev-ed’ is added to the end.Setting My Domain
  3. Check to see if  the domain used is available.
  4. Agree with the Terms & Conditions
  5. Click ‘Register Domain’
  6. It may take some time for Salesforce to register the domainDomain Registration Pending
  7. Once the domain is registered, re-open the ‘My Domain’ page to see new options:Click here to Login
  8. Click the ‘Click here to login’ button. This will login into Salesforce using the domain name selected.
  9. Click ‘Deploy to Users’ and agree with the alertDeploy to Users alert
  10. Now open your Lightning applications and all should work!My Lightning App is working again!

Winter 16: The Curious Incident of the chart with the form tag

Winter 16 has arrived and a fellow lotus-domino-now-a-Salesforce-Developer, Mark Myers (@stickfight) discovered the dead body of a visualforce page, with beautiful C3.js charts, speared by a garden fork an unknown illness.

The Charts stopped working.

The Visualforce page was still displaying, and the area the chart was to be displayed was apportioned correctly – just no chart being generated.

In order to illustrate this, I have created a simple Visualforce Page that displays a chart with c3.js. The following code displayed the chart fine before the Winter 16 rlease – but it does not now.

<apex:page docType="html-5.0" applyBodyTag="false" applyHtmlTag="false" showHeader="false" sidebar="false">
<html>
    <head>
        <!-- Load c3.css -->
        <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.css" rel="stylesheet" type="text/css" />
        <!-- Load d3.js and c3.js -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.js"></script>       
    </head>
<body>
<apex:form >
</apex:form>


<div id="chart"></div>


</body>
<script>
var chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ]
    }
});
    </script>    
    </html>
</apex:page>
C3.js not working in Winter 16

C3.js not working in Winter 16

Even more curious – there is no controller here nor is the Javascript doing a lot. And my Project Timesheets app – which uses c3.js – has no issues after the new release.

So, like our 15-year-old blog post hero – Christopher John Francis Boone, I decided to investigate and after stripping out Visualforce mark-up – I found the culprit.

<apex:form>

Removing this tag means the charts get rendered fine.

<apex:page docType="html-5.0" applyBodyTag="false" applyHtmlTag="false" showHeader="false" sidebar="false">
<html>
    <head>
        <!-- Load c3.css -->
        <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.css" rel="stylesheet" type="text/css" />
        <!-- Load d3.js and c3.js -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.js"></script>       
    </head>
<body>


<div id="chart"></div>


</body>
<script>
var chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ]
    }
});
    </script>    
    </html>
</apex:page>
C3.js is happy in Visualforce once more

C3.js is happy in Visualforce once more

Sometimes we like to avoid the <apex:form> tag to avoid View State limits and now it seems we, Javascript developers, have a new (unexplained) reason for avoiding it in our Visualforce.

Curious.

Look Ma – No Apex: Mobile Apps with RemoteObjects and Mobile SDK

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

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 entire app is contained in a single Visualforce page. I also use a static resource to bring in AngularJS and a javascript library to handle the tables. We also add extra fields to the Opportunity object and add 2 custom objects – Project__c and Project_Timesheet__c. These can be installed by installing this managed package.

The Visualforce page is quite long – almost 2000 lines – and really the javascript code should be split into separate JS files but it may be easier to follow at first in one page. It is typical for an AngularJS developer to use a structure like angular-seed and tools like bower to manage a project – but I have omitted this here.

The Code: Remote Objects
The page has no controller and relies on AngularJS for its logic, routing and interface. It uses javascript to retrieve, display and manage records in Salesforce using Visualforce Remote Objects.

Remote Objects are proxy objects defined by Visualforce tags and allow for basic querying and DML on the defined objects and fields via javascript. A single tag can contain child tags – one for each sObject in Salesforce. The API name of the sObject and the fields we want to include are defined in the remoteObjectModel tag.

Defining the remoteObjects tag

Defining the remoteObjects tag

To work with a remoteObjectModel in Javascript, define a javascript object and declare it as a new instance of a defined RemoteObjectModel tag in the page. A shorthand local variable can be used here instead of the API name of the Salesforce object.

Defining a JavaScript Object from a RemoteObjectModel

Defining a JavaScript Object from a RemoteObjectModel

The javascript objects can then be used to query for records. Query parameters, ordering, limit and offsets can be used. RemoteObjectModel has a retrieve method that executes queries and returns an error or an array of records in JSON. These can then be pushed into a javascript array for display.

Querying records with RemoteObjectModel

Querying records with RemoteObjectModel

To create a new record or update an existing record the RemoteObjectModel has insert, update, delete and upsert methods. It should be noted that a RemoteObjectModel can include formula fields which cannot be edited, so (as in the below example) a new javascript object should be created and values set within it in order to process the DML event.

Upserting a record 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

My Current Project Timesheets

Creating a Timesheet

Creating a Timesheet

Chart of Project Activities (c3.js)

Chart of Project Activities (c3.js)

My Project Timesheets - on iPhone

My Project Timesheets – on iPhone

Here is the slide deck for the presentation.

Speaking at Dreamforce 15

I am speaking at Dreamforce in San Francisco next week. I’m on the Mobile Theatre on Tuesday at 4.30pm (Pacific Time).

I will be showing (and giving away) the code and metadata for a Salesforce Mobile SDK application which should be especially useful for developers who have never created a Mobile SDK app before.

The app is contained in a single Visualforce page with no apex controller required and I only used those frameworks and tools the majority of developers have or can pick up very quickly:

  • Visualforce
  • HTML5
  • CSS3
  • Bootstrap
  • AngularJS v1.x
  • C3.js (for charting)

I will be posting the full instructions here over the weekend on how to get and install the code and metadata in your org.

New Salesforce Credentials

Salesforce have changed the credentials and requirements for developers. Up to now, there have been two credentials for developers, Salesforce Certified Developer and Salesforce Certified Advanced Developer. Now there are 3 new credentials that replace these: Salesforce Certified App Builder, Salesforce Certified Platform Developer I and Salesforce Certified Platform Developer II.

Developers who hold the original credentials do not automatically get the new credentials. Instead transition exams are available and can be completed now. New exams are in place to attain the new credentials for those who did not hold the previous credentials.

The Certified Developer and Advanced Developer exams are being retired this week.

As a Certified Advanced Developer, I had to sit 2 transition exams to achieve the 3 new credentials – which I’m glad to say I did successfully last week. Thankfully, Salesforce’s certification portal has excellent study guides which focussed any study I had to do and though the 2 exams were tricky, the topics covered were from those points outlined in the study guides.

I sat the App Builder Transition exam first. The study guide for it can be downloaded here and is essential reading. I was a bit wary of this one as I spend most of my time coding on the platform and not in the setup menu as often – and though the exam was tricky in places, overall it was pretty fair. The exam cost $100 ($50 for a re-take). It lasted 30 minutes with 20 multiple choice questions. You need to get 14 right to pass.

The second exam I sat was the Salesforce Certified Platform Developer I and II Transition Exam – study guide. This exam was free of charge. It was 30 minutes long and had 16 multiple-choice questions. You have to get 10 right to pass. This exam was also tricky in places and requires study.

According to the guides, you can take each of these exams a maximum of 3 times – after which, presumably, the full exam must be taken, thought that is not stated anywhere in the documentation.

The guides give urls to study material which was very helpful. The most eye-opening aspect of studying for the exams was the usefulness of Trailhead – it is a fantastic tool to learn. The Lightning Modules are definitely required for these 2 exams – and the information and exercises in the modules are highly recommended.

More info can be found at:
http://certification.force.com/pkb/articles/Public_KB/FAQ-Developer-Certification-Transition-Process

http://www.salesforce.com/campaigns/success-services/developer-certification-in-progress.jsp

http://certification.salesforce.com/developers

Interestingly, when completing the exam, the confirmation mails informed me that the logos will be available in a few weeks – so I haven’t changed the right side of this blog yet. I wonder if Salesforce will remove the old credentials from their verification tool and leave the newer ones? Is there an added value to stating that I have the current 3 credentials AND had the previous 2? I have already ‘lost’ my Advanced Developer Credential from 2013 according to the verification page:

Screen Shot 2015-09-10 at 07.59.51

Lightning Components Webinar Recording

I recorded a webinar during Salesforce’s Lightning Week last March showing how to build a simple Lightning Component application on Salesforce1.

I have been showing it to DEV501 course attendees and they encouraged me to post it here.

The link to do the tutorial is here: http://developerforce.github.io/lightning-components-tutorial/.

There is also an excellent tutorial here on Lightning Connect from Lightning Week.