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.

  1. 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.
image
  1. Configuring The “Salesforce Lookup” Field:
  • Click the pencil icon of the “Salesforce Lookup” field.
  • Set “Object” as shown below.
image
  1. Configuring The “Java Script” Field:
  • Click the pencil icon of the “Java Script” field.
  • Paste the code.
image
  • 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.
image
  1. Configuring The “API Select List” Field:
  • Click the pencil icon of the “API Select List” field.
  • Enable the Select Picker View.
image
  • Add the “Select Option Label Key” and “Select Option Value Key” as shown below.
image
  • Disable the API Call ON Page Load.
image
  • Add field ID in the “Local Data Field”.
  • Here, 4fe2-6c2a-e5b5 is the field ID of the “Hidden” field labelled “Combined File Records”.
image
  1. 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.
image
  1. 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.
image
[ Example ] Combined File Preview.json7.5KB

For any questions, please contact us - [email protected] or the Formyoula in-app chat. 🙂