Mobile page layouts for Salesforce1! — A simple workaround

Now that I have your attention, you are probably reading this blog because you, like me, love the Salesforce1 app, totally get the concept of micro-moments and have built a bunch of quick actions to make the life of your mobile users simple! Quick action is a powerful feature to build micro-moment based user interactions for creating and updating records. But, what if you want to create a mobile specific view of a record, wherein you only want to show the most important fields for a quick glance. Out of the box quick action configuration can’t help you there.

Let’s say, for example, you have a complex opportunity management process and have hundreds of fields in your opportunity object. You could organize the fields in to multiple sections using page layout configuration and that usually works great for a desktop view but hardly provides a micro-moment view on mobile. In most cases, your users are looking to have a quick glance of key fields instead of having to scroll through pages of data. Yes, compact layouts help, but then they can only accommodate few fields. So, in this blog, I am sharing a simple technique to achieve this using a combination of Lightning Component, Visualforce and Field sets (yes, they are available only in Salesforce classic, not Lightning experience, but hey, this is only a workaround until something is available for mobile specific page layouts, out of the box. Plus, if you are on Lightning Experience, this workaround still works). You can dynamically create a mobile specific quick glance view for your standard and custom objects using this technique, declaratively

So, how does this work..

Let’s walk through by building mobile specific quick glance view for Contacts object, as an example. Follow the below steps in your sandbox org (yes, don’t cut corners — you know it, do it in Sandbox first, please)

  • Install the components from here (hint: click the ‘Deploy to Salesforce’ button)
  • Once deployed, go to Setup->Build->Contacts->FieldSets and create a new Field Set. Call it ‘Mobile Layout’ (If you are in Lightning Experience, you may want to switch to classic for this step)
  • Choose the key fields that you need to surface in your quick glance view on mobile and save the layout. Note down the ‘Field Set API Name’ as you will need in the next step
  • Now, search for ‘Custom Metadata type’ in the admin search bar and click on ‘Manage Records’ for custom metadata type ‘S1PageLayoutConfig’. This custom metadata type is used for assigning multiple layout configurations based on Profile Name and Record type, for a particular object. Like typical page layouts, you can have multiple combinations of Field sets (and hence page layout) assignments to a particular profile/record type combination. For e.g., the screenshot below applies the mobile page layout for System Administrator profile for ‘Customer’ record type on contact object
  • You can also have a default configuration for all profiles, just don’t provide any value for ‘Profile Name’ and/or ‘Record Type’ and choose an appropriate ‘Field Set Name’

Note: Please pay attention to the field set name value. It is the Field set API name and NOT the field set label.

  • Now, create a quick action on the contact object and call it ‘Quick View’. Choose the lightning component as ‘c:S1PageLayoutComponent’ and Save
  • Now, open up your Contact Page Layout and place the ‘Quick View’ action in the ‘Salesforce1 and Lightning Experience Actions’ panel
\
  • That’s all to it!. Now, access the contact in Salesforce1, tap ‘Quick View’ and voila! you have the quick glance view. Look at that…, this even has a map view! Pretty cool eh!

Points to Note (aka Caveats..)

  • Of course, I didn’t test this in production, it’s your responsibility. That’s why the code is open sourced, you have it.. everything. If something doesn’t work for you, it’s usually a quick fix, 99% of the work is already done for you here
  • Yes, Fields sets are not supported in Lightning Experience but again, this is hopefully a short term work around. Instead of you having to build the UI from scratch, I have tried to make it as declarative as possible. More importantly, you can still use this work around even if you activate Lightning Experience, it’s just that Field sets are not accessible to configure using Lightning Experience
  • If something doesn’t work, first thing to check is if there are any typos in your custom metadata entries. Especially check the Field Set name, if it has a space, then you haven’t used the API name. Fix it first! If it still doesn’t work, check if you gave the Record type ID instead of the name. Or may be you gave the Profile Name wrong.. Yes, I have done all these and wasted some precious time, debugging. Now, you have checked everything and still doesn’t work, leave a comment here

Now, the fine print.. At the time of writing this blog, I am employed with Salesforce as an Architect. However, any code samples and declarative approach provided here are purely for experimental purposes and comes with no warranty or support. Matter of fact, all opinions and approach provided in this blog are purely my own and has nothing to do with my employer. It is assumed that you have the right Salesforce configuration and coding skills and will use the ideas presented here as you see fit, in your landscape. The primary purpose of this article is just to share the knowledge and my own experience. Nothing more, nothing less. Use this approach at your own risk

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.