Webmerge : 1 click database update + pdf download of document with subtable

A little addition to the blog post : http://www.knackhq.com/links/blogs/dynamic-pdfs-and-documents-with-webmerge.html

Here is how you can merge subtable fields and create nice templates for your invoices, quotations etc. in webmerge and update your data base while generating a merged document in 1 click.

The example below shows how to merge the invoice details and invoices lines and generate the merge using a Knack submit button.

1) Ids and mapping.

All the information that my merge needs are contained in scene_20 ('scene' is knack's former version's name of 'page') which has 2 views : view_24 containing the invoice header and view_25 which contains the invoice lines.

the "submit" button is in view_29 which is a edit form of invoice without any field. 


I want to merge the following fields in my invoice header from view_24: 

Client : field _92

Clientemail : field_100 

Invoicedate : field_93

invoicenumber : field_91

and the following fields from table view_25

Product: field_96

Price: field_97

Quantity: field_98

Total:field_99

Each field is defined in the webmerge document which url is : https://www.webmerge.me/merge/21325/ian1l1 (needed for the code below)


2) Code

In Knack's API and code / Javascript : 

 

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

// link hander: send invoice to webmerge
$(’#view_29’).submit(function(event) {

event.preventDefault();


// get data
var data_view_24 = Knack.models['view_24'].toJSON();
var data_view_25 = Knack.models['view_25'].data.toJSON();
 
url = 'https://www.webmerge.me/merge/21325/ian1l1?_use_get=1&download=1';

url += '&Client=' + encodeURI(data_view_24.field_92_raw);
url += '&Clientemail=' + encodeURI(data_view_24.field_100_raw.email);
url += '&invoicedate=' + encodeURI(data_view_24.field_93_raw.date);
url += '&invoicenumber=' + encodeURI(data_view_24.field_91_raw);


for(x = 0; x < data_view_25.length; x++){
 	item = data_view_25[x];
  	url += '&items[' + x + '][product]=' + encodeURI(item.field_96_raw);
  	url += '&items[' + x + '][price]=' + encodeURI(item.field_97_raw);
  	url += '&items[' + x + '][quantity]=' + encodeURI(item.field_98_raw);
  	url += '&items[' + x + '][total]=' + encodeURI(item.field_99_raw);
}


window.location = url;

});
});

  

This code will merge  and download the invoice. 

Given that the knack submit button is used to trigger the event download, in form option do not use any redirect option or it will overwrite the dowload instruction.

You can  add submit rules the usual way in the interface builder to the submit button which will be triggered together with the merge, in order that you update your data base  and get a merged document in a single click!

In case you have doubt just contact the webmerge, they have fantastic customer support team

Stevan,

Thanks for sharing your efforts.  I was able to follow Knack's original post and get the output to work correctly.

 

I am having an issue applying/understanding yours.

 

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

// link hander: send invoice to webmerge
$('#view_1292').submit(function(event) {

event.preventDefault();


// get data
var data_view_1292 = Knack.models['view_1292'].toJSON();
var data_view_1293 = Knack.models['view_1293'].data.toJSON();

url = 'https://www.webmerge.me/merge/154543/h4p2ta?_use_get=1&download=1';

url += '&$Email=' + encodeURI(data.field_20_raw.email);


for(x = 0; x < data_view_1293.length; x++){
item = data_view_1293[x];
url += '&items[' + x + '][OrderNumber]=' + encodeURI(item.field_368_raw);

}


window.location = url;

});
});

 

Above is my code and I can't even get the button to pop up.  I believe I was about to get it to pop up at one point, but the field came in as undefined.  Does anything jump out at you?

I don't understand the java so I'm just plugging and chugging.  I am not certain if there are more things than my scenes, views, and fields I need to input.  

Any help would be very much appreciated!!!

 

Brandon

I am new to javascript, but can follow the documentation and get it done.

How do I create the Submit button on my page? Is that through the javascript code, or do I create a button somehow within the Knack builder?

I tried the code above, and changed the scene and view to my page, but the button did not show up for me.

 

Thanks for any help.

Jason

Hi Steven! Using the webmerge link in your previous answer, how do you format the image in the code to send to webmerge? _raw? I can't seem to get it to work. I would really appreciate your help.

 

In case anyone else is having problems with special characters cutting off the data from populating WebMerge: A few of my fields have "&" symbols that are part of a companies name, so something like "PG&E" would only transfer as "PG." Found that it also does this for address that have a "#" associated with them.

Used "escape" instead of "encodeURI" and it cleared up the issue.

I agree with AP. I believe Knack should provide a reporting tool that can be easily used by a paying customer. Your letting the customer get a webmerge app it should be included in your product.

 

Dear Knack,

Please put the work into developing a this merge feature ASAP.

You have ALREADY done most of the work with the existing capability of forms to send custom e-mails, with all the data arranged in any way a user can imagine - tables, bullet lists, anything.  

The ONLY part of this feature that needs to be worked out is that Knack needs to display the to-be sent email info in a modal pop-up with an IFRAME containing the merged info and a tiny little Print button under it.  With the merged info in an IFRAME the user could do any of the following

  1. Print to paper
  2. Allow their Chrome browser to save the frame to PDF
  3. Copy & paste into their desired application.

This feature is so easy to implement you guys could probably put it together with your eyes closed in half a day and save all of us all of the unnecessary and intricate steps of all this coding, which by the way has to be re-updated from scratch anytime the app's fields change significantly.

The ability to show merged info should be a top priority because a database is useless if you can't display the data in a useful way.

Sincerely,

AP

Thanks so much for this  - it works awesomely 

A couple of little quirks I've discovered though, 

As stated earlier, cant get an image thumb to print 

also, conditional rules don't work (ie: show / hide label)

and - if a field has no data, webmerge populates it with "undefined"

one more thing - a line to separate the rows in the table would be nice.

Any thoughts on this ?

Thanks again for this

Dear Sara, 

I understand you may feel lost. I think knack offer great possibilities of simple DB design for non programming users. You can design relations between objects, define workflows and create useful interface without having to write any code. 

There is also an possibility to customize further the standard features but this requires some coding skills and it is really up to each user to choose this path.

As it is, sending knack data to webmerge directly requires programming and is not a standard feature.

You can try alternatively and use Zapier which can automate some tasks, at a fee, if you want to do that by yourself.

If you require some help you can always post your topics in the forum or enquire the knack builder network.

Augh...I was looking forward to trying this, but it's complete Greek/Martian speak to me. I'm not sure what I'm even looking at with the tool, the code. I'm completely lost in a world of..."you can build databases without having to be a programmer."  I signed up for my trial and tried to read the documentation. Nothing.

I don't know what Fancybox is, I barely know how to use an 'inspector' and what led me to WebMerge was the desire to have a report that had the heading repeat on every page (not the table heading, but the heading for the entire report).

Maybe WebMerge instructions need to be broken down into easier-to-understand instructions? I'm a tech writer and I could probably even sketch it out if I knew where to even start. What sort of knowledge do I need to have to use WebMerge?

I need a diagram of what a "Scene," a "page," "Views," etc. are. I read different information in different areas of the documentation and I'm lost. I've tried looking up what an "API" is and I still don't get it. Am I alone? 

Is there some way for Knack to easily expose what the field names are so that we don't have to go through an 'inspector' process? We would just open up our database field names, for example, and the information is there?

I also need a diagram of what I'm looking at in the URL bar. Make it easy, I beg of you! Thanks!

Is there an update on how to format date/time fields when passing data to webmerge?

I've got various dates in dd/mm/yyyy format that end up in webmerge as mm/dd/yyyy.

Hi.

replace all your : ` by: '

Hi Everybody,

Ive tried to do this, but the code wont even let the page to render when I install it.  Any help would be greatly appreciated:

 

$(document).on('knack-scene-render.scene_143’, function(event, scene) {
  
   // link hander: send invoice to webmerge
  $(‘#view_201’).submit(function(event) {
     
    event.preventDefault();
     
     
    // get data
    var data_view_198 = Knack.models['view_198’].toJSON();
    var data_view_199 = Knack.models['view_199’].data.toJSON();
      
    url = ‘https://www.webmerge.me/merge/749839/vmw77s?test1’;
  
    url += ‘&branch=' + encodeURI(data_view_198.field_401_raw);
    url += ‘&BM=' + encodeURI(data_view_198.field_402_raw);
    url += ‘&branchaddress1=' + encodeURI(data_view_198.field_408_raw);
    url += ‘&branchaddress2=' + encodeURI(data_view_198.field_409_raw);
    url += ‘&branchcity=' + encodeURI(data_view_198.field_410_raw);
    url += ‘&branchstate=' + encodeURI(data_view_198.field_411_raw);
    url += ‘&branchzip=' + encodeURI(data_view_198.field_412_raw);
    url += ‘&branchmanageremail=' + encodeURI(data_view_198.field_403_raw.email);
     
     
    for(x = 0; x < data_view_199.length; x++){
        item = data_view_199[x];
        url += '&items[' + x + ‘][requestid]=‘ + encodeURI(item.field_106_raw);
        url += '&items[' + x + ‘][branch]=‘ + encodeURI(item.field_414_raw);
        url += '&items[' + x + ‘][requestname]=‘ + encodeURI(item.field_365_raw);
        url += '&items[' + x + ‘][requestemail]=‘ + encodeURI(item.field_3_raw);
        url += '&items[' + x + ‘][requestphone]=‘ + encodeURI(item.field_366_raw);
       url += '&items[' + x + ‘][altaddress1]=‘ + encodeURI(item.field_360_raw);
      url += '&items[' + x + ‘][altaddress2]=‘ + encodeURI(item.field_361_raw);
      url += '&items[' + x + ‘][altcity]=‘ + encodeURI(item.field_362_raw);
    url += '&items[' + x + ‘][altstate]=‘ + encodeURI(item.field_363_raw);
   url += '&items[' + x + ‘][altzip]=‘ + encodeURI(item.field_364_raw);

    }
     
     
    window.location = url;
     
  });
});

 

Thanks a ton for this awesome contribution

To steal some insight on image fields from the FancyBox tutorial elsewhere here...

// this initializes fancybox and sizes the images
$(document).on('knack-scene-render.scene_141', function(event, scene) {
// this finds each image on the scene and links them to the bigger version using fancybox
$("#knack-body img").each(function() {
   
  // this part creates the URL to the full size image
  // you must investigate your own setup to find the variable part of the URL
  // for each of your images. 
  // in my example "thumb_2" is my thumbnail and "thumb_3" is the big version
  // that is "fits within 1600x1600.
  var thisimg = $(this).attr('src');
  var fullimg = thisimg.replace('thumb_1','original');
   
  // this takes the URL and puts a link around the photo thumbnail
  $(this).wrap('&lt;a class="fancybox" rel="group" href="'+fullimg+'"&gt;');
   
  // this optionally makes the thumbnails responsive so that they always display
  // nicely even on smaller screens
  $(this).css('max-height', '200px');
  $(this).css('max-width', '100%');
   
});

// initialize the javascript library
$(".fancybox").fancybox();

});

It seems that the thumb_1 portion can be replaced with another thumb_x setup to restrict to whatever size, or just original for the full sized image.  But you’ll probably need to use the bit where it grabs the actual URL from the src tag (and modifying it to another thumb or original if necessary).  I have zero experience with Webmerge, but this may get you started.

I'm using the webmerge builder to do some testing.


Not sure how can I achieve this, just want to place an image on the document, but on the knack view where the button is located only the thumbs are present.


Isn't there a way to push information directly from knack to webmerge without depending on information present on present view ?

Hi Bruno.

I am not sure you can do it with thumbnail images as the original data is the image itself.

Are you trying to create a document in the webmerge builder ?or from an MS office doc? in which case you can refer to that link.

https://webmerge.zendesk.com/entries/22528487-Embed-Images-Signatures-in-Word-Excel-PowerPoint

Thanks Stevan,

Got it, but it would be easier and simpler if we could just use object names has they are on the DB.

I have another issue now, I have a field that is a thumb of an image, in this case is "field_140_thumb_2", tried field_140_thumb_2 and field_140_thumb_2_raw ... but can't put the image on the webmerge document... how can I do this ?

Hi Bruno, 

If you are using a browser like Chrome the easiest is to inspect your page element which you can do by right clicking then you get something like this:


Hi, how do you get the corresponding xx on a field to get  field_xx ?

I thought we could just get the proper object name & field and use it.