Drupal Planet on Simon's Blog

[Drupal] Webform - Generate PDF and Attach in Email upon Submission

Wed, 29 Oct 2025 00:00:00 +0000

Intuition

A client of mine requested the feature in their existing webform (on a Drupal10 website) to be able to generate an PDF print-out of the user’s input upon their every submission, and attach the generated PDF to the with the e-mail trigger by the webform’s handler.

This will ensure they have a copy of the user’s input as the ground truth to be referenced in the future, and the signature in the webform can be shared via the email as a part of the PDF, because by default the webform only allows you to attach the link of signature’s PNG image, which means (if you want any user who receive the email to be able to download the signature without a Drupal authenticated account) you will have to expose via a public link.

(GovCMS) Drupal JSON:API (using Basic Auth or Simple OAuth)

Thu, 20 Mar 2025 00:00:00 +0000

Intuition

Drupal is a content-management-system, it gives the website admins (and content authors) the convinience to access and editing the content via the backend console, whilst provide the ability to render these contentt into visually appealing pages for visitors. However, what if one would to try to access the website content from a third-party software, and to manage the content via those softwares (let’s say for instance, a NextJS web application, or IOS/Android app).

Code on Multiple Device and Browser via Browser-Sync (sharing across network, and watch changes to reload)

Wed, 04 Dec 2024 00:00:00 +0000

Intuition

For the longest time, I’ve been waiting to have the local envrionemnt running version of the website to be accessed from my varying devices and browsers, not only because I can put the mobile, tablet, and desktop devices side-by-side and test their responsiveness, but also to test some of the browser/device specific feature and make sure they are enabled properly via browser preflexed properties such as -webkit-xxyyzz.

The ways I’ve been trying till this point all seems to fail, either because they are too trivial to setup (MAMP + NAMO), or too complicated for me the understand (Docker + DDEV + Tailscale), or network evironment dependent and potentially dangerous (Disabling the firewall via pf/ipfw, directly exposing the port).

Drupal Settings.php Snippets for Debug

Wed, 20 Nov 2024 00:00:00 +0000

Usage (TLDR;)

You can simply copy <CTRL-C> + <CTRL-V> the following into your public_html/site/default/settings.php, and toggle on/off those that are relevant to you based on your need:

$config['system.logging']['error_level'] = 'verbose';                        // [A] (For Drupal 8+) Turn on verbose debug message reporting
//$conf['error_level'] = 2;                                                  // [A] (For Drupal 7)  Turn on verbose debug message reporting (Equivalant to navigate to Administration→ Configuration→ Development → logging and errors and select "All messages".)
																			 // [A] -------------------------------------------
error_reporting(E_ALL);													     // [A] Enable PHP errors (For local Drupal development, you can also enable error reporting, display errors and display startup error to help you further debugging and fixing major runtime errors
ini_set('display_errors', TRUE);                                             // [A] Enable PHP errors (For local Drupal development, you can also enable error reporting, display errors and display startup error to help you further debugging and fixing major runtime errors
ini_set('display_startup_errors', TRUE);                                     // [A] Enable PHP errors (For local Drupal development, you can also enable error reporting, display errors and display startup error to help you further debugging and fixing major runtime errors

$settings['twig_debug'] = TRUE;                                              // [B] Twig Debug       - Turn on  twig debug mode
$settings['twig_auto_reload'] = TRUE;                                        // [B] Twig Debug       - Turn on  twig template auto reload
$settings['twig_cache'] = FALSE;                                             // [B] Twig Debug       - Turn off twig cache
																			 // [B] ------------------------------------------
$settings[‘cache’][‘bins’][‘render’] = ‘cache.backend.null’;                 // [B] Disable Caching  - Disable render caching.
$settings[‘cache’][‘bins’][‘page’] = ‘cache.backend.null’;                   // [B] Disable Caching  - Disable page cache.
$settings[‘cache’][‘bins’][‘dynamic_page_cache’] = ‘cache.backend.null’;     // [B] Disable Caching  - Disable dynamic page cache.
$settings[‘cache’][‘default’] = ‘cache.backend.null’;                        // [B] Disable Caching  - Disable backend cache.

$config['system.performance']['css']['preprocess'] = FALSE;                  // [C] Turn off agrregated css      (see: https://www.drupal.org/docs/develop/development-tools/disabling-and-debugging-caching)
$config['system.performance']['js']['preprocess'] = FALSE;                   // [C] Turn off agrregated js       (see: https://www.drupal.org/docs/develop/development-tools/disabling-and

$settings['update_free_access'] = FALSE;                                     // [D] Enable access to /update.php
$settings['rebuild_access'] = TRUE;                                          // [D] Enable access to /rebuild.php                    (This setting can be enabled to allow Drupal's php and database cached storage to be cleared via the rebuild.php page. Access to this page can also be gained by generating a query string from rebuild_token_calculator.sh and using these parameters in a request to rebuild.php.

$settings['skip_permissions_hardening'] = TRUE;                              // [E] Skip file system permissions hardening.          (The system module will periodically check the permissions of your site's site directory to ensure that it is not writable by the website user. For sites that are managed with a version control system, this can cause problems when files in that directory such as settings.php are updated, because the user pulling in the changes won't have permissions to modify files in the directory.
$settings['extension_discovery_scan_tests'] = TRUE;                          // [E] Allow test modules and themes to be installed.   (Drupal ignores test modules and themes by default for performance reasons. During development it can be useful to install test extensions for debugging purpose.
$settings['trusted_host_patterns'] = array();                                // [E] Turn off trusted host

(for instance verbose debug required then turn comment all lines except for $config['system.logging']['error_level'] = 'verbose';)

Single Directory Component with Drupal

Thu, 14 Nov 2024 00:00:00 +0000

Step Progress Breakdown

Level-1: Component using Paragraph Twig Tempalte

To begin with, let’s start by building a simple component using drupal paragraph module:

We create the paragraph type paragraph_cardtile with one field field_title only (see screenshot)
Turn on twig debug, create a demo content item, f12 inspection over it to get the overriding twig file name
Create that twig template, in this case paragraph--paragraph-cardtile.html.twig and write related html code to make it look like a “card tile” component, and you can have its associated js/css included in the global css/js library(won’t go into detail in this post)

When you complete all the steps above, the code you have in your theme folder should be something like the following:

React/Vue Framework Component in Drupal

Wed, 13 Nov 2024 00:00:00 +0000

Intuition

The notion has repeatedly occurred to me since I first entered the Drupal industry, where I have observed numerous online tutorials and blog posts asserting the necessity of frameworks such as Vue and React. These resources often emphasize that beginners, like I was at the time, should familiarize themselves with these technologies. Amidst the enthusiasm for these new frameworks, there exists a tendency to disparage traditional content management systems (CMS) such as WordPress, which are frequently characterized in bleak terms as an “old, dying whale.” This idea raises significant concerns about my future in the field.

GovCMS Docker Issue Fallback Solution

Thu, 17 Oct 2024 00:00:00 +0000

Issue Repeated

The other day I was encountering a GovCMS PaaS client with very odd code-base, deplpying on my local computer first require my GitHub ghp_xxxxxxxx authentication key (solved via adding docker-compose.override.yml file), then it raised an issue of "/usr/local/bin/drush": not found (solved via uncommenting lines in Dockerfile.cli file), then I found its scaffold to be outdated (solved via updating .version.yml scaffold version number) …

Even after all these patches, once I run ahoy up, the website still cannot run properly. All the associated docker container starts as I run pygmy up && ahoy build as expected, but soon as the build process finishes, the nginx-1 container magically kills/pauses itself with the following error:

GovCMS PaaS (Platform as a Service) Update

Wed, 16 Oct 2024 00:00:00 +0000

As mentioned in a earlier post “GovCMS SaaS vs PaaS”, in SaaS website, the client is responsible for all the patching including security updates (unlike SaaS environments which does it all automatically). This post will guide you through on how to perform these update yourself.

Introduction

To begin with, we’ll need to differntiate the compositional part of the GovCMS PaaS website that will need update:

govCMS/govCMS : the main repository for the Drupal-based GovCMS distribution, which provides a content management system tailored for Australian government websites. It includes core functionality and modules necessary for compliance and accessibility standards. (GitHub, Packagist)
govCMS/scaffold-tooling: comprises a collection of standard configurations, scripts, and packages designed to support the GovCMS scaffold. It includes tools for continuous integration and testing, enhancing development and deployment processes. (Github, Packagist)
custom/patch : some PaaS website also have custom module (contributed module) installed, or patches serve as temporary fixes or modifications to the website’s existing codebase. They are utilized to rectify bugs that may emerge during regular operation, ensuring the site maintains optimal performance and user experience.
govcms/scaffold: serves as a template for creating GovCMS projects. It helps streamline the setup process by providing a predefined structure and configuration for new projects, ensuring consistency and best practices. (Github)

Composer

Likewise explaied in this knowledge base post by GovCMS: link. You will need to update all the dependencies via altering the version number in the composer.json and patch.json files, and run composer update (resolve dependency issue that arises).

Reoslution for ["/usr/local/bin/drush": not found"]

Wed, 16 Oct 2024 00:00:00 +0000

Error Repeated

For some of the GovCMS client, I ran into this problem while trying to install the client website on my local computer: after running pygmy up to crank up the amazie container, composer install to install the package, I got the following error while running ahoy build (same for ahoy up):

> ahoy build
[+] Building 1.0s (29/37)                                                                                                     docker:desktop-linux
 => [php internal] load build definition from Dockerfile.php                                                                                  0.0s
 => => transferring dockerfile: 244B
 ...
 ...
 ...
 => CACHED [test stage-1  8/12] RUN composer --working-dir=audit-site update --ignore-platform-reqs --no-interaction --no-suggest             0.0s
 => CACHED [test stage-1  9/12] WORKDIR /app                                                                                                  0.0s
 => ERROR [test stage-1 10/12] COPY --from=cli /usr/local/bin/drush /usr/local/bin/                                                           0.0s
 => CANCELED [nginx stage-1 1/2] FROM docker.io/govcms/nginx-drupal:10.x-latest@sha256:aae5325c977a943969a02ea0b1a6340e3cac6f58fcbd032911e76  0.2s
 => => resolve docker.io/govcms/nginx-drupal:10.x-latest@sha256:aae5325c977a943969a02ea0b1a6340e3cac6f58fcbd032911e76f3bd80d3677              0.0s
 => => sha256:ee1752d59231d421688bce9acc6f031f70dababa0e22f963a9ab9f8de0acdbfb 8.42kB / 8.42kB                                                0.0s
 => => sha256:4e8b32b7ceed2273f0a46cfa7750ab6d83eb8c59186ec29a4103a9747a43e50d 32.19kB / 32.19kB                                              0.0s
 => => sha256:aae5325c977a943969a02ea0b1a6340e3cac6f58fcbd032911e76f3bd80d3677 1.61kB / 1.61kB                                                0.0s
 => CANCELED [php stage-1 1/2] FROM docker.io/govcms/php:10.x-latest@sha256:1a6fe5b2d8eea699f0726a5fee5e6d02ad4775ab752a1dc340f8fda62967eea6  0.1s
 => => resolve docker.io/govcms/php:10.x-latest@sha256:1a6fe5b2d8eea699f0726a5fee5e6d02ad4775ab752a1dc340f8fda62967eea6                       0.0s
 => => sha256:86d49b3929177bc771c7c46842bbe2dead6fc633aba216231353326b5c525884 24.94kB / 24.94kB                                              0.0s
 => => sha256:59fd0b12489ee3c2a16122c0a1b0ee06882ca6d355aefbd20bd904b49b377e06 6.55kB / 6.55kB                                                0.0s
 => => sha256:1a6fe5b2d8eea699f0726a5fee5e6d02ad4775ab752a1dc340f8fda62967eea6 1.61kB / 1.61kB                                                0.0s
------
 > [test stage-1 10/12] COPY --from=cli /usr/local/bin/drush /usr/local/bin/:
------
failed to solve: failed to compute cache key: failed to calculate checksum of ref 0402bcea-675b-4e70-bf0f-dfa57911b0c1::ph76omges2o2rc5qsj75n5txc: "/usr/local/bin/drush": not found

See screenshot of this at: this link.

Drupal Tailwind CSS / Tailwind UI

Mon, 14 Oct 2024 00:00:00 +0000

Introduction

This post will provide a quick guidance on:

how-to for installing the “Tailwind CSS” on to your custom drupal theme/sub-theme,
how to create a reusable component styled based on “Tailwind UI” using paragraph module

Resources referenced in this post includes:

Tailwind CSS - Official Installation Guide: https://tailwindcss.com/docs/installation
Tailwind UI - Official Installation Guide: https://tailwindui.com/documentation
Theme Drupal - Adding assets: https://www.drupal.org/…/asset
Web Developer Jones - Install Tailwind CSS in Drupal 10: https://www.youtube.com/watch?v=kzmjUmTBVnI

Step-1: Initialization of Sub-Theme

To begin with, you can refer to this post on how to create a sub-theme based on any contributed theme, for my instance I am creating my sub-theme of machine name tailwind-civic based on the CivicTheme, which has its special provided script to generate sub-theme (see screenshot):

Drupal Debug Twig

Thu, 12 Sep 2024 00:00:00 +0000

Intuition

I come across twig template development a lot due to the need of developing styled component around “Paragraph” module. During the process, in order to get the required values from the twig variables, I always found myself endlessly trying difference combination of key/filter by using dump() or var_dump().

For instance, to get the url of a media entity field, I’ll need to write the following twig expression: {{content['field_footer_image'].0["#media"]|file_uri|file_ur}} . And in order to get to this long long expression, I will need to use dump() on every single key/filter.

DVF (Data Visualization Framework) Quick Guidance

Thu, 16 May 2024 00:00:00 +0000

Introduction

Data Visualisation Framework (DVF) is a Drupal 8/9 module designed to turn data sets into visualisations. In summary, it reads data from a source, such as CSV, JSON or even a remote CKAN instance. It then provides the tools for content authors to turn that data into a visualisation that is easily digestible for the website users.

In this documentation, we will demonstrate how we can utilise the DVF to create different types of interactive charts, how we can use different types of charts, and how to configure the DVF field to enable customised colours, styles, and labels.