Preview File (6 min)
Completion requirements
01 Getting Started
This tutorial will cover how to preview a file.
Make sure that there is a file attached to the Salesforce object.
![Screenshot showing file attachments in Salesforce](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/196317914/1.png)
Make sure that there is a file attached to the Salesforce object.
![Screenshot showing file attachments in Salesforce](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/196317914/1.png)
02 Inserting a File Viewer Widget
1. Click the + icon to open the element list.
2. Under Input, drag and drop a text field element to the canvas.
3. Drag and drop a File Viewer widget to the canvas under Widgets.
4. Click the Gear icon to open the File Viewer Settings screen.
5. Under Content, use the Type drop-down list to select the type of file, for instance, PDF.
6. Under Interactivity, click the required checkboxes:
![Screenshot of the file viewer element settings interactivity tab](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/752794638/4.png)
7. Increase the size of the file viewer by dragging it bigger.
![Screenshot showing resizing file viewer widget](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/752794638/4.1.png)
2. Under Input, drag and drop a text field element to the canvas.
3. Drag and drop a File Viewer widget to the canvas under Widgets.
![Screenshot showing adding a file viewer widget to the canvas](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/752794638/2.png)
4. Click the Gear icon to open the File Viewer Settings screen.
5. Under Content, use the Type drop-down list to select the type of file, for instance, PDF.
![Screenshot of the file viewer element settings menu](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/752794638/3.png)
6. Under Interactivity, click the required checkboxes:
- Allow Print
- Allow Download
- Allow Rotate
- Allow Zoom
![Screenshot of the file viewer element settings interactivity tab](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/752794638/4.png)
7. Increase the size of the file viewer by dragging it bigger.
![Screenshot showing resizing file viewer widget](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/752794638/4.1.png)
03 Custom Variable
1. Click the Gear icon to open the project Settings screen.
2. Under Tools, click the Custom Variable option’s Gear icon.
3. Under Static, add a custom variable.
![Screenshot of Custom Variables window showing Static tab](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/68726335/6.png)
4. Select the kebab menu next to the variable and enable Map to URL.
![Screenshot of Static Variables showing how to enable map to URL](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/68726335/2023-06-07_12-59-03.png)
2. Under Tools, click the Custom Variable option’s Gear icon.
![Screenshot of the Titan Project Settings](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/68726335/5.png)
3. Under Static, add a custom variable.
![Screenshot of Custom Variables window showing Static tab](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/68726335/6.png)
4. Select the kebab menu next to the variable and enable Map to URL.
![Screenshot of Static Variables showing how to enable map to URL](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/68726335/2023-06-07_12-59-03.png)
04 Salesforce Integration
1. Click the Gear icon to open the Project Settings and click the Salesforce option. The Salesforce Integration screen opens.
2. Click the Create New button. The Map Salesforce fields screen opens.
3. Under Object Settings, use the drop-down list to select the Salesforce object.
4. Use the drop-down list to select the trigger to execute the pull.
5. Click the Conditions option and configure the condition using the drop-down lists. The Field value is the static variable you added.
![Screenshot of Map Salesforce Fields window showing Conditions tab](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/294140494/9.png)
6. Click the Mapping option and use the drop-down list to map the Full name to the text field.
7. Click the Apply button. The Salesforce integration has been added.
8. Click the Kebab icon and select the Add Child option. The Map Salesforce field screen opens.
9. Under Object Settings, use the drop-down list to select the Content Version Salesforce object.
10. Select the Up to Radio button and add 100 in the records field.
11. Under Conditions, configure the conditions. The First Published Location ID must equal the Contact ID.
12. Click the Mapping option and use the drop-down list to map the fields as follows:
![Screenshot of Map Salesforce Fields window showing Mapping tab](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/294140494/14.png)
13. Click the Apply button. The child integration is added.
14. Click the Close button.
2. Click the Create New button. The Map Salesforce fields screen opens.
![Screenshot showing how to navigate to the Salesforce Integration window](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/294140494/7.png)
3. Under Object Settings, use the drop-down list to select the Salesforce object.
4. Use the drop-down list to select the trigger to execute the pull.
![Screenshot of Map Salesforce Fields window showing Object Settings tab](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/294140494/8.png)
5. Click the Conditions option and configure the condition using the drop-down lists. The Field value is the static variable you added.
![Screenshot of Map Salesforce Fields window showing Conditions tab](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/294140494/9.png)
6. Click the Mapping option and use the drop-down list to map the Full name to the text field.
![Screenshot of Map Salesforce Fields window showing Mapping tab](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/294140494/10.png)
7. Click the Apply button. The Salesforce integration has been added.
8. Click the Kebab icon and select the Add Child option. The Map Salesforce field screen opens.
![Screenshot of Salesforce Integrations window showing how to add a child push](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/294140494/11.png)
9. Under Object Settings, use the drop-down list to select the Content Version Salesforce object.
10. Select the Up to Radio button and add 100 in the records field.
![Screenshot of Map Salesforce Fields window showing Object Settings tab](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/294140494/12%20%281%29.png)
11. Under Conditions, configure the conditions. The First Published Location ID must equal the Contact ID.
![Screenshot of Map Salesforce Fields window showing Conditions tab](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/294140494/13.png)
12. Click the Mapping option and use the drop-down list to map the fields as follows:
- File Viewer/Content to Version Date
- File Viewer/Type to File Type
![Screenshot of Map Salesforce Fields window showing Mapping tab](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/294140494/14.png)
13. Click the Apply button. The child integration is added.
![Screenshot of Salesforce Integration window showing nested child push](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/294140494/15.png)
14. Click the Close button.
05 Condition
1. Click the Gear icon to open the project Settings screen.
2. Under Tools, click the Custom Variable option’s Gear icon.
3. Under Conditions, double-click the Condition node. The Edit Node screen opens.
![Screenshot of the Custom Variables window showing the condition tab](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/653585548/17.png)
4. Configure the rule:
![Screenshot of the Edit Node window showing how to configure the condition rule](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/653585548/17.1.png)
5. Click the Next button.
6. Add a tag if necessary and click the Save button.
7. Hover over the Condition node with your mouse and click the + icon. The Add Node screen opens.
8. Click the Salesforce Action option and click the Next button.
9. Use the Process push or get dropdown list to select the Salesforce integration. Click the Next button.
10. Add a tag if necessary and click the Insert button. The Salesforce Action is added to the screen. Click the Apply button.
11. Click the Publish button. The webpage opens in a new tab.
12. Open Salesforce and copy the contact ID from the URL bar.
13. In the published project's URL bar, add
![previewed document - document is blurred to protect private information](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/653585548/23.png)
2. Under Tools, click the Custom Variable option’s Gear icon.
![Screenshot of Titan project settings menu showing the tools tab](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/653585548/16.png)
3. Under Conditions, double-click the Condition node. The Edit Node screen opens.
![Screenshot of the Custom Variables window showing the condition tab](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/653585548/17.png)
4. Configure the rule:
- [GV/contactid] Is not empty
![Screenshot of the Edit Node window showing how to configure the condition rule](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/653585548/17.1.png)
5. Click the Next button.
6. Add a tag if necessary and click the Save button.
7. Hover over the Condition node with your mouse and click the + icon. The Add Node screen opens.
![Screenshot of custom variables window showing the conditions tab](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/653585548/18.png)
8. Click the Salesforce Action option and click the Next button.
![Screenshot of the Add Node window showing the selected Salesforce Action node](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/653585548/19.png)
9. Use the Process push or get dropdown list to select the Salesforce integration. Click the Next button.
![Screenshot of the Add Node Salesforce Action window showing the integration action selected](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/653585548/20.png)
10. Add a tag if necessary and click the Insert button. The Salesforce Action is added to the screen. Click the Apply button.
![Screenshot of the Custom Variables window showing the Conditions tab](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/653585548/21.png)
11. Click the Publish button. The webpage opens in a new tab.
12. Open Salesforce and copy the contact ID from the URL bar.
![Screenshot of the Salesforce URL config](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/653585548/22.png)
13. In the published project's URL bar, add
- ?contactid=
![previewed document - document is blurred to protect private information](https://academy.titandxp.com/pluginfile.php/643/mod_custompage/topics/653585548/23.png)