Events Add an event Speakers Talks Collections
 
RailsConf 2021
April 15, 2021, Online, USA
RailsConf 2021
Request Q&A
RailsConf 2021
From the conference
RailsConf 2021
Request Q&A
Video
All you need to know to build Dynamic Forms (JS FREE) - Santiago Bartesaghi
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Add to favorites
1.79 K
I like 0
I dislike 0
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
  • Description
  • Transcript
  • Discussion

About the talk

Working with forms is pretty common in web apps, but this time my team was requested to give support for dynamic forms created by admins in an admin panel and used in several places (real story). There are many ways to implement it, but our goal was to build it in a way that felt natural in Rails.

This talk is for you if you’d like to learn how we used the ActiveModel's API together with the Form Objects pattern to support our dynamic forms feature, and the cherry on top is the usage of Hotwire to accomplish some more advanced features. And all of this is done without a single line of JS :)

About speaker

Santiago Bartesaghi
Software Engineer at Rootstrap
Share

Hello there today. I'll be talking about building Dynamic phone in rice. I'm sending a surprise to hear from Uruguay country in South America. And I work at a company called true strength. Are you working with race applications for the past six years? And the last time I've been getting involved into open source. You can find me a sun TV sun TV 6. Underscore on Twitter. Okay, let's start. The dog is called all you need to know how to build Dynamic forms. A real world. Example of the word team had to be

at work and I'll drive you to a station by sharing. How would you get the most out of the race ecosystem? In order to implement this non-trivial feature? You might be wondering, what is another name for that can be configured in the database and without the need of a deployment to changes are reflected in the yard. In a few words, the future has given as means the ability to build this first thing. Imma clean a user interface and using them in different places of the earth. We won't be focusing on the admin interface to create the forms. Instead. We're going to talk about

how to render this a night forms translated missions medications and more. Don't worry, if it isn't completely clear. What is the feature about that? Because I'll give you the proper context before diving into the solution. After that. We'll see how to render a dynamic form. A devaluation. I save data to complete the next cycle to form, will see how deals are more complex. Requirement that I called repeatable fields. The key takeaways or what you can expect to have learned when the stock is over, are

the same as we used a design pattern code for muscle aches. And by the way, we started a very simple gem for from 06 gold, which can be used to make things even simpler. And then take away our how to use different tools in the race ecosystem, such as Ruby Singleton Jasmine and streams to enable Grace friendly solutions for more complex scenarios. No one give you some context in the requirements, so that we're all on the same page. The current project will provide a platform for universities so that they can have students take their courses online.

I think it's amazing to make education accessible to more people. I need to claim especially important during this pandemic. Give me the nature of where at universities would like to request customizing these forms to their needs and that's held. This creature was born. They wanted to hug furnace with multiple steps instead. They want to have multiple sections. I need section multiple fields at the same time to Merrick drop down and if you could find by Jason.

Community example of how these pictures look like in a rat, at the top of the steps, the currents that is named personal information and there is one section called about you. Where there are some fields of different types, which groups have somebody dacians depending on. How do you have been set up? This form, will reduce the scope so the focus on what matters the most to us. We used to form. Justin Kier, which was a single step. I know, Leah, text area and the Civic field. The purpose of this form is submitting a reference

for an applicant. So, in this example of the fields will be 120 the strengths and weaknesses and the other eye rating amongst her peers. I'll submit it saves a new reference record today that erase orange is running the race cattle. However, universities need to be customizable for samples of universities by 112, or fields or change, which fields are required. So, what do we need to do to make this form? Be dynamic? Well, first of all, we need to start in the database.

The configurations inform enter by the admins to represent the dynamic forms in a relational database call phone,. Which will represent the form as a whole is such a friendly. Identifier still Compass. The fuel pump model belongs to a foreign country has a name such as email, explain the form and the type of feel like the area and sell it in this example. It also has options in case that it appeals types, that allows it. Like I said, it filled a position of course because nobody wants their phones to render the pills in a random order in the scope of this, dog. Just

one type of validation that it's going to be required relation, which is a volume that can be turned on or off by the Admin. With this morning place, we can represent the form that we're going to use as example. And this is how the records, for example, look like in the database table, which title is references. And then the rest before you come fix table to records, and both of them are associated to the reference from Counting. Then we have their names, which are strengths and weaknesses and rating. Some long layovers

between c-110 deposition, the form and the bullion indicating that strengths and weaknesses is a required and it's waiting is an optional field. Know that we have the data structure. What do you need to do to bring Dynamic forms today in short? I'll say that it can be divided into the following steps. To begin with, we need to random Fields if I went for the correct type of field and in the correct order. Then we need to receive the form submission. Salmon point and you submit it on the back end. On

success. We save the date and resurrect somewhere. Or in case that there were any errors, we render them and we should also keep the antibodies. I still waiting for some people when thinking on the United staff will automatically sync on the need of a JavaScript framework. React. But in our case, we wanted to find a solution that failed raise friendly in particular because our power team is formed by two rays developers, and we enjoy working with race. Not so much with JavaScript to be honest. But what does a raise friendly solution

means for us is worse than we could use. Mostly the same tools as with a normal form that look, similar to the way scaffolding. So that the project could understand it and want me to learn a different way of working with Discord base. Ideally, I'd like to have a similar view as normal form that uses the phone with Builder and a similar controller. Doing a resource that say I'm either resurrecting, or when did India rose. As a general rule. It's a good idea to avoid having business logic in controllers. A so

will like to have all the business Logic for dynamic forms. The encapsulated molars play. No option. Okay, let's now see how to render a dynamic form. This cold, we can see how the normal form is rendered. I guess it looks familiar to you because it's mostly what we get when running a race car phone. Would render a label with Run Derby, still with under the arrows and at the bottom of the form Theresa submit button. So, how can we run to the dynamic form in a similar way? As you can see

the first class structure, the goal is pretty similar, but instead of rendering now, there's a loop 323 to the Fuel Coffee drinkers in the database and render each of them. On the four-wheeler Publix in with a pill side. So that renders the correct type of field. This means that in the pills are stored in the database needs to be ignorant Aguilar by rails. Could be dexfield exterior select rather because if it's not that will raise an exception. I know you look at the entrance of the phone with me. So we used to know if

form that replaces the references, references mother in. The normal form confirm is the mole of a word form Builder and will be used by Wells to prefill different values. For this reason. It is to define the dynamic attitudes. It also needs to respond to the Aerosmith because we're using it to render the arrows, below its field. Also noticed that we need to pass through it to this partial the URL were, we want to see the danger because of this partial is to be reusable a Christian receiving. The URL is,

can submit the form to different than points depending on where and for which purpose it is being rendered. So now we have to question. What is that option that I called form? Is it the phone contact bonus that we created before? No, it wasn't really make sense to you. Send that the record mother because we need the attributes to be Define. Dynamic Lee depending on the configuration of the form. But allows us to use the phone with Builder with a plain ol Rubio ship did the fortunately I see more and

make them play well together with other parts of place. So let me check them out. Probably already know about at the mall because we sit all the time to wear with our active record Motors, but did you know that I intended to be used without at the record? Hatchimal is a set of modules that can be added to the receiver by making your own ship compliant with the raise that leg regeneration out of the box. Let's take a look at what it says and how we can use it for our needs. At the mall or

the basic API required integrate with action pack and school at the mall caught on Cotton modal. If we could this Melina were playing on, Rodeo shirt will be getting inspection conversions translations, which we are going to make you to finish this specifically in our example. And then we'll see what we were needing a shins in sensation such as the ability to be used with the phone with winter. So this is great and certainly it is race friendly. So seems like a good idea to use it. Before going on.

I'd like to mess up Summer Moses provided by which can be of use in your day today. I just message what you, let you define methods for all of the other use of your object, call backs that provide facilities to other quarterbacks for certain operations. 32-track, body changes for temple, gives you the Ultimate Warrior's and strange methods. Arrows, which is used in the optimal validation smile, but also be used Standalone. It provides an interface to Euro 60, errors are handling the same as a

civilization that sells civilization is, for example, of use by the race Chaser laser, which has in turn you over at the record, and that's why we can call to Jason on the mothers and get their shakes and representation for free. As you can see, at the mall is very powerful and you can take, you can take advantage of it more. Specifically, you can use it to prevent bloating, your active record most by extracting pieces. Go to King two separate objects, which don't need to be connected to the database. Atavistic encourage you

to go and check them because they'll probably be of help in your day-to-day job. And this is how we can use at the mall. Notice that it's happening. We just called the generic form that includes a mobile device so that it can have your ass interface that you can be neutralized, and we can use it interview with the phone with Builder. Here we are. Setting the accessories for the dynamic AB calling super with the address so that I can actually set them to the setting exercise before calling. Super is really important. Otherwise, it will would raise an exception because the writers for

the dynamic. To be able to set the accessories for dinner. We got tickets. We need to read through them. And for each of them, we called singles in class. Atavistic sister with the field name. What was that? How do you record singles in class? What kind of dark magic is that? Well, it turns out that single glass is a very cool master that all ruby of Chicago. It's extremely powerful and despite. We don't usually make explicit use of it and it's commonly used in jams including race. When you cut is an object,

so you can change its Behavior. It's English class. This Mythic plus is hidden in The Inheritance chain, so it doesn't show up as an ancestor of the ocean, but we can think of it as the first and sister. When it comes to this part, sew ins in the Whitaker there with the president even over the actual class of the instance. So going back to setting bodies. We are adding yet with excessive force and then when calling Super Bowl with the care of certain values.

But what if we want to add validation at the distances of the class, will you find different at different elevations in them? So again, we can make use of Singleton class our Dynamic meditation. Notice how we are also using the same at the mall body. This mess with us before which works at the glass level. At this time. We are calling it on the singles in class of the instant with its Dynamic promotion. Will you find the correct medications? And we only had the required but it isn't will check if the deal is configured to be required and know that we Are depressants validation to the singles in

class. No, cuz we have the view and the ophthalmologist working together. We need to solve how to handle before submission, controller for the normal form of the example. It's pretty much the same as a scuffle chanasya converter. And this is how it looks like the same controller, but using the dynamic form, instead of the reference model directly mostly the same. Action instead of insulation, the reference, we in his arrest, a dynamic for object. I need the great action Winslow

the form as well that this time. We also passed the reference model to eat. So that when we go save on the I-90 form will be saving the new reference to the database. But we we can Cisco save on the dynamic form of shake. It doesn't know anything about persistence. So we need to remedy that were self when doing that in the race Community call for moisture. Name six eat all their object which purpose is to handle all the logic of a form in Europe. Includes performing actions, late sending

emails and more. Associate at the beginning of the talk. We struck to the gym to prevent the form of a person named Jazz, get another at the form. We need me this way because there have been many attempts to create an official gem for promotions. In the basket was more action for Eastern, the gym by the race car team because something they consider adding this pattern as far as the Supreme work. I would be using just another example because I wanted to be explicit on what it's needed to make Dynamic for works. But encourage you to go and take a look at it source

code, it's just six Innings of cold and can help you get started with my emotions. Notice how many great action we decide to pass the reference mall to reform of shake instead of building it in the dynamic form class. We don't want a dynamic form class to know about any specific business logic, so that it can be reused across yet. If you come more complex requirements, like sending an email when the reference is a m, or if you want to know in advance the fields that can be

submitted. There could be some are more suitable play composing promotions or during the daytime respectively, but let's leave that for another day. Before we need to implement the same method, similarly, to the active record. So the first thing you need to do is run devaluations, everything falls. Is it a? There's also an option to skip elevation such as her mother's and relations bass, or worse than we need to persist in your database with a submittal. There's a Citibank version of new method such a satirical Moe's have, which goes a man instead of returning, true or

false. It raises an exception. If the object is invalid. This is especially important when signals within a transaction. I'm sure you can see the form in action. It sounds of civilization in the fields with errors, keeping the value supposed. When there's an increase of success, creating a new reference in the database. Remember that dissolution not only works for these references form. I can use it wherever they want. I just need to render partial with work today. For will be submitted to

tweet the controller. That will be receiving that form submission. I tried to make the implementation as simple as possible for the talk. But remember, it can be extended to support more complex pictures. But there's more I want to have some peace be repeatable in this picture was also known as the final boss. What it mean? When it's a trapeze about feels, it's showing on as another button. I don't click generating a new repetition of the field in the form.

No, we're perfect. There were some additional requirements, like, having a minimum amount of repetition speed required, or to have multiple Fields would be together. But, again, What is the scope? So to focus on what matters the most was? Second example form that we added a new field called our comments which is considered to be repeatable and that's why it has a button next to it. Right from the beginning. When you. Are we in? This picture wasn't going to be three other guys that says that if you want to

use a flextone an all-new as a Spartan Race doesn't provide any built-in support for this. In this case. It's not worth it to. Alan are depends which probably lots of our featured Wiz and renew. So what are our options? We could build a fence up front, and shoulder store hiding with JavaScript or we could insert and remove them note without a script. Well, what did we say to go with filling the pills up front? So that the rendering still lived, only on in the back end because word that there was a limit on the amount of

repetitions. When they remove bottom was clicked, we needed to not only Sky the field but also clean up the field and then that there's still a need for shawa script. Even if it's mostly Shasta, height, and Joel music. At the same time, some teammates were investigating some long-term Alternatives because we started to see the new 12 more complex features in the front end that were straightforward, vanilla race. They didn't proof of concept with reactant. We tax, which Winfrey will

the same proof of concept to see how it Compares. One to each other. The results were impressive the with significantly this cold. I know. So in much less time. Furthermore. I guess it's not a surprise. If I say that without the hood where solution was more friendly. So that was enough to discard react and make hoodwire part of our stock, which by the way, will be part of the depot gray, stick entry 7. Doesn't mean that. Now we can remove our custom JavaScript solution for a video of feels, and

stead use hot wire. Let's see. What wire is composed by three Frameworks? They are turbo, steam, use Estrada? Google is a set of techniques to make our apps feel like single page. Application. Stimulus is a JavaScript framework. Estrada is Javascript Free Solution. Let's take a closer look at 2. Google is divided into the into four components to drive to a frames, turbo streams and terminated navigation to the frames Cubs decal, Courtney composing, complex spaces and terminated.

The streams that this system partial page update from our server to the grocer. We can respond to a sex request with, with HTML to be inserting a dumb and actually station. Append replace update. Yes, we can replace replace the custom JavaScript solution solution that uses through the streams. What we're going to do the following Wednesday as batteries, click-to-run will intercept the event and perform a nation's request to the server to server will render the new feel that when the response gets back to the browser after the last few.

Along the same lines which field will have the delete button next to it. So that when it's clicked to make a nation's request to the server that responds with an arrow through stream, but this time to remove motor indicate Into Turbo. The discus to remove to remove this particular element from the alarm. This is how we view looks now with the code to support. Repeatable, feels everything is exactly the same except that if the field is, repeatable will render a new partial where all the New Jersey eclipse. Did you partial

rapping older? Petitions of this feeling inside the proper? We need to render the field end times with existing values. And the rapper will also be used by toolbox to know where the seals that are added on the Fly. And then we had the Albertson. You can see it's a plane link to control your actions specific for the uniforms suspected in it, which is to feel confident that this would render the server. We know how to do it. There are a few good chess to first one is that the link is wrapped in a truck frame

so that it doesn't change the Ural of the browser. And the other one is that it has a date that you told her this isn't ideal, but it's needed. So that we can respond to a request. We have to restrain. Don't forget that turbo is still in beta phase. So, take this as a workaround for now until super provides a solution. Go into the details of their repeatable. Still partial to hear that it's similar to the non-repeatable version. The difference being that we are making use of an option,

multiple Subs that we're supposed HTML field. Then the value is going to be submitted as part of an array of values for this field. And then we have the remove button that is an underling to. But this time with a delete delete message because it uses the delete hdtp message to the forget, my so we don't need any other work around 3. So before so much cleaner, isn't it? Know that we have seen how to add and remove bathroom. I render. Let's see how they work in the back. And this is the control, their actions that received a request

when the Arbiter is clicked. It's only in the last year that they are going to be used in The View. I just gave you which file extension is the truest thing. Your p.o., It needs to render this view because of the format of the request. Here and we're under a trooper sting type with your pain. Diccion. That's a method that is used internally by Turbo and incited, we have the actual HTML for our field. We use feel for to get the race form Builder and we use it to render the field by reusing the same partial. We previously. So,

notice here that we received a secure random uuid to identify this repetition. That's because there isn't anything else that inside. I think it's nothing that we don't even have the count of how many repetitions have been rendered in the fountain. So this will then be used to know which repetition to remote. When did delete button gets clicked. And similarly, and W-4 Ramona to the only difference is that it don't respond to a stream with a remove action to specify an element

TV remote, which is reflected a solution that requires Custom Custom JavaScript, and now all the loss of lives in the back and things to hardwire. It's not that we don't need JavaScript in the more because true it still at Java spring work. So, behind the scenes and Quarton Road in the solution, but it's so cute from you and we can enjoy just having to Golden Ruby. I'm very happy. Why you got released. And now we have so much more power was still continue to develop code in the server-side and more specifically

in race. Here is the result. How do you repeat the whole field? Commons has a nut button below to eat and the cross next to each repetition, when they cross is clicked, a request appear in the network, which gets back with a turbo steam with a remove mold. And then the field is removed from the wrong thing happens with your button, only that is hard and it still gets So this was it, we've covered a lot of things and I hope you can find them useful for your day-to-day job and be able to take the most of the phrase

that we found out is an extremely powerful. Bring work in summary whistle Health in Clementon for his friend, a solution for a non-sugar picture that has no custom JavaScript developers can still work on the riverfront program in which the solution can be extended to support even more complex scenarios. Reusable and we dived into the active Mobility. I Orchard singles and Jasmine and code wire, and use them all together to make a real world use case. So, I hope you can now consider this to be new Tools in your toolbox. Thanks for attending

my talk. Hope you have enjoyed it and continue to enjoy the rest of the conference. Find Financial leave here, some sources that you might find helpful in filling the sample that with the full implementation.

Cackle comments for the website

Buy this talk

Access to the talk “All you need to know to build Dynamic Forms (JS FREE) - Santiago Bartesaghi”
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free

Ticket

Get access to all videos “RailsConf 2021”
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Ticket

Interested in topic “IT & Technology”?

You might be interested in videos from this event

November 9 - 17, 2020
Online
50
93
future of ux, behavioral science, design engineering, design systems, design thinking process, new product, partnership, product design, the global experience summit 2020, ux research

Similar talks

Jamie Gaskins
Masters of Arts in Christian Apologetics at Trident Technical College
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Damir Svrtan
Senior Software Engineer at Netflix
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Brandon Shar
Web Application Developer Extraordinaire at Bellawatt
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free

Buy this video

Video
Access to the talk “All you need to know to build Dynamic Forms (JS FREE) - Santiago Bartesaghi”
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free
Free

Conference Cast

With ConferenceCast.tv, you get access to our library of the world's best conference talks.

Conference Cast
949 conferences
37757 speakers
14408 hours of content