Improvements to the Theme Editor for adaptive forms in AEM 6.3
My name is Alistair Lee and in this video I’m going to take a look at some of the new features in the theme editor in Adobe Experience Manager 6.3 forms. The theme editor enables a non-technical user to create a style that can be applied to multiple forms. This not only makes creating forms easier and faster, but enables more consistency across all of the different forms in an organization. The theme editor can be found in the forms menu. So from the main navigation, I’m going to select Forms and then Themes. We can create a new theme by clicking on Create and Theme. I’m going to call this my external survey theme.
Then click Create and open that up.
The theme editor interface is split into two different sections. On the right hand side, I’ve got my sample form that I can use to select different objects and view all of the different changes we’re making. On the left hand side, I’ve got all of my selectors. I’ve also got some options available here under the configure menu including the ability to change the preview form that’s being used. I can go ahead and browse for a different form inside of AEM. A new option in AEM 6.3 is the ability to select my Typekit Configuration. So with AEM 6.3, we can bring in web fonts and other fonts into our adaptive forms. Let’s take a look at how to do that. I’m going to cancel out of this for now.
We’ll go back to our main navigation, select Adobe Experience Manager tools and then Deployment so that we can select Cloud Services. If we scroll down the Cloud Services page, you can see that we’ve got the ability to configure a Typekit cloud service. I’m going to go ahead and click the Configure Now button, call this our Typekit Config and then click Create.
The only field we need is something called a Kit ID. We can get that from typekit.com. I’ve already logged in to typekit and I’ve got a number of different kits available. Including one I’ve called AEM Forms, if I click on that, you can see I’ve added two different web fonts to my AEM Forms kit. I’m going to click on the Embed Code link and at the bottom I can see my Typekit Kit ID. So I’m going to go ahead and copy that. We can now close this and go back to AEM. I’m going to paste that in this field and select OK. With that now saved, I’m going to go back to my theme editor, and refresh.
We’ll click on the Options, choose Configure and now I’ve got the ability to select my typekit configuration. I’ll click on save, and we’ll test this out by selecting one of our fields. for example, our field label I’m going to choose that option, look at our text options and then choose a different font family. In addition to some of the defaults we’ve got here, We’ve also got our new web fonts including Allumi Std and Mr Eaves Modern. Let’s go ahead and select our font family for our labels to Allumi Std. You can see that all of the different labels have changed. So we’re applying this style to all of our different field labels. In addition to web fonts, we can also add additional system fonts to AEM. I’m going to go back to Adobe Experience Manager.
We’re going to take a look at the web console. I’m going to click on operations and then Web Console.
In the web console we’ve got an entry for Adaptive Form Theme Configuration Service. If I click on that, I can see a list of all of the different fonts that will be available to me in my theme editor. If I’d like to add additional fonts, I’m going to go ahead and click the plus button, we can type something in like Verdana.
I’ll click Save.
Let’s go back to our theme editor, I’ll once again refresh this.
We’ll select our textbox widget this time. Look at our text properties and under font family, in addition to our web fonts, we’ve now got Verdana as an option. I’m going to select Allumi Std for this though, I think it looks better, and we’ll reapply that same change by clicking save to our field labels. Once again under font family, choosing Allumi Std and hitting OK. So we’ve added the ability to incorporate more fonts including web fonts into adaptive forms. One of the other changes you’ll notice as you are using the theme editor, is the ability for the theme editor to remember styles and colors that you’ve been using. This makes designing forms faster and easier. Let me show you what I mean. I’m going to start by modifying the text box widget again. This time instead of modifying the default state though, I’m going to modify the focus state, so when a field is selected. I’m going to choose a background color and in this case, I’m going to go ahead and add a gradient a linear gradient is perfect. I’m going to choose a nice bright blue here.
Let’s make this 10% opacity or so. One of the new options you’ll see here is this plus button. I can save this color to my saved colors section of the theme editor. This makes it really easy for me to select this color in the future as I’m editing a different component on the form. So we’ve selected our blue, let’s go ahead and finish off this gradient by selecting our second color. Let’s go ahead and create a white here. Once again, I’m going to add that to my saved colors so that it’s always available. In addition to our saved colors, AEM theme editor is also giving us recently used colors once again making it faster and easier to quickly find the different colors and styles we were using. You’ll see that as you’re editing your themes across your adaptive forms. If you’d like to see some of those, you can click on the options menu and click Manage Styles. Let’s go ahead and first save our changes.
You can see here, we’ve got the last two colors that we saved to our color palette and this will save the last 10 different recently used colors that we’re using as well as text styles and image styles. All of those will be there making it easier for you to adjust the theme.
If we want to test our theme, we can always click Preview that will open up. I can see my new web fonts, I can see my new active background state. Let’s go ahead and apply this theme to one of our forms and there’s an improvement we’ve made there inside of AEM 6.3 as well. We would typically apply our form theme by selecting the form container itself and selecting configure to apply that theme, but new in AEM 6.3, is the ability to apply the theme at runtime. So let’s go and take a look at the runtime version of this form on publish.
We can append a theme override, and choose our external survey theme to apply to this form. You can see that at runtime, I can now apply my theme. I’ve got my new web font, as well as my focus state changes that we made in the theme editor. Those are some of the new changes in AEM 6.3 forms for the theme editor. Thanks for your time.
This feature is available only with AEM 6.3 onwards.