A common use of Ajax is to alter a form by adding, removing, or updating parts of the form in response to actions taken by the user. The resulting altered form is still eventually submitted with a traditional HTTP POST request. For example, one might update the options available in a city dropdown field after someone has chosen a value in the country dropdown, or add an additional textfield for collecting a person's name when the user clicks an "Add another person" button.
In this tutorial we'll:
- Understand why certain types of modifications to a form require the use of Ajax
- Use
#ajax
in conjunction with a<select>
field to demonstrate how to update a form with Ajax - Learn about responding to user interaction with
#ajax
By the end of this tutorial you should be able to use the #ajax
attribute on any form element to respond to user actions and update the form displayed to the user with new content and options.
Using Ajax allows you to create forms that are submitted to the server, and processed, without requiring a page reload.
In this tutorial we'll:
- Use
#ajax
with a'#type' => 'submit'
button in order to submit a form via Ajax - Look at how form build, validation, and processing are used when submitting a form via Ajax
- Use the form's internal storage to track data across multiple requests
- Discuss some best practices to keep in mind when using Ajax for form submissions
By the end of this tutorial you should know how to update an existing form so that it is submitted via Ajax and no longer requires a page refresh to work.
You'll often need to make minor, or major, alterations to an existing form provided by another module. The Form API allows you to alter any existing form through a series of hooks without having to change the existing module's code at all. This is probably one of the most powerful features of the Drupal Form API. Knowing how to implement and leverage hook_form_alter()
and its variations is an essential skill for any module developer.
In this tutorial we'll:
- Learn how to implement
hook_form_alter()
andhook_form_FORM_ID_alter()
in a module - Modify existing elements, or add new elements, to a form provided by another module
- Understand how to add new validation and submission handlers when altering an existing form
By the end of this tutorial you should know how to alter almost everything about the way any form in Drupal works without having to hack the module that provides the form.
Module developers can add new elements to a form by adding their definition to the $form
array in the buildForm()
method of their controller or via an implementation of hook_form_alter()
. Doing so requires knowing the element #type
, and details about any element-type-specific properties.
In this tutorial we'll:
- Determine the element type to use for the HTML input element we want to use
- Consult the documentation for the two form element types we're using
- Add a checkbox and a select list to our form via the
buildForm()
method of our form controller
By the end of this tutorial you'll know how to add new elements to an existing $form
array in order to collect additional data from users.
Forms are used for both collecting new data, and editing existing data. In order to allow users to modify existing data you need to pre-populate the elements on the form with the data you previously stored.
In this tutorial we'll look at the ways in which forms can be pre-populated with existing data, including:
- Providing default values for form elements which a user can edit with the
#default_value
property - The differences between the
#value
and#default_value
properties
By the end of this tutorial you should know how to populate forms using existing data.
Each form is defined by a controller, a class that implements the \Drupal\Core\Form\FormInterface
. Form controllers declare the unique ID of the form, the $form
array that describes the content of the form, how to validate the form, and what to do with the data collected.
In this tutorial we'll:
- Define a new form controller class
- Implement the required methods to describe a form
- Add a route that can be used to access our form
By the end of this tutorial you should be able to define a form that adheres to the FormInterface
requirements and know where to find more information about how to further customize your form controller.
Forms can be displayed as the main content of a route or by using the form_builder
service to retrieve and display a form directly. Which one you choose will depend on where on the page you want the form to appear.
In this tutorial we'll:
- Go over the two different ways a form can be retrieved and displayed
- Demonstrate how to display a form inside a custom block using the
form_builder
service
By the end of this tutorial you'll know how to retrieve a form and have it rendered anywhere on the page.
In this tutorial, you'll learn how to add a property to a configuration entity in Drupal. Previously, we created a configuration entity called Transcode Profile and learned about the files and code that compose a configuration entity. Now, we'll add a new property called codec to this configuration entity and learn some new concepts in the process.
In order to add this new property to our custom configuration entity, we'll need to update our schema file, configuration entity forms, the entity list builder class, and add getter and setter methods to our main TranscodeProfile
class.
In this tutorial, you'll learn about the two types of configuration data: simple configuration and configuration entities. By the end of this tutorial, you should have a better understanding of which type of configuration to use in your module.
In this tutorial we’re going to walk through the process of creating a custom configuration entity in Drupal in a custom module. We'll be using Drupal Console's generate:entity:config
command to create and update the files in our Transcode Profile example module. After Drupal Console has generated and updated the files for our configuration entity, we'll walk through each file and see how they define data structure, metadata, an administrative interface, and menu links for a configuration entity in Drupal.
By the end of this tutorial, you should be able to:
- Use Drupal Console to generate a configuration entity
- Identify files associated with a configuration entity and summarize the purpose and function of the code inside each file
- Find other examples of configuration entities in Drupal core
As a developer, within a module, you can define settings for the module and provide a configuration form for administrators to update the values of those settings. In this tutorial, we'll create a configuration settings form for a module and define default values for each setting. We'll use Drupal Console, a command-line utility for Drupal to do some code scaffolding and speed up the process.
By the end of this lesson, you should be able to get a basic settings form up and running inside a custom module complete with default settings and a menu link.
As we learned in Configuration Data Types, simple configuration is suitable for storing module settings as boolean values, integers, or text strings in one or more key/value pairs. In this tutorial, we'll walk through creating a schema and providing default configuration to store initial settings that a module needs to function.
Not every environment or copy of a site you may be working on will be created equally. You may want to enable logging on a development site or need to use different API keys depending on the environment. But you also need to make sure that your instance-specific configuration overrides don't make it into the database, mistakenly get exported, or compromise security.
In this tutorial, you will learn how to:
- Override the global
$config
array in settings.php (or settings.local.php) - Retrieve overridden (immutable) configuration (read-only mode)
- Retrieve original (mutable) configuration for updating (read/write mode)
- Set dynamic values for configuration instead of overriding values
When you create a module for Drupal, it can be useful to provide default configuration. This can be settings for a form, the placement of a block, or something more complex like the default image styles provided by the Image module in core. A module can provide default configuration for simple configuration or configuration entities.
In this tutorial, we will cover:
- Possible locations for default configuration
- What happens with configuration when a module is installed or uninstalled
- Managing dependencies in configuration
- Where to find examples of default configuration
Configuration entities are suitable for creating user-defined configuration, such as image styles, views, content types, etc. A configuration entity type is defined by a module, default configuration is provided by that module as well as any other module, and then users can create zero or more configuration entities through Drupal's administrative UI.
In this tutorial, you will learn about:
- What configuration entities are
- Configuration entity types versus configuration entities
- An example in core: image style
- Overview of the process of creating your own configuration entity types in a module
When working on configuration in a module, whether as part of a migration that uses Migrate Plus configuration entities, or while developing custom configuration entities, you'll often need to re-import the configuration stored in the .yml files of the modules config/install/ or config/optional/ directories. This is tricky though, because Drupal only reads in those default configuration settings when the module is first enabled. So any changes you make to those files after the module has been installed will not be reflected without these workarounds.
Knowing how to do this can improve the developer experience of adding (or debugging) the default configuration that's provided with a module. Or for anyone using Migrate Plus configuration entities as part of a migration.
In this tutorial we'll:
- Learn about the Configuration Development module
- Look at how you can use Drush to perform a partial configuration import
- Write an implementation of
hook_uninstall()
to remove a module's configuration when it's uninstalled
By the end of this tutorial you should be able to re-import the configuration provided by a module without having to uninstall and then reinstall the module.
Now that we have some default simple configuration stored in a settings YAML file, let's utilize it in a form that our site administrators can use to update those values. We'll make use of some services and methods in Drupal's Configuration API in order to retrieve, update, and save simple configuration values with a form.
In this tutorial, we'll cover how to load configuration entity data in a module. We'll change the AdminSettingsForm.php we created and replace the simple textfield we were using with a dropdown select list. Then we'll use data from our Transcode Profile module's configuration entity, loaded by the EntityTypeManager
via the services container, to choose our preferred Transcode Profile.
By the end of this tutorial, you should be able to:
- Know how to load configuration entities using
EntityTypeManager
via the services container - Update the AdminSettingsForm.php to use a dropdown select list
- Save your preferred transcode profile from a list of transcode profile entities
- Update the default configuration provided with the demo module to include transcode profiles
Drupal core provides a couple dozen different input #type
elements that can be added to forms. This includes one for every standard HTML5 input element, and some Drupal-specific ones that encapsulate more complex interactions like uploading files. But how can you know what elements exist? Where do you find information about what Render API properties each element uses?
In this tutorial we'll:
- Define what
FormElements
are and how they relate to the Render API - Find a list of all available input element types, additional documentation and usage examples
- See examples of the most common element types
By the end of this tutorial you should be able to discover the different types of elements you can add to a $form
array and find usage examples for each.
This tutorial will help you understand the complete life cycle of a Drupal form: receiving the request from a browser, displaying a page with a form, rendering the form as HTML, handling the submitted form, validating input, handling errors, and processing data. We'll point out the common places that module developers might want to inject additional functionality into the process. And we'll link to tutorials with more details about each integration point in a form's life cycle.
In this tutorial, we'll:
- List the steps of the life cycle of a Drupal form.
- Describe how Drupal determines which form to display, and which form handles an HTTP POST request.
- Understand the role of
FormStateInterface
in the life cycle of a form.
By the end of this tutorial, you should have a solid understanding of the life cycle of a form within Drupal.