Knack Overview

.   These IDs will be important in our javascript.

When a new scene loads, an event is fired and we can capture that with jQuery.  You’ll notice the first line in our code example is looking for “$(document).on('knack-scene-render.scene_3', …”  - This event will fire when our scene is rendered.  This is when we want to add the button to our view page.

To add the button to our view page, we’re going to use jQuery to create a new div container that will contain our button.  Then we will attach an event handler on the button that will use AJAX to send the data to our Formstack Documents contract.  Here’s what our code looks like:
 

$(document).on('knack-scene-render.scene_3', function(event, scene) {

  $('#view_4 .view-header').after('
Send to WebMerge
');
  
  // link hander: send to webmerge
  $('#webmerge').click(function(event) {
  event.preventDefault();

  // get data
  var data = Knack.models['view_4'].toJSON();
	
  log('data!');log(data);
  Knack.showSpinner();

  $.ajax({
  	url: 'https://www.webmerge.me/merge/20103/37f4te',
	  data: {
		  Email: data.field_3_raw.email,
      Phone: data.field_2_raw,
      Company: data.field_1_raw,
      Description: data.field_5_raw,
      Amount: data.field_6_raw
	  },
	  type: 'POST',
	  success: function() {
      alert('Contract Created!');
	    Knack.hideSpinner();
	  },
      error: function() {
        alert('There was an error creating the contract');
      }
    });
  });
  
});

As you’ll see in the code above, we add the link to our page, set an event handler that uses AJAX to send the contact data to Formstack Documents (using our Merge URL) and displays a message when complete.  This happens behind the scenes without ever having to leave Knack!

Here’s what the button looks like in action:

Let’s click that button!  Everything worked great and here’s the document we have generated.  All of our data from Knack is in the document and it has been emailed off to the client.  How’s that for easy?

 
Wait, there’s more…
 

Generate and Download Merged Document

Creating a document behind the scenes is cool, but what if you want to open up the document right away without having to go to your email?  No problem, here is an updated code example that will generate a link that sends data to Formstack Documents in a new window rather than AJAX and then your document will be there for you
 

$(document).on('knack-scene-render.scene_3', function(event, scene) {
 
  $('#view_4 .view-header').after('
Download Document
');

  // link hander: send to webmerge
  $('#webmerge').click(function(event) {
    event.preventDefault();
 
    // get data
    var data = Knack.models['view_4'].toJSON();
    log('data!');log(data);

    url = 'https://www.webmerge.me/merge/20103/37f4te?_use_get=1&download=1';

    url += '&Email=' + encodeURI(data.field_3_raw.email);
    url += '&Phone=' + encodeURI(data.field_2_raw);
    url += '&Company=' + encodeURI(data.field_1_raw);
    url += '&Description=' + encodeURI(data.field_5_raw);
    url += '&Amount=' + encodeURI(data.field_6_raw);
	
    window.location = url;
  });
}); 

 

Use Repeatable/Loop Data

Do you have repeating data that is being printed into a table and you want those line items to come through to Formstack Documents? No problem! Check out the example code below:
 

$(document).on('knack-scene-render.scene_237', function(event, scene) {
 
  $('#view_380 .view-header').after('
Create Report
');
  
  // link hander: Print Report
  $('#webmerge').click(function(event) {
  event.preventDefault();
 
  // get data
  var data = Knack.models['view_375'].toJSON();
  var models = Knack.models['view_380'].data.models;
  var incidents = [];
    
  for(var i = 0; i < models.length; i++){
    incidents.push({
      Incident_No: models[i].attributes.field_201_raw,
      Employee: models[i].attributes.field_337_raw[0].identifier
    });
  }
    
  log('data!');log(incidents);
  Knack.showSpinner();
 
  $.ajax({
  	url: 'https://www.webmerge.me/merge/12345/abcdef',
    data: {
      incidents: incidents
      Physician_Name: data.field_111,
      Treatment_Facility: data.field_109,
      Treatment_Address: data.field_350,
      Treatment_City: data.field_351,
      Treatment_State: data.field_352,
      Treatment_Zip: data.field_353
    },
	  type: 'POST',
	  success: function() {
      alert('Report Created!');
	    Knack.hideSpinner();
	  },
      error: function() {
        alert('There was an error creating the report');
      }
    });
  });
  
});

 

Automatically Generate Documents with Zapier

If you’re looking to automatically generate documents every time a new record is added to your Knack application, you can automate the process by using Zapier.  Zapier will detect new records and send that new data over to Formstack Documents without anyone needing to click a button.  Setup is quite simple and all you need to do is map your Knack fields to the Formstack Documents fields and Zapier will handle the rest.
 

Knack Delivery Setup Example

With the Knack delivery, you can automatically save generated files inside Knack using a file upload field on your object.  Here's what an example Knack delivery setup looks like:

 

Knack API Key & Knack Application ID:
 

 

Knack Object ID:
 

 

Knack Field ID:
 

 

Knack Record ID:
 

You'll want to use a merge field like {$record_id} in this setting.  Then you can match that up with your record ID field in your integration sending data over to Formstack Documents from Knack.

If you are using Javascript, then you can grab the ID with something like this:

var data = Knack.models['view_4'].toJSON();
var record_id = data.id;