Tutorials

Overview

Often in Drupal, projects will come with the requirement to have a form and results on the same page. There are various ways this can be done with views, but sometimes requirements call for a custom solution when views does not fit the bill.

This tutorial will explain how to build an (optionally) Ajax-enabled form in Drupal OOP (version 8+) using the Form API, that loads the results of the form submission into a div on the same page.

Overview

Every Drupal site builder works with blocks. Blocks are an essential building component in Drupal. Block configuration allows for the site builder to determine various conditions in which the block should be shown. Some examples are to show the block only for a given content type, a given role, or a given path.

Overview

In Drupal 7, it's often beneficial to put various forms into Ajax popups, to create a nice user experience. In this tutorial, we will take Drupal's core-provided password reset form, customize it, and put it in a popup so that when users click the 'forgot password' link, this popup pops up, and allows them to reset their password on the same page. After a sucessful submission, the popup will be hidden and the user will be back on the same page they were on.

This tutorial will show how to do the following:

Overview

When working with Drupal, sometimes we will want to do things like extending the configuration of core or another module, extending a form provided by core or another module, and/or overriding forms on a route. At Jaypan, we recently came across a situation like this, where we needed to add a new field to the site for site description, to be used in structured data (aka RDF) for the site we were building. This needed to be a global field, so the most natural place to set the value for the field was on the basic site settings page, located at /admin/config/system/site-information.

In this tutorial, we will explain the method we used to achieve this functionality, going over the given steps, with an explanation of what is happening along the way.

Overview

Hosting audio files on a Drupal site can turn into a costly process, between the costs to host the files, as well as the bandwidth costs if the files are listened to regularly. In order to keep costs down, hosting the files on an external service, such as Dropbox, is a preferable alternative. However, as the files are not hosted on the same server as Drupal, it takes a little additional work to get this working, that at the time of writing cannot be done purely with modules.

Overview

In today's web, JavaScript is an essential component of any nice, easy to use website. However, while the basics of JavaScript can be easy to learn, it can be hard to know whether the scripts you are writing are heavy, causing page lag, and making for longer load times.

Drupal comes with an excellent JavaScript API, allowing for the creation of high-performance applications, but it can be confusing to know exactly how to effectively use the API.

​

Overview

Sometimes we need to create custom Drupal forms to create or update Drupal Entities, in a different manner than the default forms that we are provided with. In this tutorial, we will look at creating a form 'wizard', that allows a user to create or edit two nodes in a single form.

Overview

With HTML5 comes new <input/> types, which allow for different keyboards on mobile, improving the mobile user experience. However, Drupal by default does not allow for the changing of <input/> types to these new HTML5 types. This tutorial will show how to set up your system to allow for custom input types to be set on any text element.

This tutorial will cover two main steps:

Overview

Creating custom blocks in Drupal 7 seems like a pretty straightforward process in Drupal 7. You first implement hook_block_info() to tell Drupal about your block, then you implement hook_block_view() to set the contents of the block for the user. The API pages on these functions explain how to do this, and developers who spend a small bit of time working with these functions can probably get their block working.

When working with Drupal 7's Form API, I often need to call a JavaScript function after the #AJAX event has fired. This was quite difficult in Drupal 6, but Drupal 7 offers a nice mechanism to do so. In this tutorial, we will be going over a basic example on how to create a JavaScript function that is fired after an #AJAX function has completed. To do so, we will be looking at Drupal's Ajax Commands, and how we can use the system provided callbacks, as well as define our own custom callbacks, to enhance our Drupal forms.