Use flow in Chatter profile tab to update user fields

I needed a ‘simple’ way for users to view and update two custom fields on their user record. Visual workflow or visualforce are easy enough for this type of stuff but need a custom tab or a link in order to pass in the running user Id to the page / launch the flow.

I like Chatter subtab apps / profile tabs for this use case, as they allow you to group functionality that is relevant to the running user, in a clean way that doesn’t add yet another tab to the mix.

However, when using a visualforce tab in a profile tab, you can easily display running user data using the $User global variable, but you need a controller extension in order to update data because you have no way to pass in the running user’s Id to the page’s standard Id parameter. And i wanted something simple, which for me means no apex code.

So, I did a lot of digging to find a simple way to do this, and found the following approaches that in theory could work without writing any apex

• remote objects (never tried before, and my javascript is meh)
• visual workflow in a visualforce page in a chatter subtab

So, I thought flow would be interesting. But, there were two challenges i anticipated using flow.

1. the runtime - in order to display the flow in a subtab app, it must be embedded in a visualforce page, which meant it had to be in the ugly classic runtime. but i thought that maybe the recent lightning flow component would offer a way to use lightning runtime within visualforce.

2. passing the Id of the profile being viewed to the flow. on a profile tab, i was not sure what parameters I could access to do this.

amazingly, i was able to deal w both quite easily.

1. the developer docs have an example for how to run flows that are embedded in visualforce pages in lightning runtime, by jumping through some fairly small hoops. I think this just became feasible in Winter18 with the flow lightning component, but it just has a passing reference in the release notes

   What you need to do:
   a) build a lightning app using the code snippet
   b) update the sample visualforce page to reference the app you built
   c) update the sample vf page to reference a flow that exists in your instance
   d) update the input variable(s) to pass the right data to the flow
   e) optionally - if you want to pass stuff from the flow to the page, like flow finish behavior, customize the statusChange function behavior.

   the trickiest parts for me, given my rather limited exposure to lightning components, was figuring out
   a) how to create the lightning app itself
   b) where that app is reflected in the code on the visualforce page.

   To create a lightning app, go to the dev console and click new lightning application, give it a name, and use the snippet of sample code from the docs. i’m not sure if the component, helper, etc are necessary or not. i just clicked to create each of them and then did nothing else.

   From a bit of trial and error, i figured out that the sample app in the docs must be named “lightningOutApp”, and that the app/component is referenced in the visualforce page with “c:lightningOutApp”. So replace c: lightningOutApp w/ c:YourAppName.

2. buried on a documentation page for profile tabs called profile page parameters is this gem:

   When your profile tab is loaded within the Chatter profile page, a request parameter, sfdc.userId, is passed. This parameter contains the User ID of the person whose profile is being viewed. This information is needed so that your app can load the appropriate content.

   but as the docs dont provide any examples on how this is actually used. so i was shocked when this actually worked:

   $CurrentPage.parameters.sfdc.userId

and voila, i’ve got a flow, embedded in a visualforce page, in a subtab app, which gets the running user ID and the viewed user ID from the page.

simple, right!

one minor issue was that the default formatting for text fields on the subtab was pretty hard to read.

adding a wrapper div with class = app name allowed my custom stylesheet from my lightning component to take effect.

see this sfse post for details on how that works