In my previous short post, I created a simple doodle control for AX, and mentioned that the actual objective was to build a signature pad using the Extensible Control Framework. In this post I’ll extend that a little by adding the ability to auto-complete a PDF form using data from AX and then give it to the user to sign using their pointing device of choice.
For the AX developers out there this post will unfortunately not include source code as I am working on a commercial product, but hopefully the ideas I share here will help you in your own projects at some stage.
I am not very familiar with AX Document Management, but what I have seen in the latest version of AX 7 RTW is that attachments are supported, but what I am really looking for is something that also gives me the following features:
- PDF support with fillable fields
- Signatures, without requiring digital certificates
- Offsite-storage for once the volume of documents reaches critical mass
- Archiving offsite for say, 7 years (payslips, tax certificates)
- Forms distribution to users (mail merge)
- Access to archived forms OUTSIDE of AX (like payslips, when an employee has been terminated)
- Library with form templates
In a previous project I built a forms management system supporting all of the above items, and as I am learning X++ I thought it would be a good learning project to convert as much of that as possible into AX. The platform, called FormsBox, is still in BETA so please don’t sign up. However, one item I did add early on was a REST API to allow retrieval, editing and downloading of forms via that API. So I will utilize the same platform now to try and achieve a similar experience in AX. FormsBox runs in Azure and was built using ASP.NET (C#).
Let’s have a quick tour of FormsBox (www.formsbox.com)
First off, when signing in, users can see their home folder with subfolders and all their uploaded forms. Forms can be uploaded as images, Word, Excel or PDF. They are all automatically converted to PDF during the upload process. You can also email a form to the site, and a backend service will collect the email, extract any attachment, and stick it into your home folder automatically. Handy for storing email attachments. Forms are stored as Azure Blobs and encrypted.
FormsBox also features a public library of forms (currently just under 500) which any user can copy into their home folder for use, completion and sharing/distribution. Looking at the Library view, notice the GUID which lists the form code. We’ll need this code for the API, and we will use code F03B7658-9CE1-4921-A5D7-FEFF02FFC733 which is the code for the Check, Stop Payment form.
We can preview the form in FormsBox, and note it contains fillable fields. Each field has a field name, in this case FirstNameLastName, AccountNumber, Payee, Amount etc.
One item of concern in AX is PDF support, without requiring the addition of anything additional to core AX. Like it or not, PDF is still the de-facto choice for creating and completing forms. So we have a couple of issues to deal with here:
- Display a PDF in AX, without any plugins
- Complete that PDF using data from AX
- Allow a user to sign the PDF, correct/undo a bad signature
- Save, Download or return that form (I’m putting that into the to-do list for another post)
So the bigger challenge now is to display a PDF in AX.
There are a couple of ways we can do that. First, we can call an external service for rendering the PDF, and host that in an IFRAME. Unfortunately, that will display a pop-up for the user asking whether they want to navigate away from the current page. Bad choice. Also, unless that site uses HTTPS, a security warning will also be displayed. Not the type of quality we want from what will end up being a commercial product costing money.
As we only want to display the PDF, what we can do instead is convert the PDF to an image, and send the image back to AX to embed into an IMG tag inside of our Extensible Control HTML.
Thus, what we want to achieve is to call the FormsBox API, pass our AppKey, AX data fields, and the form code, and have it complete the form for us, and send it back as a PNG image so the user can sign on it within AX. This is depicted graphically below.
For that I used a combination of tools including GhostScript and iTextSharp for conversion and data-stamping into the fillable fields. I have to also resize the end result to ensure it properly fits in the AX form. There are a number of improvements I need to make, but so far so good.
Let’s take a look at the PDF being display in AX, as shown below. As we can see we called the FormsBox API and passed the data from AX to the API, which returned the completed form as a resized PNG image which we embed into an IMG tag.
The next screen shows the signing process in action using our signature pad. We’ve also added a “New” button, to allow the user to reset the image if they botched their signature. As it takes a few seconds to load the image via the API, we also added a “Loading…” text into the canvas, which is erased once the image arrives back.
Finally, we can zoom in a bit to view the completed, signed document.
With that, we have the beginnings of a viable commercial product or at the very least a usable plugin for other AX modules.