Box + Salesforce: Screen Flows with Experience Cloud

Happy Dreamforce 2023!

Get ready to embark on a thrilling tutorial as we dive headfirst into using Salesforce Screen Flows + Experience Cloud alongside the Box API.

Back in May of this year, I put out a blog post on using the new Box for Salesforce Flow templates now included in our managed package. If you are wondering what a Salesforce Flow is and how they can supercharge your development— checkout that blog post first. Since that time, our Salesforce product team has released more updates[1,2,3] to the managed package. Today I wanted to show how you can easily add even more Box into your Salesforce experiences.

Let’s Go!

What are we building?

Let’s say you have an Experience Cloud site similar to the below screenshot, where users create a new case on a support site. As part of that process, you’d like there to be a way for users to upload related content and store it in Box. Then, when a support agent follows up, they will see the case and content all within Salesforce. Enter Screen Flows!

Create a case experience cloud page

Upload related case content

Salesforce case created with related content uploaded to Box folder

Prerequisites

This tutorial shows how to implement a specific Box for Salesforce Screen Flow alongside an Experience Cloud site. In order to follow along, there are some prerequisites that I won’t be going over in this blog.

• You will need to have followed this guide to install and configure the latest Box for Salesforce managed package. If you are on an older version, you might need to update. This requires enterprise accounts for both Box and Salesforce. You will also need admin permissions to the instances you are using. It is highly recommended to test and develop in development or sandbox environments for both Box and Salesforce.
• You will need to have Experience Cloud activated.
• You will need to create an Experience Cloud site. I will be using a very basic site. Your site does not need to match mine, but for reference I used the Build Your Own (Aura) site template. The basic concepts should transfer to any site.
• If you have already made customizations to your Salesforce instance for the record types in the tutorial using APEX triggers and classes (as described in my other blogs), you will need to deprecate that logic. Otherwise, the new flow and your old code could clash.

Please note that this blog is to show the art of the possible and not a full fledged production level application. Further testing, screens, and logic will probably be needed in your own applications.

Walkthrough

Below is what my completed flow will look like. Let’s walk through each element to see how we can connect Box.

Completed flow diagram

First, I added a screen interaction.

Add screen interaction

Within the screen, I dragged and dropped two text inputs from the left side: one for subject and one for description. You will need to add unique label and API name information on the right hand side of the pop-up for the screen, subject, and description inputs. The text can be anything you would like, as long as it is unique.

Add subject field

Add description field

I also hid the screen header by unchecking show header. You are welcome to keep it, but I thought the end results looked better without. Click Done when finished editing this screen.

Hide header

In order to make a case, we need to have contact information for the user creating it. To do this, why don’t we grab the current user’s contact record!

Add a new data element for Get Records.

Select get records

In the pop-up, add the appropriate label and API name information. In the object field, select contact.

Select contact object

Select Id for field, equals for operator, and {!$User.ContactId} for the value. Click Done.

Add filter contact information

Now, we can make the case. Add another data element — but for create records this time.

Fill out the label and API information. Then, select the radio button for “Use separate resources, and literal values.” Next, add case in the object field.

Create case record element

Finally, I added information for four fields on the new case: AccountId, ContactId, Description, and Subject. I grabbed the values for each from the previous elements in the flow. As you can see in the below screenshots, you can use data derived from any of the elements in the flow. Click Done.

Add field information

Now that a case is created, we need to create the case folder in Box. Since we have the managed package installed and configured, we have access to several methods natively in the flow builder.

Add a new action element.

Add action element

Select the Type option in the filter by drop down, followed by Apex Action. In the action field, use the Create Folder for Record ID method.

Select the action for creating a folder

For Record ID, select the CaseId from the create case element used earlier. Then, select the radio button for Always start a new transaction. Click Done.

Additional Apex action settings

Next, add another screen interaction. Drag and drop in the Box Upload input. Give the screen and upload selections labels and API names.

For Box Upload, select the folder id from the Apex action we set up before this step. I upped the file number limit to 10, but this could be changed for your use case.

I also hid the header and footer. Once finished, click Done.

Add Box Upload element

This next screen isn’t necessary, but for the sake of making a somewhat complete case flow, I added a submitted complete screen with the header hidden. This is just a display text component. It does no actual logic.

Add submitted screen

At this point, the flow should be completed! Let’s try it out.

Click Save (or Save As if you’ve been saving along the way). Then, click Debug. A pop-up will appear. Click Run.

Debug pop-up

You should be able to walk through the three screens we created, including the subject and description, file upload, and submitted screens. On the right, you will find the logs from the steps. You will also see errors if something didn’t work correctly.

Debug messages example

After successfully debugging the screen flow, go back to the flow editor and activate it by clicking Activate in the top right corner.

Now, we can add it to our Experience Cloud site. To do this, go to the builder of your site. Then, you should be able to simply drag and drop a flow section onto the page.

Select Flow under process automation

Select the flow section you dropped in, followed by selecting the screen flow you created earlier in the drop down. Then, click Publish in the top right.

Select the appropriate flow in the drop down

If you visit your sites URL, you should see the flow live in action!

Live Experience Cloud site

Go through the process of creating a new case. If everything is setup correctly, you should see a case created, a Box folder created for that case, and the files uploaded within the Box folder.

Note — Previously to today, I added a Box component to the contact page as described in the layout section of our setup guide.

Salesforce case created with related content uploaded to Box folder

Wow! Isn’t that awesome? The best part is we didn’t even have to write any custom code. Stay tuned for even more enhancements coming to a Box for Salesforce managed package near you!

Resources

Salesforce Screen Flow Trailhead

Salesforce Experience Cloud Trailhead

Latest version of the Box for Salesforce managed package

Box for Salesforce Installation Guide

Creating the Box Sign button in Salesforce guide

Box for Salesforce developer resources

We hope you enjoyed this blog on Box for Salesforce. Feel free to reach out to us on the developer forum for support. Special thanks to Kyle Adams!