Force.com Mobile SDK 3.x – Critical Image Bug And How to Work Around It

software bugs6The Force.com Mobile SDK 3.x has brought about some welcome changes such as Cocoapods support, Gradle support, Cordova update to 3.7 and many more. However, it has also meant that some things which worked perfectly in Mobile SDK 2.x no longer work. One such critical bug relates to how the image URLs are handled in Mobile SDK 3.x hybrid apps.

Read on if you are one of those hybrid developers who’s either upgraded your app from Mobile SDK 2.x or are about to do so.

What exactly is the issue?

If your app is pulling an image from Salesforce which is configured using a formula field, it is no longer pulled down correctly using the Mobile SDK 3.x. This worked without any issues with 2.x so it took a lot of hair pulling, scratching (literally everywhere) and lots of work. We filed an issue on the Mobile SDK iOS repo.

Let’s analyse what’s changed

Essentially, the image URL generated by Mobile SDK 2.x had the format


https://x.xxx.content.force.com/servlet/servlet.ImageServer?id=xxxxx

But for some reason, with 3.x this changes to


https://x.xxx.content.force.com/servlet/rtaImage?eid=xxxxx

Let’s try some solutions 

1) Mobile SDK team was actually pro-active to respond and they asked us if we’d tried using bearer token URL. That didn’t help though as the Mobile SDK internally handles the bearer token as follows


var getRequestHeaders = function(client) { var headers = {};
       headers[client.authzHeader] = "Bearer " + client.sessionId;
        headers['Cache-Control'] = 'no-store';
        // See
        // http://www.salesforce.com/us/developer/docs/chatterapi/Content/intro_requesting_bearer_token_url.htm#kanchor36
         headers["X-Connect-Bearer-Urls"] = true;
        if (client.userAgentString !== null) {
            headers['User-Agent'] = client.userAgentString;
            headers['X-User-Agent'] = client.userAgentString;
        }
        return headers;

We tried a few more approaches but nothing clicked. We then went back into analysing the issue more deeply to see how the rtaimage URL parameters work and realised that it’s a session issue which may be resolved by hitting the froontdoor URL.

This is what worked

Essentially, the hack is to get current session via frontdoor url for the image.


$.ajax({url: forcetkClient.instanceUrl + "/secur/frontdoor.jsp?sid=" + forcetkClient.sessionId
, success:
function(result){ // my scuccess callback }});

On success callback, we set the same URL again on html image field and it then loads the image correctly.

Status Quo

The Mobile SDK team has accepted this issue as a valid bug but not provided a definitive ETA to fix this yet. I believe this has been broken due to the Cordova upgrade and I tried a few things to fix it directly in Cordova but that didn’t quiet work.

The above workaround is NOT the most elegant way to fix it but it does work. If you have run into the same issue, this may help. If you have a better solution in mind, please drop me a line.

 

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s