Adding CloudFiles widgets to Salesforce Classic
CloudFiles provides a number of Lightning web components that make it easy for Salesforce Lightning users to access and share their files from cloud storages inside Salesforce. At the same time, a number of Salesforce users still use Salesforce Classic. For this reason, we provide Salesforce classic support, such that these lightning widgets can be inserted into Salesforce classic pages, with exactly the same look and feel of Salesforce lightning.
In this article, we will be adding the 'Connected Folder' widget onto a Account Page in Salesforce classic. The same process can also be used to insert other widgets or access the content library tab in Salesforce classic as well.
Follow the steps below to add the 'Connected Folder' widget onto a Account Page in Salesforce Classic -
- Create Visualforce page - Here we create a Visualforce page that will contain the folder widget markup.
- Add section to Account page- We will edit the layout of an Account page and add a section which acts as a cotainer for our Visualforce page.
- Add Visualforce page to section- In this section, we add the Visualforce page on our Account page.
- See the widget in classic page- Finally, in this section we see the widget in action on a Salesforce classic page.
Step 1 - Create Visualforce Page
- Go to Setup > Visualforce Pages > New Page
- Add a label and name (e.g. Account Folder Page)
- Copy & Paste the Visualforce Markup code from below
- Update 'ObjectName' in the markup to your object name (e.g. Account)
Use this code for the visualforce markup -
The VisualForce Page we created is shown below -
Now that your Visualforce page is ready, we will insert it on the Account Object.
Step 2 - Add Section to Account Page
Before we can add the Visualforce page, we will need to add a section on the account page. This section acts as a container for our Visualforce page.
First open the layout editor of the page you want to insert the widget on. Go to an any record of that object type (e.g. we went on an Account called CloudFiles) and click the 'Edit Layout' button on top right. This is shown below -
In the layout editor, follow the simple steps below to add a section -
- On the top navigation panel, go to "Visualforce Pages"
- Drag and drop a section component on the green area
- Give your section any name (e.g. 'Internal Files', 'Folder' etc...)
- Uncheck 'Edit Page' and choose 1-column layout
The section properties we used are shown below.
Now that we have our container setup, we only need to add the visualforce page into this.
Step 3 - Add Visualforce page to Section
In the navigation panel, you will also see the Visualforce page that we created in step 1. Simply drag and drop that component onto this section. Set height to 400 and width to 100% as shown below.
Click OK and you are all done!
Step 4 - See the widget in classic page
Now that we have everything setup, we can simply go to any account page work with the widget just like we do on in Salesforce Lightning.
Check out all our LWC components to see what else you can do in Salesforce Classic.