Preview Files Using A Combined List Of Files and Attachments

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. 🙂