Drupal 8 Custom Page

broken image


  1. Drupal 8 Webform
  2. Drupal 8 Support
  3. Drupal 8 Custom Page Number
  4. Drupal 8 Custom Page Template

Drupal makes it easy to add the custom 403 and 404 pages. Note of caution Because this approach uses nodes (i.e. Individual pieces of content), the 403 and 404 pages will show in search results. I have problem with template for my custom page in my module. I use hooktheme to define my twig file. And when I check in hookthemeregistryalter I see my new template file but when I try us. The OP wants to create a custom template file for a page basing on the content type of the node being shown. The question is not 'Why isn't Drupal 8 using page.html.twig?' – kiamlaluno ♦ Dec 21 '14 at 11:11. The OP wants to use page-node-content-type.html.twig instead of page.html-twig Drupal 8 uses. – kiamlaluno ♦ Dec 27 '14 at 17:57 Regarding the Twig settings in services.yml, autoreload is already enabled when you enable debug, and I have yet to see any value in disabling the Twig cache.

Creating forms is part of the day to day live of a Drupal programmer. Forms are represented as nested arrays in both Drupal 7 and Drupal 8. But they are different in that in Drupal 7 you define your form arrays in functions and in Drupal 8 you create a form class.

In this post we'll create a custom form with two fields, a text field and a checkbox field, we'll validate those fields, display them in a message and finally redirect the user to the home page.

You can find the code of this module here.

Here is a screenshot of the form:

You can see the folder structure of this module below:

First we'll create the form step by step manually, then we'll use Drupal Console to do it in a easier way.

Drupal

1. Create the module's skeleton
2. Create the form's class and assign a name to the form
3. Build the form
4. Validate the form
5. Process the collected values
6. Add a route to your form
7. Do it easier with Drupal Console

In Drupal 8, each form is defined by a controller class that implements the interface DrupalCoreFormFormInterface which defines four basic methods:

getFormId() - Defines the unique ID for the form
buildForm() - Triggered when the user requests the form. Builds the basic $form array with all the fields of the form.
validateForm() - Triggered when the form is submitted. It's used to check the values collected by the form and optionally raise errors.
submitForm() - Used to carry out the form submission process, if the form has passed validation with no errors.

1. Create the module's skeleton

Custom

As always, we use the Drupal Console to create the module. Don't forget to install the module after it has been generated.

We use the following command:

Once created we can install it with drupal module:install ex81 command

2. Create the form's class

We create a new php file called HelloForm.php in the src/Form folder. In this file we create a new class called HelloForm that extends the abstract class FormBase (which implements the FormInterface interface).

In this class we create the getformId() method to set a unique string identifying the form.

3. Build the form

Now we add to this class a new method called buildForm() which defines the text and the checkbox fields of our form. We also add a field description to add a small message on top of the form.
At the end of the method we add a submit field and return the form array.

Drupal 8 custom pages

4. Validate the form

To validate the form we just need to implement the validateForm() method from DrupalCoreFormFormInterface in our HelloForm class.

In our example we'll raise an error if the length of the title is less than 10 and also if the checkbox is not checked. User-submitted values can be accessed via $form_state->getValue('key') where 'key' is the name of the element whose value we would like to retrieve.

We raise an error thanks to the setErrorByName() method of the $form_state object.

5. Process the collected values

Now it's time to process the values collected by our form. We do this with the submitForm() submission handler method.

Here we can save the data to the database, send them to an external API or use them in a service. In our case we'll just display those values and redirect the user to the home page. To redirect the user, we'll use the setRedirect() method of the $form_state object.

Remember that if you need to save those values in the config system, you should extend the ConfigFormBase as we saw earlier in another post.

6. Add a route to your form

Now that we have added a controller to your custom module, we are almost done. The last thing is to add a route in our routine file in order to allow users to access our form.

If we haven't created this file before, we create the ex81.routing.yml file in the root of the module. In this file we add the route that points to the form controller (HelloForm) we created above. In this case we won't be using the _controller key, but the _form key, so Drupal will use the form builder service when serving this request.

The above code adds a route that maps the path /ex81/helloform to our form controller Drupalex81FormHelloForm.

Now we can navigate to our form and test it!

Recap.
1. We created the module with the Drupal Console command: drupal generate:module
2. We created the form controller class HelloForm in the srcForm folder. This class extends the abstract class FormBase that implements the interface FormInterface.
3. We set a unique string ID for our form with the getFormId() method.
4. We defined the fields of the form with the buildForm() method.
5. To validate the form, we used the validateForm() method and use the setErrorByName() method of the $form_state object.
6. We processed the values of the form with the submitForm() method and redirect the user to the home page with the setRedirect() method of the $form_state object.
7. We created a route that points to our form using the specific key _form

7. Bonus: Create a custom form with Drupal Console

We'll create the same form as above but in another module called 'ex82'.

Drupal 8 Custom Page

1. Create the module's skeleton
2. Create the form's class and assign a name to the form
3. Build the form
4. Validate the form
5. Process the collected values
6. Add a route to your form
7. Do it easier with Drupal Console

In Drupal 8, each form is defined by a controller class that implements the interface DrupalCoreFormFormInterface which defines four basic methods:

getFormId() - Defines the unique ID for the form
buildForm() - Triggered when the user requests the form. Builds the basic $form array with all the fields of the form.
validateForm() - Triggered when the form is submitted. It's used to check the values collected by the form and optionally raise errors.
submitForm() - Used to carry out the form submission process, if the form has passed validation with no errors.

1. Create the module's skeleton

As always, we use the Drupal Console to create the module. Don't forget to install the module after it has been generated.

We use the following command:

Once created we can install it with drupal module:install ex81 command

2. Create the form's class

We create a new php file called HelloForm.php in the src/Form folder. In this file we create a new class called HelloForm that extends the abstract class FormBase (which implements the FormInterface interface).

In this class we create the getformId() method to set a unique string identifying the form.

3. Build the form

Now we add to this class a new method called buildForm() which defines the text and the checkbox fields of our form. We also add a field description to add a small message on top of the form.
At the end of the method we add a submit field and return the form array.

4. Validate the form

To validate the form we just need to implement the validateForm() method from DrupalCoreFormFormInterface in our HelloForm class.

In our example we'll raise an error if the length of the title is less than 10 and also if the checkbox is not checked. User-submitted values can be accessed via $form_state->getValue('key') where 'key' is the name of the element whose value we would like to retrieve.

We raise an error thanks to the setErrorByName() method of the $form_state object.

5. Process the collected values

Now it's time to process the values collected by our form. We do this with the submitForm() submission handler method.

Here we can save the data to the database, send them to an external API or use them in a service. In our case we'll just display those values and redirect the user to the home page. To redirect the user, we'll use the setRedirect() method of the $form_state object.

Remember that if you need to save those values in the config system, you should extend the ConfigFormBase as we saw earlier in another post.

6. Add a route to your form

Now that we have added a controller to your custom module, we are almost done. The last thing is to add a route in our routine file in order to allow users to access our form.

If we haven't created this file before, we create the ex81.routing.yml file in the root of the module. In this file we add the route that points to the form controller (HelloForm) we created above. In this case we won't be using the _controller key, but the _form key, so Drupal will use the form builder service when serving this request.

The above code adds a route that maps the path /ex81/helloform to our form controller Drupalex81FormHelloForm.

Now we can navigate to our form and test it!

Recap.
1. We created the module with the Drupal Console command: drupal generate:module
2. We created the form controller class HelloForm in the srcForm folder. This class extends the abstract class FormBase that implements the interface FormInterface.
3. We set a unique string ID for our form with the getFormId() method.
4. We defined the fields of the form with the buildForm() method.
5. To validate the form, we used the validateForm() method and use the setErrorByName() method of the $form_state object.
6. We processed the values of the form with the submitForm() method and redirect the user to the home page with the setRedirect() method of the $form_state object.
7. We created a route that points to our form using the specific key _form

7. Bonus: Create a custom form with Drupal Console

We'll create the same form as above but in another module called 'ex82'.

Drupal 8 Webform

Now we'll create the form with a simple Drupal Console command: drupal generate:form

This will generate two files, HelloForm.php and ex82.routing.yml, as you can see Drupal Console generate almost the entire form.

Let's take a look at the new generated HelloForm.php

First you can see that we voluntary inject the messenger service in the Drupal Console command, this allows us to avoid calling the Static Service Container wrapper Drupal::messenger(). We'll use it in the buildForm() method later.

Now, we'll need to add the code for the validation and the submit process with:
- validateForm() method
- submitForm() method

Drupal 8 Support

Goodfellas. Clion version control system. You can copy the same code of the validateForm() method described above in this post in the section 4.

For the buildForm() method we'll use the same code as above but with a small change since we injected the messenger service

As simple as that. YES! Drupal Console is definitively a great tool to create custom forms!!!

More info:

Drupal 8 Custom Page Number

Introduction to Form API (Drupal Doc)
Drupal 8 Form API reference
Drupal 8 Development Solutions : Creating a Form [VIDEO]

Related Content

Drupal 8 Custom Page Template

View the discussion thread.





broken image