Tech logs: Embedding a custom application to Salesforce

Sales is the backbone of any organisation. Salesforce is a tool that makes selling things easier. It’s a software-as-a-service that makes converting those sweet opportunities into leads a piece of cake! So it’s no wonder that more and more companies are choosing Salesforce as their digital sales platform. This means more and more companies are thinking “Hmm, this Salesforce seems quite useful, but we really need to have this [specific feature that doesn’t exist and will never exist in Salesforce]".

While implementing and customising Salesforce is simpler than ever with the growing number of developer tools, creating modern and sleek experiences is still a bit of a struggle. Yes, the Lightning Web Components are very similar to React.js, but it’s not React.js. So sometimes these specific must-have features might be surprisingly hard to implement in Salesforce.

“Oh, how I wish that I could use just regular frameworks. Oh boy, how easy it would make my life!”, a developer might think when trying to implement something wild. To this developer, I will say: There is a way!

In fact, there are multiple ways.

“Do you mean that there is a way to embed custom applications to Salesforce in a way that provides a seamless user experience?”, the developer might ask. Yes, that’s exactly what I mean! There are actually two ways to do it: A Canvas Application and installing the application as a JS bundle.

Before continuing to read, there are a couple of questions you should ask yourself.

1. Is this really needed in your organisation? -> If no, then it’s not worth the hassle.
2. Will there be hugely complex interactions between the application and the Salesforce backend? -> If yes, then you should probably reconsider.

Also, note that this is not meant to be a technical guide on how to implement all of this. This is meant to help you to get started on your journey to designing your application architecture. Furthermore, this guide assumes that the reader is somewhat familiar with the basic Salesforce development concepts (Aura, Apex, LWC etc.). One more disclaimer – I am not a certified Salesforce developer, I am just a developer who has worked with Salesforce and tried to make the best use of it.

So let’s begin.

The scenario

Imagine that you’re a developer minding your own business. Suddenly a manager comes to you and says that the client really needs to display aggregated Salesforce account data as a 3D model. The requirements are simple: form the data into a polyhedron and implement it so that the user can make it spin.

Now you are sitting there and thinking how can you do this in Salesforce? It seems unreasonable. You google a bit and find a great looking library called Polyhedron.JS but it will only work with React.JS. You play around with it using mock data and the whole application is done in around a day – it looks really nice.

Now comes the tricky part. How do you get it to Salesforce?

Way One: Canvas Application

This is the most supported way! This is the most secure way that provides a lot of functionality out-of-the-box.

The developer can host the application in any cloud service. The official documentation just talks about Heroku but Azure, AWS and Google Cloud will work as well. The only requirement is that the host must be able to use HTTPS protocol.

The Canvas application is then added as a connected app. The authentication is done with either Oauth2 authorisation or using signed requests. However, bear in mind that the Oauth2 requires the user to log in separately, which can break the flow. Using signed requests provides a more seamless experience.

The Canvas App can be added to many different places in Salesforce. You can embed it to a component or display it independently. It offers quite a lot of flexibility in that regard.

So what’s the caveat? Why not use this all the time? Well, if you’re working with the Service Cloud and the user is always a logged-in user there is no caveat. Use this. It’s going to work.

However, if at some point this feature is moved to a Salesforce Community and there is a requirement that a guest user must be able to access the application, then this simply won’t work. They can’t even see the application as that would require authentication. Maybe there is a way to bypass this, but when I faced this issue, I didn’t find one.

Way Two: JS Bundle as a static resource into a Lightning Container

This is the way that will work with the Salesforce community and is accessible to guest users. So if that is the requirement, then this is what needs to be done:

Step one: Build your application bundle. With React and Webpack this is simple and well documented. NB: Your application needs to be bundled into a folder that has all required components (CSS, Static Resources, JS) and then zipped.

Step two: Upload your bundle zip as a static resource to your Salesforce organisation.

Step three: Embed your bundle into an Aura Lightning Container component.

You’re done!

With React, you can even use a library that allows you to call apex methods from the React application. You can also communicate with the application by posting and receiving messages. So it’s actually quite flexible in that regard.

So the flow could be something like this:

1. Aura component renders and in rendering sends data to the application.
2. The application receives data and displays it.
3. The user makes some changes to the data on the application and clicks submit.
4. The application sends a message to the Aura component.
5. The Aura component receives the data and calls Apex method to store the changed data in the database.

(Way Three: IFrame Application)

Ok, I know I said that there were only two ways to do this. There actually is a third way, but I personally found this method to be challenging to get working and it seemed sort of unsupported. It might’ve just been me, though.

This approach might cause more issues than it solves. I would not recommend this but if all else fails this might be worth a try. With this approach, you host the application on an external host (e.g. Azure) and then embed an iframe to an Aura Component. If all goes well, the application should run on your site in an iFrame.

This method is somewhat supported. However, you might encounter a lot of problems with passing information from and to the iFrame. It's also a reasonably insecure way to do this, so I would suggest just not doing it. Just don’t do it. It’d be pretty unwise.

But if you absolutely have to do this, then you can do this. It is possible. It is within the realms of possibility.

But you probably shouldn’t do this.

Maybe. Don’t quote me on any of this.

Conclusions

Should you do any of this? Maybe, maybe not.

Salesforce is a wonderful product that you can use to transform your digital sales. However, in the end, it is still just a product. It is not a development framework with which you can implement your wildest technological dreams. The developer does not fully control Salesforce and there are limits you cannot pass.

One of the main rules of Salesforce seems to be that the more you customise the more you risk. And creating a custom application that is embedded into Salesforce is pretty heavy customisation. All customisations create technical debt and in Salesforce the technical debt can accumulate incredibly fast. If you are not careful, you can eventually realise that you have customised yourself into a hole that you cannot get out of.

Salesforce is a great CRM platform, but also a rather limited application development platform. It can be a great way to boost your sales organisation but it can also lead to some expensive challenges.

Good luck.

Did you know that Columbia Road is looking to hire Salesforce consultants? We are looking for Salesforce consultants who are into growth hacking, and are passionate about helping clients grow their business. If you feel like you fit the bill, or are interested in our other open positions, check our careers page! If you are interested in reading more about the work we do at Columbia Road, have a look at our client cases.