This guide will demonstrate how to display a combined list of Files and Attachments, allowing users to preview them when selected. This example combines all files into a single list to simplify this for the end users.
- Initial Setup:
- Drag and drop a “Salesforce Lookup”, a “JavaScript”, a “Hidden”, an “API Select List”, and a “Salesforce File Preview” field.
- Rename the fields as needed.
- Configuring The “Salesforce Lookup” Field:
- Click the pencil icon of the “Salesforce Lookup” field.
- Set “Object” as shown below.
- Configuring The “Java Script” Field:
- Click the pencil icon of the “Java Script” field.
- Paste the code.
- Please use this code.
// Listen to Salesforce field changes
formyoula.form_fields[ '5f60-3609-81b9' ].on( 'change', function( options ) {
// Get Salesforce record id
var parent_record_id = this.get( 'value' );
// Construct the SOQL query to fetch related attachments and content versions
var soql_query = `
SELECT Id,
(SELECT Id, Name FROM Attachments),
(SELECT Id, ContentDocument.Title, ContentDocument.LatestPublishedVersionId FROM ContentDocumentLinks WHERE LinkedEntityId = '${parent_record_id}')
FROM Account WHERE Id = '${parent_record_id}'`;
// Execute the SOQL query using the forcetk client
formyoula.sfdc.query( soql_query, function( response ) {
// Check if we have records
if ( response.records && response.records[ 0 ] ) {
// Initialize an empty array to hold the combined records
var combined_files = [];
// Extract the attachment records from the account data
var attachments = response.records[ 0 ].Attachments.records;
// Loop through each attachment record
for ( var i = 0; i < attachments.length; i++ ) {
// Push the attachment's Name and Id into the combined records array
combined_files.push( {
name: attachments[ i ].Name,
id: attachments[ i ].Id
} );
}
// Extract the content document link records from the account data
var content_document_links = response.records[ 0 ].ContentDocumentLinks.records;
// Loop through each content document link record
for ( var j = 0; j < content_document_links.length; j++ ) {
// Push the content document's Title and LatestPublishedVersionId into the combined records array
combined_files.push( {
name: content_document_links[ j ].ContentDocument.Title,
id: content_document_links[ j ].ContentDocument.LatestPublishedVersionId
} );
}
// Set all files
formyoula.form_fields[ '4fe2-6c2a-e5b5' ].set( { value: combined_files } );
}
} );
} );
- Please make sure to update the field ID’s as per your form.
- Configuring The “API Select List” Field:
- Click the pencil icon of the “API Select List” field.
- Enable the Select Picker View.
- Add the “Select Option Label Key” and “Select Option Value Key” as shown below.
- Disable the API Call ON Page Load.
- Add field ID in the “Local Data Field”.
- Here,
4fe2-6c2a-e5b5
is the field ID of the “Hidden” field labelled “Combined File Records”.
- Configuring The “Salesforce File Preview” Field:
- Click the pencil icon of the “Salesforce File Preview” field.
- Set “Salesforce File Field” as shown below.
- Save the changes.
- Test Your Form:
- Try the form.
- Lookup an Account.
- The “Select File” field will display a combined list of Files and Attachments and a preview when selected.
[ Example ] Combined File Preview.json7.5KB
For any questions, please contact us - [email protected] or the Formyoula in-app chat. 🙂