File Viewer (10 min)
Completion requirements
01 Getting Started
This tutorial covers how to configure the file viewer widget. The File Viewer allows you to display various file types in your project.
02 File Viewer Settings
In the content tab, you can choose what file type you want to display.
You also have the option to display a static file.
Click Select from Gallery to choose a previously uploaded file or upload a new one. If you choose not to display a static file. You can configure one to display from Salesforce.
You also have the option to display a static file.
Click Select from Gallery to choose a previously uploaded file or upload a new one. If you choose not to display a static file. You can configure one to display from Salesforce.
03 Displaying a Salesforce File
Add an interactive element to your project to display a file in Salesforce, for example, a button.
1. Click on the Button interactivity icon.
2. Click the Start + and choose Salesforce Action as the node. Click Next.
3. Click Salesforce Integration.
4. Click Create New under the Get Records tab in the Salesforce Integration screen.
5. In the Object Settings configure; Files as the Salesforce Object, User Action as the trigger, the number of files to pull, and add a description.
6. In the Conditions tab, configure a condition that applies to your files. For example, if you only want specific file types to display.
7. In the Mapping tab, map the file viewer elements to the corresponding Salesforce field. Click Apply.
8. Use the dropdown to select the get we just created. Click Next, Insert, and Apply.
The current configuration will display files from Salesforce that meet the conditions.
1. Click on the Button interactivity icon.
2. Click the Start + and choose Salesforce Action as the node. Click Next.
3. Click Salesforce Integration.
4. Click Create New under the Get Records tab in the Salesforce Integration screen.
5. In the Object Settings configure; Files as the Salesforce Object, User Action as the trigger, the number of files to pull, and add a description.
6. In the Conditions tab, configure a condition that applies to your files. For example, if you only want specific file types to display.
7. In the Mapping tab, map the file viewer elements to the corresponding Salesforce field. Click Apply.
- Content - Version Data
- Type - File Type
- File Name - Title (This one is optional)
8. Use the dropdown to select the get we just created. Click Next, Insert, and Apply.
The current configuration will display files from Salesforce that meet the conditions.
04 Use Case
You can use a power table to display files you have in Salesforce. To view the files, you can click a button in the table and the file will display in a modal.
First, insert a power table into a second project page. When selecting a source in Salesforce, choose Files. We configured a condition that only the latest files must be displayed.
When configuring Mapping, 3 columns were added: Tile, File Type, and a View File button.
Add a Responsive Modal to your page and insert a File Viewer widget.
Add two static page-level variables; type and content version ID. To learn more about variables, check out our Variables Course.
Navigate back to your power table mapping and select the On Click Action button.
Click the Start + and select Affected Elements as the node. Click Next.
Configure the two created variables:
Now that the variables have been configured. It’s time to configure the modal.
Click the Affected Elements + and choose Drawer/Modal as the node.
Ensure you click the modal tab and toggle the enable switch on. Use the dropdown to select your modal and choose Show.
Finally, we need to configure the modal to pull the Salesforce files.
Click the Drawer/Modal + and choose Salesforce Action as the node.
Click Salesforce Integration to create a new Get action.
In the Object Settings configure; Files as the Salesforce object, User Action as the trigger, the number of files to pull, and add a description.
In the Conditions tab, configure that the content version ID must equal the corresponding variable.
In the Mapping tab, map the file viewer elements to the corresponding Salesforce field. Click Apply.
Preview your project, when you click the view file button, the modal will pop up and display the corresponding file.
First, insert a power table into a second project page. When selecting a source in Salesforce, choose Files. We configured a condition that only the latest files must be displayed.
When configuring Mapping, 3 columns were added: Tile, File Type, and a View File button.
Add a Responsive Modal to your page and insert a File Viewer widget.
Add two static page-level variables; type and content version ID. To learn more about variables, check out our Variables Course.
Navigate back to your power table mapping and select the On Click Action button.
Click the Start + and select Affected Elements as the node. Click Next.
Configure the two created variables:
- Type set value from the power table file type.
- Content version ID from the power table value.
Now that the variables have been configured. It’s time to configure the modal.
Click the Affected Elements + and choose Drawer/Modal as the node.
Ensure you click the modal tab and toggle the enable switch on. Use the dropdown to select your modal and choose Show.
Finally, we need to configure the modal to pull the Salesforce files.
Click the Drawer/Modal + and choose Salesforce Action as the node.
Click Salesforce Integration to create a new Get action.
In the Object Settings configure; Files as the Salesforce object, User Action as the trigger, the number of files to pull, and add a description.
In the Conditions tab, configure that the content version ID must equal the corresponding variable.
In the Mapping tab, map the file viewer elements to the corresponding Salesforce field. Click Apply.
- Content - Version Data
- Type - File Type
- File Name - Title (This one is optional)
Preview your project, when you click the view file button, the modal will pop up and display the corresponding file.