Developing with Adobe Experience Manager Forms in the Cloud

Transcript

Hello, welcome all. I am Sakshi. I am here to present Jollipping with Adobe experience manager forms in the cloud. Today I’m here to present Jollipping Adobe experience manager forms in the cloud. I’m Sakshi, I’m computer scientist at Adobe. And I have been working on the forms for around eight plus years now. The session’s agenda is to give you a peek into what all developer persona can achieve by customization for forms in the cloud. So I’m going to start with an overview and then public artifacts, project setup using archetype, core components, customization and accelerating development using local setup. This is how a typical development setup would look like. You would have your Git repository, all your code is going to, all your customization is going to go here. It is going to be synced with cloud manager Git, which would be responsible for deploying it to your all your clouds environments. This is a deployment methodology overview. Your code changes are going to come from your CI CD and rest of the deployment is going to be taken care by cloud manager by its production and non-production pipeline. So when we are developing with forms in the cloud, you will need these artifacts, which are forms feature archive. This is a public artifact, which would be available on the software distribution. Currently it is supported for Linux, Macs and Windows. We also have forms SDK, which can also be downloaded from Maven repository and it includes Java and JSTalk. Then I’m going to talk about this archetype and what it composes of. It is a multi-module Maven project. It basically has UI front end, which has all your styles or which has link models, OSGI services, unit test, Java code, and all this is encapsulated inside UI apps module, which has your UI front end client lips. It will have your custom components, OSGI configs, and all the OSGI bundle, which are resulted from core. The other thing is UI content, where you can have your forms, form assets, form templates, you can have your data integrations here, and all this goes to UI content package. Additionally, you may also have IT launcher and IT test, which you want to run for your customizations so that everything looks sense before it is deployed to your pipeline. And both UI apps and UI content package are packaged to all which is finally deployed to AEM. Now we talk about AEM archetype. So AEM archetype is publicly available. You need to use version 25 of it for forms. You need to include forms. And once you do include forms in your archetype, what all you get is core components. And these might be included by default in future. You also get form SDK, which is needed for customization, and you get reusable content. In future, we might have a different distribution mechanism for this reusable content. This is basically to get you quick started on your development process and customizations. So what all can you customize using, what all you can customize for forms in the cloud. So we can have configurations. So you can have adaptive form configurations like cache size, data merge options, schema compliant data. Additionally, if you have configured email as your submit action for adaptive form, you can push your email configurations to the cloud as well. So we can have form data model configurations like HTTP line configuration. You can whitelist your URLs for fonts, images, web services. Apart from this, you can also write code for your custom component. You can extend an existing custom component and you can write custom services like pre-fill and submit for the form. You can additionally include client libraries to include custom functions which are available in your visual editor for rules. And you can even add new localizations. So out of the box for forms, we support around 10 localization and 10 locales. And we have seen our customers use up to 38 locales for the form. So that’s pretty flexible there. So without any delay, let’s move to demo. So I’m going to create a forms project for weekend. Let’s have a look there. So our goal is to create a, integrate our form to a weekend site. So this is a weekend site. Probably you would have had a look in previous sessions for this. So what I have done here is I have, this was already there. I have included a AEM form here to this very weekend site, which was already there. And what else I have done in this form is I have added my custom widget, which does an address lookup. For example, if I type, so it is giving me a dropdown, which to look up for the, whatever I’m typing, it’s a look ahead type of thing. So how we can integrate that apart from this, what I have done is if you have number of seats, more than 10, it gives me a friendly suggestion that you should go for a bulk booking. But if I have number of seats, less than 10, this suggestion goes away. So I’m going to tell you how I wrote this rule by using custom function. So let’s see how our customizations are done. Before that, I’m going to show you my environment. This is my environment, which I am going to use. This is gel-agreedev. And this is just a forms environment in the cloud. And for doing customization, first of all, you need to go and build your archetype. This is a public AEM project archetype. Here you need to use version 25, as I said, and you need to include forms. So basically, you have to run a command like this. This is a Maven command to generate archetype. Here, you have to give archetype group ideas, com, adobe, AEM, architect, artifact ideas, AEM project archetype, archetype version as 25, AEM version as cloud and app title could be anything. And you need to include forms, of course. So once you run this, it is going to expand to a project which would look something like this. So I’ve already expanded my project, I have checked it into the get triple. So if I go to my program, you would see here, so there is a managed kit option here. So you have to means you have to sync your code by this get triple to get that things on the cloud environment. And in non production, when you run this pipeline, when I run this pipeline, all my code is going to come up to my cloud instance. So let’s go to my code again. So let’s start with configurations. So if so, as I described, there are various components of my multimodule archetype. One of them is UI config, where I add configurations for my system. For example, I have added this meal configuration. Now here also, if you want to push different configurations to author or publish or prod or prod dev or prod state, so you publish it. So all these configurations are available. If you want wish to push a configuration to every deployment you have on environment, I can push it in generic config. So for example, this is a default meal configuration, which I have set up. And I have run the pipeline and my code is deployed on my environment cloud environment. So let me check whether my configuration was pushed on my cloud environment or not. So I’m going to go here, I’m going to open developer console for my environment. And I’m going to check the status of my configuration, I’m going to get the status. Here it goes. So let me check. Oh, it is there online number 613. So let’s check if my full of my configuration is available or not. Let’s scroll down to 613. Yep, here is my configuration, which I pushed from my repository to my cloud environment. And it’s as simple as that. So this is how you’re going to push your configurations to your cloud environment. Next, I’m going to talk about core component, the core component, which is going to come by default in by aem archetype. If you include forms, so let’s go here. So here I have given a component group to my core component as Jellagary forms. And it’s linked resource super type is core fd components, aem form version one aem form. So this is available by archetype, which I already specified. And once I deploy this to my cloud environment, again, that is by pushing my commit to migrate and then running the pipeline. And that will get everything all of my customizations to my cloud. So let’s go to our aims once again. So I want to add a signup page here. So I have another site surf camp in Costa Rica, and I would like to add a similar page there. So to do this, first you need to do what you need to do is close these windows. So this is my site that we can site which I was talking about. It had best course cycling where I’ve already added a signup form and I’m going to do that for surf camp in Costa Rica as well. So I’m going to go to my template. This is the template which I am using for my adventures. So here I have added that to a tab. So I need to allow a aem form component to be added as a tab. So I’m going to go to design policy of my tabs. And I’m going to search for aem form. So here is my forms container, which is under Jellagri forms. This was my component group. So I’m going to say done. So what I typically did was I allowed tabs to have an aem form component. Now I’m going to go to initial content. I’m going to go to settings of this tabs. I’m going to add my aem form container. And let me say that it should come up as sign up. And I’m done. So now any page created from this template is going to have a sign up page. So let me have a look at my Costa Rica form. So here we go. So now I see it’s itinerary what to bring and my sign up is coming as empty because I’m not included a form here. So let’s go to its authoring. Close this one. Okay, so I’m going to open my Costa Rica. So this is my authoring for that. I’m going to go to sign up. Here is my sign up and I’m going to include my form. I have to browse to my form. Now, let me show you the form which I am going to include. So this is the demo form which I wish to include. And it has this blue and white theme with it. And if I look at my side and look at my aem, mine is a little grayish tone theme. So what I’m going to do, I don’t want to change the theme of my original form because this might be showing up at different places and it might break the experience there. So what I’m going to do here is I’m going to browse to my form. That would be my demo form. Select that and I’m going to change the theme here just for this site and it is not going to apply anywhere else. So I’m going to say done. Yeah, looks pretty good. Let’s refresh your page. So here it is. So we have come pretty close in two steps to what we aimed for. The next thing is I want a visual editor rule so that if I say 11, my friendly suggestion is still not coming. Let’s see how we can do that. For that, if I go to my again customizations here, I have defined a function which is check bulk booking and it takes two parameters. One is bulk value. This I’m going to get an input from the author who is configuring the rule. The other one is scope. This is an internal parameter of form and once you specify this parameter as scope, form is good. Form’s framework is going to identify that form has to provide form scope to this. So once you have the scope, you can access any of the field in the form. So number of seeds suggestion. So what basically I’m doing is I’m checking if number of seeds is greater than the bulk value which is provided, then I’m showing the suggestion as true and else my suggestion visibility is set as false. So this is a very simple rule. You can always achieve this by a visual editor as well, but this is just to showcase how you can write your customization complex business logics by functions. Another added advantage of writing function is it’s a reusable thing. You can plug in your function at various places. You don’t have to repeat the logic there. So let’s go and see how we plugged in this code and let me show give you a quick look. So this resides in my UI apps as all my custom components and custom widgets would reside in apps. Let me show you the client library. So the client library of this very function which it resides in is AF.utility. I need to plug in this client library with my form so that whenever my form is loaded, this library is loaded with it. So let’s see how we did do that. Here is my demo form again. I’m going to go to form container. There is a client library category mentioned here. So I have written AF.utility here. So once I write a client library category name here, it is going to get downloaded with your form as is. So we have we did that. Now let’s quickly go to our rule editor and see I’ve already added this friendly suggestion field. And if I open its setting, I have hidden the object. That is, whenever the form is rendered, it is going to be hidden by default. Let’s go to our number of seeds where I wish to write the rule. So I’m going to create a rule and I’m saying number of seeds whenever it is changed. Do what I need to invoke my function. So function output. Let me drag and drop my function. So here is my function check check bulk booking and I’m going to drag and drop it here. So it is asking me for a bulk value as defined in my function. I asked author to give me a bulk value, which would be a number. So let’s have a number and I should say then. So my bulk value is 10. That is whenever my bulk value is more than 10, my suggestion should be shown. And whenever it’s less than 10, it should be ignored. So let’s see, done. And let’s me check my form. So this is my form. I’m going to go to trip information and I’m going to write 30. Voila. So let me check the form on my site as well. So this is my Costa Rica. So when I go to sign up and I go to trip information and I write number of seed at 45. Here we go. So we get our friendly suggestion and it’s reduced to five. My friendly suggestion goes away. So now we are almost there. Just a few things that would be our address lookup. That is my look ahead to search for address. That’s not there here. Let me show you. So no lookup. How do we do that? So what I have done for this is I have written a widget. So this is my address lookup widget. I have extended a given text field widget. So this is all publicly available. How you can extend a widget. And this is my rendition code of this widget, which actually what actually does is it hits this API geo names and gets addressed list of address based on whatever I’m typing. And let me show you the client library. So again, my widgets resides in UI dot apps and the categories AF dot custom widgets. Now you don’t have to associate this category with your form because AF custom widgets is something forms framework provide and whatever client category, whatever client libraries are associated with AF custom widgets are already downloaded with forms. So it’s already taken care of. So since my code is already deployed on the cloud, now what I have to do is associate this widget with my city. So let’s go to address details and I’m going to go to city. Okay. And here there is a CSS class. What I need to do is write widget underscore address lookup widget. So widget underscore is our custom keyword which tells there is a widget applied to this particular field. So let me save this. Let me render my form. I will show you show you this in my actual site integrated form. Let’s have a look here. So I refresh my screen. I go to sign up. I go to my address details and here. Oh, voila, it’s working. So we have done almost everything to bring integrate a form into our site within a few clicks and with all my customizations which I needed to do. The other thing which you would have seen if you would have attended the previous session is if you choose any of the Friday, it is going to say the date is unavailable. So this was done by using our rest API from FDM. And this was even simpler than what I have shown you. So and if you would select any other day other than Friday, it is going to say date is available. So this this was the same form, which was shown earlier and we built upon this form and we integrated it with vegan site as well. So in a JV. So other kind of customizations which you can have are I mean, you can even have your tests here. So you can have your test which would run with your pipeline of your customizations. Okay, so and one more thing which is very important is all this is also available in your local cloud ready setup. So you can use your local cloud ready setup to accelerate your development. And it is for rapid development and prototyping. Another thing I want to show you about your local setup is so you can have your cloud ready jar downloaded as is. And this is the AEM forms feature archive, which you can put in CRX Quick Start install folder. And this is going to and whenever you start your cloud ready Quick Start, it is going to install this forms add on and you will have your local setup ready. So you can do all your prototyping there and then push it to your Git repository and that would deploy to your cloud. Okay. Right. So thanks for attending. And hopefully this session was informative and it helps you and it took you through a digital enrollment experience. How many how easy it is to create a digital enrollment experience in AEM forms in the cloud. So let me know if you have any questions for me or I can answer those. Yes, there are links available. I’m going to share the slides and yes, let me just show you the links as well. So this is all available and here are developing with forms in the cloud resources. Here is the link to AEM archetype repo, AEM project structure using client lives, form score component, how you can include your testing clients and AEM test samples. So you have all that that’s publicly available.