PDF Integrations in Servoy – Tech Webinar #64

Welcome to yet another episode of the Servoytech webinars and Today with me is Sean Devlin and my name is Jan Edel and I’m one of the founders of of Servoyand Welcome everybody feel free to post any questions that you have in the questions channel I’ll be keeping a close eye on on that during and after this session Today a topic here that has been available a very long time in in servo. I believe in the very first version of Servoy 18 years ago already had PDF support But today we’re going to be digging into a couple of the PDF options you have nowadays in the ServoyIt’s a bit of a recap, but there’s also a couple of new things That’s Sean will be we’ll be talking about quite some content to cover so take it away, Sean Okay, thanks, you on as my screen visible. Yes, it is. Yeah, this is episode number 64 in our running bi-weekly series all about PDF integrations and as Jan said There is a lot of material which is which has been available in Servoyfor quite some time and when we were looking at our webinar archives we realized that this one We haven’t done a topic on yet and there were some new Developments in the world of PDF integration recently, so I think it was a good opportunity to create a webinar about this topic So as usual, I’m going to do a few demos and then if you feel like sticking around we’ll do a quick overview after the after the demos and see You know summarize what we’ve seen and Of course you have the chance to ask questions and we do the live question and answer session at the end So please type your questions into the chat window as they occur to you and finally I will Talk a bit about Servoyworld at the very end of the webinar So with that out of the way, let’s jump into the first example. We’re gonna look at combining PDFs I’m going to launch my debug client from the Servoydeveloper now in this in this example What I’m gonna do is upload a few PDF documents and then programmatically combine them So I’m gonna use the upload component by the way if you’re interested in how to upload Documents there are a few different ways and that was covered in the last webinar so check out our archives for that So clicking here I get a filter list of documents. I’m gonna just grab a Undocumented Undocumented It’s a utility bill you can see that I get a thumbnail preview of the document over here, but I’d like to grab let’s grab one more And now you can see as I click between these documents I get a preview of both of them on the thumbnail images You So finally I’ll get one more bill here put it up there So now I have three documents and what I’d like to do is combine them So I click combine and you can see that I have an embedded preview of all three documents More than three pages, but a few bills there that I combine into a single document and I previewed them on the screen So let’s go ahead into the IDE and take a look at how that was done So what I’ve done here is I’ve uploaded those documents and sort of store them into an in-memory data source That’s not the part we want to focus on I want to focus on where I iterate over the documents and combine them and then Show them in a preview. So that’s this method right here combine PDFs and you can see that I’m just iterating over a Foundset which is that sort of in-memory data source of Servoy and I’m creating an array of those documents And then I call this one method here Combine PDF documents and It returns the combine PDF as a byte array and then I Show this on a preview Now what I’ve done is I’ve created a form here called PDF preview. I’ll open it in the form editor for you This form was quite simple. I just dragged one component on there from my palette So right here the server for a PDF preview component. This is available through the web package manager or the Servoy package manager If you right click Servoy packages Download and install This will come up and load a page of Extensions that you can add and there’s the PDF viewer right there. So that’s how I put that on that form And then there is a method I’m going to open this in the script editor Where you just set the document URL so I passed in the URL there were some things I did to generate the URL on the server But the point is is that this this previewer can just basically you can set it to any URL So it could be relative to your own web application or it could be some third part of URL That part is up to you and then I navigated to that form, but I don’t think that’s important for to go over for this demo What is important to know is there’s a standard PDF previewer component? So and there’s also this PDF output plug-in. I combine those documents and I Into a single document I put it out on our web on my web server and then I directed that component to show it And you can see that it just navigated to The previewer and if I navigate back, you know, I could Delete one of these and do it again And see a preview of just the two documents in it. So that is combining documents The next example that I wanted to show is How to convert fill-in forms. So fill-in forms are a type of PDF where You can you know type in and fill it in and then print it. So typically these will be standard You know standardized bureaucratic forms from governments or hospitals or the institutions that are required for certain business processes and we see this Time and again in business application where Systems got to integrate with some third-party Vendor or report to the government or something like that and they have to do it by these standardized forms But you want to do that and merge a bunch of data in and you don’t want to do that by hand certainly So in this example show how to automate that So I’ve come over here to my convert PDF form example And what I’ve done is just I’m just using the sample data here looking at orders and I’m going to search for some orders and then I’m going to merge all the data in and And and Generate the forms but before I do that what I want to do is show you the the form that I created So I’m going to jump in here to my downloads and I think it was called Customer fill-in no orders fill-in So this is a just a sort of dummy form that I made is the kind of thing where you can just type in and tap through the fields But of course we don’t want to do that as an end user we want to do it automatically So what I’m going to do is programmatically fill this form with data So back to our example I have a 830 matching records. That’s a bit much. So let’s window it down Let’s look for all orders that shipped to Germany and maybe had coffee And I get four orders here. So what I want to do is merge four records Each record and then combine them into a single document. So I want to document that has basically four copies for one for each record We’ll come back to these these options here, but for now. I’m just going to do fill in the forms So now what you can see is that for those records the form was filled in with the Order information. I don’t know pretend this is some required form that I had to send somewhere for reporting So I programmatically filled it out the records here are different and there should be four pages They’ll also notice that the pages are numbered as well So four out of four pages there Another option that that I had here was to include say a watermark image. So I’ll do the same thing And now you can see that I’ve put a sort of a stamp over top of it to say this is a giraffe And that’s an image that I had included in my project and I’ll show you how I added that Alternatively, suppose you don’t have an image, but you want to put something over here Let’s say that I want to add here preview before So here I’m stamping it with the text preview so you can do overlay image or overlay text So I’ll go back to the Servoydeveloper and show you how that was done In this case What I’ve done here is when I call this method convert PDF I’m going to iterate over the records in the found set And I’m going to fill the form so I jump into the sub routine and fill the form So that’s down here and the way that works is really you take Name value pairs And you take your original PDF the one you want to fill in and then you say take these name value pairs and fill it in With the PDF so a Perform field sort of encoded in the document has the name of those fields And so you kind of need to know that you can do that by inspecting the document in your browser Or some other tool like Adobe Acrobat But since I created it I knew the names and I made them kind of similar to The names in my database so it’s an array of these sort of string name value pairs What I also did is I got the document it was stored here in in my media folder So I just included it in my project you could do this the exact same way if you have standardized documents I got the The document in memory here I got the values and then I just call this method convert form to PDF I passed it in the document In memory I passed in the values and it converts out the Be converted document Then what I did is I did the options if there was the watermark where they overlay text So I jump into a sub method here Again, I had the watermark image Already stored here in my project You could do the same and you could deploy it this way as well Or you could get it from you know an external URL But I just got that image in memory and there’s some options here when you when you add the watermark About the location etc, but basically you just need the Document in memory and the image in memory and then you get returned back the watermarked PDF It’s the same for the overlay so When I had overlay text I called this method down here and again using the PDF The PDF plugin I add the overlay text. I need the document in memory The overlay text that I want to add which I captured in that user input And then some Information like location font size color etc. So you have some flexibility there So those are how I I added those overlays Finally, you’ll notice that I was I was doing this once per record So I called this fill form method Every iteration And then at the end I also combined it So I called the this is from the first example And then I got back the combined document there And I added the number pages which is another Method you can call so it will actually write the page numbers in to the document And then finally I showed it in my preview or I had that component which you can embed on a form to preview Okay, for the third example. I want to talk about how to Encrypt a PDF So there’s a lot of use cases for this I know that there’s some standard Hospital form sometimes they need to be filled out. They have patient data on that in North America and US you have Laws requiring sensitivity about medical Medical data personal medical data. So If you’re going to send a PDF for that it has to be encrypted and password protected etc Same might be for financial data So it’s the use case. I want to take a PDF and I want to And want to encrypt it and there’s some options too with like what permissions you want to put So we’ll just start with the file upload And I’ll just grab one of these piece again You can see that I get the thumbnail preview here And we’ll talk we’ll talk about that. I haven’t gone into the thumbnail example yet The thumbnail preview here. There’s the owner password, which is like the full access password I’ll put a bc for that. I’m using password fields. You can’t see it and then I’ll put one two three for the user password That’s that’s who’s going to use the document And get the the assigned permissions so From there I want to encrypt this and instead of doing a preview I did it as a file download because I think that’s a better example for this one So when I click on The downloaded it will it will open up in my browser But my browser recognizing that it’s a protected document will request the password And when I put in the user password You can I can see the document Now I want to take that example a little bit further And what I’ll do is I’m going to Upload the same fill-in form that I used in the prior example And you can see that there’s the preview of that form And you can see that I’ve selected the option to fill-in form fields What I want to do is disable that option and encrypt it And now when I put in the user password So coming into the example PDF protect form code And I want to go to a method here encrypt And basically this is one line of code you call the PDF output plugin and you and you call the encrypt method And basically you take the file that was uploaded in memory The owner password and the user password are required And then there’s all the options that I have right there And that will return back the encrypted document as a byte array To have it in memory And then you can do with it what you want In this case I didn’t show the preview I just used the file plugin here to write file Which you know, you know, web client will will trigger the download So that it’s one line of code to then send that down to the user And Basically all these options are what the what the user will have permission to do And what they won’t have permission to do and whether or not they can You know, if they open it up in Adobe Acrobat or something they start to try to copy things out of it or That sort of thing then they can be restricted from doing that There’s even whether or not to allow screen readers for accessibility That sort of thing So those are all the options But the most basic One where you if you don’t have the options is just whether or not they can access the file And for that all you need is the owner password and the user password And then you can you can do that and mail it as an attachment or whatever you need to do I also want to show how the thumbnail image was generated You can see on files upload which is the callback when the upload gets Handled just one line of code I call Scopes.example PDF that’s a scope I put for just this example get thumbnail image This was the kind of the new development in the world of PDF integrations in Servoy We could go someone asked how do you get a thumbnail image I looked at our PDF plugin and said well, we really can’t do that, but I know it’s possible So I wrote a little scope to be able to do that and it gets a thumbnail of the first page or any page And returns it as an image in memory that’s something that we’re going to add to the standard PDF plugin In the next release, so I wanted to share that with you because this came up as a requirement It was pretty easy to do so I did a sort of a little proof of concept for this webinar And then we can add that back into the product And that’s how the thumbnail was retrieved. If you want to do that today I did that with an Apache library This is what the code looks like But again, don’t be scared of this code. It does a little bit of Java under the hood You don’t ever have to write Java in Servoy We provide high-level JavaScript APIs and this will be available as a one-liner To get the thumbnail image for a PDF page I think that concludes all of our demos So why don’t we go back to the slide deck and do an overview and then we’ll take some questions So the first example we showed how to combine PDFs and this is ideal for Taking several documents putting them together. You can number the pages You can send it as a mail attachment whatever And that’s one line of code on the PDF output plugin called combined PDF documents And it takes as an argument and array of documents that are in memory The next example I showed was how to merge data into the PDF fill-in forms And for that all you really need is an array of these name value pairs as a string And then you can call the convert PDF form to PDF document and it’ll sort of flatten that document With those values in it and you can you can do that for I showed an example multiple records You just have to do it in a for loop or something and then you can use the prior example and combine them all And that’s what I did to get those four records for that one search into a single document The other example we just saw was how to encrypt a document with a password and with some options Really all you need is the document that you want to encrypt and then You just specify the owner password which is like the master password and the user password which is the more restricted Access and then after that you can specify some of those options with you know can they select and copy out Content can they make modifications to annotations on the PDF Can screen readers for accessibility access it can they print it all these these options the one that I meant to show was the fill-in form As well something they’re not working We also saw how to add a watermark image or a text overlay again, that’s just one one line of code with the PDF plugin For the watermark you just specify the the input image after the document And it’ll it’ll position it and you can you can add location parameters to move it around and I had to play with it a bit to get it to work So and I also had to scale the image but once you do it once it’s it’s fine And if you don’t have an image or you want to have it be data driven then you can also do an overlay text and sort of slap that over top And there’s options there if you want to do it on the first page only or on every page. It’s there’s a little bit more flexibility that I didn’t Sometimes people like to add a very like light colored translucent Watermark of their company seal to almost like you know you would get on printed stationary. That’s also an option or use case for this Finally, I didn’t get too much into we actually covered this in a webinar long ago When this component was new was that PDF viewer So in the first couple examples the output what I did instead of Just downloading it and opening it in another browser tab or Adobe reader. I I edited it on In the Servoyapplication and that’s a component you can put on it and you can put other stuff on a form next to it I see a lot of people use this for In conjunction with bi tools so they might use Jasper reports or something And run a report and then they just preview the report right in the in the viewer and then there’s options in that view I don’t think I showed this but if I jump it in here to the example And I just run one of these and I showed in the preview or excuse me you get options here to download And you probably recognize this in this view here rotated you know download it printed zoom in zoom out Good full screen that sort of thing that all comes standard in that component as well And That’s available through the Servoypackage manager You could just bring that right into your developer environment and add it to a form So I can see that we have some questions I’m going to ask my colleague Jan Almond to helping with that and while we take questions I’m going to leave up information for Servoyworld It is coming up now. It’s just a few months away. It’s going to be pretty exciting. We’re doing a hackathon Involving a charity to start the conference That’s community hackathon everyone’s invited and encourage to participate. There’s going to be an outing There’s two days of sessions and we have some workshops for some real hands-on learning There are half days. We’re going to have two concurrent tracks a morning track a morning session and an afternoon session in each track On the website that’s listed at the bottom of the slide is where we have more information about the sessions and And the workshops so please if you haven’t made your plans already There’s still room. I think at the hotel and certainly in the conference so Go ahead and give a look at that website

Close