Using XDP templates with AEM Forms and Acrobat Sign

Hi, in this video, we will take a look at utilizing XDP templates with AEM forms and Adobe Sign integration. So a lot of organizations would have templates of this kind, which were created using Adobe LifeCycle Designer or AEM forms. And typically these templates contain some static texts and some fields to capture user information. Now, if you want to send these templates for signature using Adobe Sign, there are some simple things that you need to do. The first thing I did here was to add some text component here, and this is not a text field. This is just a static text from here. This is just a static text that you add. And in that text, I’ve put some tags which Adobe Sign understand. So for example, this tag is to identify the signer one. And this tag is to identify the date of the signer one signature. In a similar manner, I’ve put a tag to identify signer two and the date associated with the signer two. So these tags are nothing but Adobe signature tags, and there’s online documentation of this Adobe Sign Text Tag guide here. So I’ve taken these tags from here and simply copied this text and placed it into my text component in the template here. So once you have this template, this template can be used as a basis for your adaptive form. And then we can leverage the integration between AEM forms and Adobe signature. In the next video, we will take a look at how to utilize this template with AEM forms and Adobe Sign signature integration.

In this video, we will create an adaptive form based on the XDP template that we created in the earlier video. Before we create an adaptive form, we need to import the XDP template into AEM forms by clicking on the create and select the file upload and select the XDP template that we created earlier and click on upload.

Once your XDP template is uploaded, the next step we need to do is to create an adaptive form based on this XDP. So click on create adaptive form.

Select a template. If you remember correctly, every adaptive form is based on a template and in our case, we are going to select a blank template. Click next, give a meaningful title to your form.

Agreement, XDP and configuration container, remember our cloud services configuration container was stored in a container called AdobeRocks. So we need to select that so that we can use the cloud services configuration and then go to the form model tab. Here you need to select a form template as your form model and then search for your appropriate XDP template here. So what we are saying is, base our adaptive form on this template so the template acts as a form data model. So whenever you are basing your adaptive form on an XDP template, you will not have the option to configure the document of record. That is because the template on which your form is based will act as a template for generating the document of record, then click on create.

So once your adaptive form is created, let’s open it in edit mode to see what it looks like.

So that form, has form container and root panel. And if you go here to the data sources because of our form is based on the XDP template, it shows you all the fields and the text components, which are in the underlying XDP template. So then we will configure this form by including the appropriate components from the underlying XDP template and configure this form to utilize our integration with Adobe Sign in the next video.

So this is a form that was created in the earlier step. I have gone ahead and added some tabs and dragged and dropped some fields onto this form. So before we go into the details, let’s take a look at the data source. If you remember correctly, this form is based on an XDP template and the data source is then the XDP template. And these fields are coming from the underlying XDP template. And the blue dot next to this field means that that particular field has been added to the adaptive form. And to add the fields from the XDP template onto your form, you simply have to drag and drop into the appropriate location. For example, if I go to the NDA agreement text, and then I want to drag and drop the NDA verbiage text into this step, I seem to do this. And then that text becomes available. So this way I have three tabs under my root panel, and each of those tabs have some fields and some of those fields are bound to the underlying XDP. And some of them are not. For example, the receiving party field is bound to a field index DP. So if I open the properties, it says the bind reference, and it is bound to a field in the XDP. So when you drag and drop an XDP field onto the form, the reference is automatically set. Please do not change this bind reference. And if we were to see this one here, this particular field, so this field was not dragged and dropped from the underlying XDP data source. That’s why the bind reference is set to null here. So, because this is not bound to the underlying data source, since there is no bind reference, in a similar manner, the disclosing party field is coming from the underlying XDP. That’s why you see a bind reference. And then in the NDA agreement text, this is the text component field that was dragged from the data source stack. And that’s why you will see a bind reference here. And then we added a new tab called sign document, and here we added the signature step component.

I also changed the default theme of the form. So if you remember, this theme is called, Urbane, when we created the form, it was a canvas two. So if you were to see this here, that’s the Urbane theme, but the default theme was I think, Canvas Two or Canvas theme. So I changed it to Urbane, right? So the next thing we need to do is to enable this form, to utilize our integrations with Adobe Sign. So to do that, if you remember correctly, we are to go to AEM, the forms, container tab, go to the electronic signature, make sure you have selected, enable Adobe Sign, select the appropriate cloud services configuration, in this case, AdobeRocksWithSign and specify the order in which your signers are going to sign this document, in this case, a sequential. And configure the signers one and two here. So signer one is the same person who’s filling out the form. And every person signing the form needs to be associated with an email ID. And that email ID is coming from the form, and we need to select the appropriate field name from which that email address is coming. So that’s the disclosing party by email, Signer authentication method is set to none and click on that. And then the signer two here. If you want, you can change the title here.

Signer two and specify the email address associated with that signer and click okay. And save your settings here. And the next thing we need to do is to make sure you have configured appropriate submit action. So in our case, we are selected the forms for the submit action. So now that our form is ready to be used. In the next video, we will see the signing experience with this particular form.

Now that our form has been authored and configured to take advantage of the Adobe Sign integration with AEM, let’s preview the form and fill and sign the form. So I’m going to preview the form in it’s general format and enter some values here for the receiving party and the receiving party email disclosing party, and review the NDA agreement text here, everything looks fine. Then I’m going to the next step to sign the document. So what this does is it merges the data from the adaptive form with the underlying XDP template. Remember our adaptive form is based on an XDP template. So what we’ll see here in this screen will be the XDP template with the data merged from the adaptive form. So this is my XDP template here, and I’ve been asked to sign here, disclosing parties. So I’m going to sign, using Conrad Simms here and then apply. And then when I sign this, the receiving party will get an email notification to sign. And once the receiving party signs this document, the signing process will be complete.

I’m going to sign, I’ve done everything. So if I can download a copy of the document that I just signed.

Here is my document that was signed here. So if I were to see here, this is the Conrad Simms signature that’s placed in the appropriate location. Remember this location was specified in the XDP by using the Adobe signature tags. Now the same document will be sent to the receiving party for John Jacobs and his signature will be placed in the location that was identified by the signature tags in the underlying XDP. So this is how you can utilize your existing XDP templates with AEM forms and take advantage of its integration with Adobe Sign. -