Preview Images In Salesforce Table Field

In this guide, we will explain how you can Preview Images in Salesforce table Element on your Formyoula Form.

Drag and Drop an HTML, JavaScript and a Salesforce Table element from Drag and Drop Fields on your form.

Click on the pencil icon and Paste the below code into the HTML element. Then click the Check Box to save changes.

HTML Code:

<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <img src="" class="imagepreview" style="width: 100%;">
            </div>
        </div>
    </div>
</div>

Click on the pencil icon and Paste the below code into the JavaScript element. Then click the Check Box to save changes.

JavaScript Code:

//Salesforce table element on every draw event of the table
formyoula.form_fields[ '0fb6-8d83-af8f' ].on( 'table:results:render:success', function() {
  // Reset the src of modal img
  $( '.imagepreview' ).attr( 'src', ' ' );
  // Add click event to the img inside the sfdc table
  $( 'td .img-responsive' )
    .off( 'click' )
    .on( 'click', function() {
      // Update the src of modal image to image clicked in the table
      $( '.imagepreview' ).attr( 'src', this.src );
      // Display modal with updated img src
      $( '#imagemodal' ).modal( 'show' );
    } );
} );

Click on the pencil icon to edit the field properties.

Here is the explanation of the fields:

Custom Table column:

This property allows you to give alias names to the table column. Click on the right arrow to expand the tab. Click on the “Add Column” button to add columns.

Note: Before adding custom table columns, please select the Salesforce Object and click on Apply Changes. You will then be able to see the API Names to match Custom column names.

For any questions please contact us - [email protected].