28K Views

Form-Builder Tutorial (Part 1)

Hello fellow developers and blog-enthusiasts alike! Today I would like to present an overview, as to how one can go about building a Form-Builder feature in Symfony 4. This is part 1 of the Form-Builder series, this part will elaborate on the back-end aspect of the application. On the next installation, the front-end aspect shall be discussed. So stay tuned!

So what is a “Form-Builder” you say? As the name suggests, its a application (or a feature) that enables you to build customizable forms according to the needs of the user, (which when submitted, will be converted to a Ticket inside the UVDesk system).

For starters, we begin by defining our routes, which will be utilized in our twig file and our Symfony controllers. In my private.yaml file , I have the following routes defined:

 

 

I also have a route defined in my public.yaml file. This is so that when we share a link of the form, the user can generate a ticket without being logged-in, (think Google-forms). The public route is as follows:

 

 

To handle the back-end/ configuration aspect of this feature, I have decided to go with a simply JSON file, which comes in handy for easy CRUD (Create, Read, Update, Delete) functionalities. The data for the form-builder is saved in a JSON file. I use a binary-system to indicate what fields to render in the form; these fields are to be selected by the user, passed and processed by the Symfony controller, then saved inside the configuration file. The content of the file is presented below; according to your own specific requirements, yours will probably differ.



Our discussion about the back-end would not be complete if we did not discuss about the almighty Controller! I have two controller files, FormBuilderChannel.php and FormBuilderChannelXHR.php.
The code for FormBuidlerChannelXHR is as followed:

 

FormBuilderChannelXHR comes into play when the front-end Backbone.js code wants to load configurations to display the form-builder channels, and when the user decides to delete a form-builder channel, so a ajax request is sent to this controller, calling the associated method, passing the necessary form-builder id, which is then processed by the controller to remove the desired form-builder configuration.

The code for FormBuidlerChannel.php is as follows:

 

As the name suggests, the function loadFormBuilders() is used to load/render the channels within our configuration files to the front-end.
The function createFormBuilderConfiguration is used to
process and save the configuration information of a form-builder channel into the configuration file.
The function updateFormConfiguration comes into play when a user clicks the ‘edit’ option on a form-builder channel. After selecting the necessary fields to be placed within the form, the user clicks ‘Update FormBuilder’. This function processes the data, selects the form-builder channel with the specific id, updates and saves the configuration in the json file.
The function previewForm() is used to render the form, with the desired fields, and when submitted, will generate a UVDesk ticket.

This has been a brief introduction on the back-end aspect of creating a form-builder in Symfony 4. Stay tuned for the front-end side on the next installation.
Cheers!

 

I’ve explored this while contributing to a Symfony based project UVdesk. There are many more things to learn and implement; you can also contribute to our enterprise-level open source project helpdesk.

 

 

 

 

Category(s) Symfony UVdesk
. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

css.php