 All right, so today I'm gonna talk to you about partially decoupling web forms and Why that might make a user experience those probably better So hi, I'm Bruin. I am a bit of a CSS nut But I need a bit of a day job, so I do Drupal as well Um, yeah, nothing more to say if you have a question Yeah, this is fun. I can't promise you that you'll learn something, but I promise you'll probably smile at least once or twice So now we're at a really important part you can't really see it up there, but I can see it on my screen. Do we want? gifts stuff Okay, cool. We'll turn party mode on cool. So first thing is like what is user experience? In a nutshell, it's basically how a user experiences your application or website This should be good As we all know it probably isn't Well, maybe not most cases, but in some We can talk about accessibility in this area and stuff like that, but in reality How does a general person come to your site and can they actually get to the information that they want? Um, so this is one of the very cool party mode slides This is not great user experience, but it looks fun and cool and we also love the Simpsons so Why do we need to worry about? user experience and web forms with Drupal Today, I'm going to be focusing on multi-page forms because Regular forms are kind of fine so What's the issue with Drupal web forms a Regular form not much they do the thing you can fill out the fields and have a good time But on multi-page forms, they're clunky There's page loads and you can enable Ajax, but there's still communication with the server. There's still a wait and Kind of bad like if you have a shoddy network connection or something you might drop out web form might die So it's not real any issue with Drupal web forms in terms of building them, but on the front end they are sketchy So if anyone's ever seen these cool little doddy things You've built a web form or a multi-page reform before and you've enabled it and you've gone. Why did I do this? so this is sort of Unstyled So I mean you can style these things, but you look you lose a lot of like user interactions and stuff Or you spend a lot of time building them and then they're kind of clunky So we should take the good and replace the bad things so web form module is really good at making structured data and and it's good for admin to build these things out, but on The front end there's a lot left to be desired and it kind of looks like those things were made in the year 2000 and never Never made good again. I've never looked at so If we did couple these things we can have a better user experience I Would say we could have better performance. I mean you could argue that one You're way more flexible like you're no longer tied to Drupal You could have a JavaScript developer there called JavaScript skills It can be easier to maintain you don't like I said, you don't need a Drupal developer anymore. You don't need this person Made these crazy like pre-processed things in the theme or Typical thing when you pull down so on us Janky and it can be scalable we can write Sort of like one set of components for multiple sites with JavaScript and just plug them in on the front so So we have to think about like do we want to decouple our form in a fully decoupled way or a aggressively to coupled way Fully decoupled things come with their own problems You lose sort of like previewing and all that kind of stuff There's solutions to them, but like It's not out of the box But progressively decoupled stuff gives you the ability to be able to still use Drupal to render your Like page and your application, but then just like cut out a little area for my JavaScript component And this diagram will explain such things um So you can see our traditional Sort of Drupal Dang, they're all bundled together and their friends, and they love each other a lot De-coupled almost like a divorced family in some ways The CMS doesn't like the front-end it off. It's most likely the front doesn't like the CMS anymore and They email each other a little bit This didn't happen in my house at all Then there's partially decoupled stuff and That's where Drupal still renders the page. You still have like all the nice stuff that Drupal has casing and And like user context and stuff like that, but We're using an endpoint to render those components So how do we implement such cool things So our user will still build their web form like normal This is the main benefit, I guess you your users can still add pages and different types Elements like anyone's ever looked at web form. There's like a zillion elements. They do wild things But you can do checkboxes, which is important So how do we get that information to the front-end? Now we have a few options here and I've left some of them off the little dot points because like you could do GraphQL or something but like the main ones are JSON API or REST API REST comes out of the box. So you need to do You probably need another module to expose the Like the submission side of stuff with any of these options. So knock off CMS ready in some ways, but As we'll see later, there's maybe a case to use web form for different things other than making forms But yeah, the other option is Drupal settings, which is the option that I go with because one, it's out of the box to Drupal Already Gives you like that settings blob out of the box. So you can just access it with the window objects Plus it feels native It feels nicer So cool, we've got our Drupal settings and this is how those things So we just pre-process this in the theme layer Or you can make a module my suggestion is make a module, but if you're working on govcmas, chuck it in the theme Which is what we did So you can just attach a new object to Drupal settings and Then we get to make things pretty and that's fun because Pretty is good so now we're free from Drupal and we're in JavaScript lands and things are Arguably somewhat better. They come with their own problems So we get to pick a framework Please save yourself some time. Let's go to view. That's the best one IMO Maybe svelte haven't been there So how do we pass that data from? the window object into In this case of UJS window dot Drupal setting. Yay Very cool. And now we're in beast mode like Willie So we're gonna take a bit of a look under the hood and We're gonna Not be in full-screen mode for a second And I'm gonna change tabs All right, this is where it gets a bit crazy. All right, forget this. Actually, I need to change page Z indexes So how does So with with web form like you can see I have just a regular Drupal South web form I'll build it. There's all all things might make screen that So As we'll see in a second. I'll turn off all the front-end stuff and we'll go back in janky Drupal mode But this is just like a third-party setting through a module Can't do it in GovCMAS. That's all right. It's getting there Now if I go to view I know our presentation, it's gross um but You'll see that like all my things are still rendered out like Drupal can still render this form so If there was a situation for some reason something broke Clients mad just switch it back to this one and say you could have this and then I go, please no But we can see that a few of these things that can't like so we rewrite conditions basically in JavaScript because the stuff that comes out of web form is Terrible It uses like HTML selectors to check to see if things are checked and stuff. It's kind of You kind of just want it to be like this nice Is it true or false? I don't know But you'll see that there's like some of these pages where we don't get Let's not go past that page but conditions work If I turn that back on So the user doesn't lose any functionality really they just I Guess they get a better experience on the front end I guess the only limitation would be each of the types of fields We would have to like rewrite or react component for such things Now you can see in this case We're using web form to make a slideshow. It's kind of Silly but It proves a further point that we could use web form for other things in Drupal other than making a web form like this is quite good for structured data or in another project we used it to like build quizzes for the user to be able to Step through things and because they didn't want to have to store that information on On in in the gov CMS instance Like this was really good because the users could still build web forms and they could still have that step-by-step process and They were still able like a user can build this right you don't need a dev anymore well Please still keep us in but in for the main for main point you don't The content author can still build these out the way that they typically know how we can provide documentation around If you want a crazy thing add this attribute to this or we've made a custom web form field element Like if I was to have more time and not change my mind at the last minute about how I'm going to do this presentation You can see like I just have like these advanced HTML fields They like got the images in them I So I would like rewrite an actual image field that allowed a user to upload an image into it and Do custom handling for that? Here So, yeah, I think being able to decouple These web forms allows us to have one a better user experience to it opens up the door to better possibilities around How our users interact with web forms like it's not It's not no longer a web form. It's now a structured piece of data Yeah, I've kind of lost track of where I'm but I'm gonna put this up. It's funny It's maybe better if we have some some questions I'm gonna go to the last slide That has you can find me in places at gumnut Yeah, does anyone have any questions or queries it is so Yeah, we're basically pre-processing web form like the web form on the page It's getting that third-party studying whether we want to use it or not So you can still use this interchangeably with regular web forms like I Wouldn't recommend using this for a single web form that just has like name date of birth right seems overkill, but You can still use them interchangeably because each form has its own setting But yeah, it gets wedged into Drupal settings Web form data You'll see that we have like a giant object of things and then like web forms just using the window object and grabbing all this information and then We are doing fancy things in Java Yeah, you could do You could easily yeah, I haven't done that for this so I'm not gonna do that Does it all look sketchy? Probably break, but yeah, you can easily write a Something to detect if Java scripts disabled or not and then just always serve the old web form I mean Vue.js can detect whether it's using Java script or not. So Hey, let's get that to serve the old web form Yeah, so there's a web form rest module used with caution Yeah, yeah, it's a good module Security-minded people may Take issue with it, but like I'm edgy But We've used it in production and if you only enable like the submission stuff and you write handlers around what gets submitted It's not not a problem Yeah, just once J like rest back and it works so We just pre-processed The web form and in here we just like grab each field inside the web form and Then Yeah, we're pushing this information that runs some other functions that we've written that Scroll down So each field just gets the key and a bunch of other values that are attached to that form You can see this is like where I do the Please be a media field Oh But basically each Each field will have this data structure attached to it Probably can't read it, but like it has conditions The content like if it's a question or not like these kinds of Things so that you can still loop over Groups checkboxes or radio buttons and all that kind of stuff a Good thing might be opening my view tools Also great great plug-in If I go to this one, you'll see if statements everywhere So this is a general Stuff that you're getting from Drupal it's been pre-processed and packaged up in a nicer format than what Drupal spits it out If I go make this a little small Far up If I find a page that is conditional Get there. Oh wait, I turn them haven't turned party mode on That Sky Yeah Open this transition up and up that and go to here. You'll see that Conditions an empty array, which is correct. It'll be the page. Sorry Conditions as an object It will handle Yeah, so web form comes with basically just HTML select us Yeah But we've just tried to make it a bit more Palletable And we've just yeah conditions you passing rules It works out if it's like and or XOR or however all of the conditions work basically But yeah, just checking to see if those values are right and then Vue.js is handling the state when you check on buttons And all that kind of stuff and then at the end when you Buckage all that up it smits all the things away