๐ŸŽ‰  Build a workflow powerhouse. Learn more about our new Airtable integration.   ๐ŸŽ‰

May 14, 2015

Generate Purchase Order Agreements From Knack

We’ve been seeing a lot of success with customers using Knack and WebMerge to generate reports, invoices, agreements, and more.  All from right within their Knack applications with the simple click of a button!  With Knack’s easy-to-use app builder, you are able to create a CRM, an Applicant Tracking system, an Order Management system, and anything else you might use a spreadsheet to manage.

For this example, we’re going to show you how you can create a Purchase Order app within Knack and then then the deal is ready you can click a button and WebMerge will generate the Purchase Order Agreement that will automatically be sent to the customer.

To get started, let’s setup our template for the purchase order agreement within WebMerge.  We’re just going to use the Build Your Own editor and build our document in the online editor.  We’re going to set this up similar to an invoice, adding our logo, customer information, and a table for the line items

Speaking of line items – we’re going to need to setup the table in our document to support multiple line items in a table.  This is pretty easy, but worth showing a nice example.  We’re going to use the “tablerow” loop in our document and this tells the document that we want to loop through the list of line items in new rows in the table.  Here’s what this looks like:

Once we jump into Knack and hook up the integration with our document, we’ll revisit the line items and how to create the list (array) that will be looped through in the document.

Ok, now that we’ve got our document setup in WebMerge, let’s go setup our app in Knack!  We’ve cheated a bit and we used the pre-defined Purchase Order app.  That saves us a lot of setup time and there’s no need to re-create the wheel!

Since our app is all setup and ready to go, we’re ready to add the WebMerge button to our app.  This is going to get a bit technical, so put your learning cap on and we’ll try our best to walk you through the process.

First, we’re going to open the API & Code section of our app and go to the Javascript page.  This is where we are going to add the javascript code that will create the button for WebMerge.  We’re going to use a code example as a starting point (we’ll embed the code for this example towards the end of the article).

Now comes the fun part.  We need to modify javascript code so that it uses the correct scenes and data fields that will be in our app.  To figure out most of this information, we’re going to need to “inspect” the app HTML code (most browsers offer an Inspect tool under Developer tools).

If we inspect the page and hover over the page, we should be able to find the active scene.  When you hover over the HTML in the inspector, it should highlight the page.  Take that ID from the scene and update the javascript code in your app.

Next let’s update the javascript so that it sends data to our document.  You can update the Merge URL to match the URL for your document (which you can find under the Merge tab inside WebMerge).  After you update the URL, we need to define the fields that are going to be sent over to merge (via AJAX).  These fields are going to match what you used in your document’s merge fields.  It’s easiest to add all the merge fields at once, then go back and find the proper Knack field IDs.

To find the correct field IDs you’re going to want to inspect the fields on the page like you did with the scene.  When inspecting, hover over the value of the field that you want to use and it should show you an ID.  Use the ID in the javascript code that corresponds with the merge field.

Now it’s time for the line items.  What we need to do is grab all the line items from the table in Knack (they call them models), and then loop through each item and add it to an array that will be sent over to WebMerge.  Inside this loop, we’re going to define the individual sub-fields for the line items (the ones that we used in our WebMerge document).  Once you get that finished up, don’t forget to add this as a data field on the AJAX request like you did the other fields.

Tip: You’ll notice there is a console.log(data) function in the JS code.  This will allow you to see the format of the data that is coming from Knack.  Sometimes, Knack will return an object when you get the value of a field, so you need to make sure that you reference the correct sub-field on the object.  Here’s what our data looks like:

Phew!  Ok, the technical piece is done and you’re ready to start generating the agreements.  Here’s what our javascript code ended up looking like:

To test your work, let’s open up the app and then navigate to the detailed page for one of our purchase orders.  On this page, you should see the WebMerge button that you setup.  Go ahead and click the button and you should see a message about the file being created/sent!

Here’s what our agreement looked like:

That’s it!  Can you think of other ways that you could use WebMerge + Knack to streamline your business and create documents faster?

7 min read

Ready to give Formstack Documents a try?
Start your Free Trial now!


Generate Documents From Knack Today

By signing up here, you agree to our Terms of Use