DEV Community: Edoardo Cordani

Drupal 8/9 - Additional routes using custom module

Edoardo Cordani — Wed, 03 Nov 2021 16:39:46 +0000

Drupal is a really powerful CMS and it offers a lot of extendibility out of the box, mainly thanks to Symfony. One of the basic tasks we can archive is the creation of custom endpoints associated to a controller, in addition to the system ones generated by the definition and creation of content. The controller can then provide a response in different formats (HTML markup, JSON, Twig, etc.).
For the first step we need to create a new module and define a MY_MODULE.routing.yml file in which specify the url, the name of the controller and the access permissions.

Module creation

We use drupal console command in order to create a new module:

drupal generate:module

After answering the questions (use all the defaults, except the unit test class creation), these files will be generated in the folder modules/custom/MACHINE_NAME_MY_MODULE (composer.json is optional):

├── MACHINE_NAME_MY_MODULE.info.yml
├── MACHINE_NAME_MY_MODULE.module
├── composer.json
└── templates
    └── MACHINE_NAME_MY_MODULE.html.twig

It is also possible to run the command without wizard by passing directly the options. Refer to the guide generate:module | Drupal Console

Module installation

At this point we install the new module with the command:

drupal module:install MACHINE_NAME_MY_MODULE

Alternatively we can use the Drupal admin UI at /admin/modules.

Controller creation

To create the controller associated to the module, use the command:

drupal generate:controller

Answer the questions:

module name (enter the one previously created)
controller class name
controller method title
action method name
route path (related to the point 4)

Points from 3 to 5 are repeated until you leave a blank method title (so you can add several methods/routes in one shot).
At the end of the procedure these files will be generated:

├── MACHINE_NAME_MY_MODULE.routing.yml
└── src
    └── Controller
        └── CONTROLLER_NAME.php

Also in this case it is possible to run the command without a wizard.
Refer to the guide generate:controller | Drupal Console

Output data with Twig

If you visit the url set in the controller you will receive as response the default output generated by the generate:controller command.

Implement method: METHOD_NAME

To render the Twig template already present in the templates subdirectory of the module, you have to modify the method created in the controller like this (in this example the method name created in the previous step is content)

from this:

public function content() {
  return [
    '#type' => 'markup',
    '#markup' => $this->t('Implement method: content')
  ];
}

to this:

public function content() {
  return [
    '#theme' => 'MACHINE_NAME_MY_MODULE'
  ];
}

Passing variables to the template

If you want to pass variables from the controller to the Twig template, you must edit the MACHINE_NAME_MY_MODULE.module file to list the variables you want to use, for example like this:

function MACHINE_NAME_MY_MODULE_theme() {
  return [
    'MACHINE_NAME_MY_MODULE' => [
      'render element' => 'children',
      'variables' => [
        'var1' => '',
        'items' => []
      ]
    ],
  ];
}

Then in the controller content method we go to value the two variables var1 and items:

  public function content() {
    $var1 = 'Hello world!';
    $array1 = [1, 2, 3, 4];

    return [
      '#theme' => 'MACHINE_NAME_MY_MODULE',
      '#var1' => $var1,
      '#items' => $array1,
    ];
  }

Finally clean up the cache with the command:

drupal cc

Now we have access to the var1 and items variables directly in the Twig template, as in the following example:

<div>
  <p>{{ var1 }}</p>
  {% for item in items %}
    {{ item }}
  {% endfor %}
</div>

Change access role

Using the controller generation command, default access is allowed to all users via this rule in the MACHINE_NAME_MY_MODULE.routing.yml file:

requirements:
  _permission: 'access content'

For example, if we want to restrict access to authenticated users only, we have to edit the content of the file as follows:

requirements:
  _permission: 'access content'
  _role: 'authenticated'

It is possible to specify multiple values using "," as a separator if you want to use AND logic, otherwise use "+" for OR logic, as in the following example:

requirements:
  _permission: 'access content'
  _role: 'authenticated, editor'

Change caching option

Starting from Drupal 8.9, the output of the views of a custom module is automatically cached. If you want to disable this behavior, for example if your content is dynamic, add the no_cache option in the MY_MODULE.routing.yml file:

requirements:
  _permission: 'access content'
  _role: 'authenticated'
options:
  no_cache: TRUE

Dynamic styling in Vue.js

Edoardo Cordani — Mon, 11 Oct 2021 13:26:57 +0000

When I started using Vue.js as a front-end framework I immediately enjoyed the easy way I can set up and manage my components. Using single file components let me focus on all aspects regarding the way I build them: I simply need to put 3 tags inside a .vue file and I can start shaping both the visual aspect and all the logics behind the component itself. Talking about styling, the first thing that official doc tells you is how to style a component: simply insert a style tag (usually at the end of the file) and you're done. But when you move on and start to build complex interfaces, you immediately need to perform styling that goes beyond the simple composition of CSS classes.
So, during my journey, I discovered several ways to perform dynamic styling and this article aims to be a short reference for people that come up at first with this need.
In order to show you the different techniques, I'll use a super-simple button component that must use a specific background color value if a boolean prop is true (ok maybe is too simple, but so you'll grasp the concepts quickly).

Let's start with the component code:

<template>
  <button class="my-button">
    {{ text }}
  </button>  
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: ""
    },
    isWarning: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="scss">
.my-button {
  padding: 10px 20px;
  border-radius: 8px;
  border: 0;
}
</style>

and we call the component like so:

<my-button text="Attention!" :is-warning="true"/>

#1 Style binding

This is the simpler solution, just use Vue.js style binding and change the CSS background-color property:

<template>
  <button 
    class="my-button"
    :style="{'background-color': isWarning ? '#FC4': '#CCC'}"
  >
    {{ text }}
  </button>  
</template>

#2 Class binding

With class binding we append a specific class only if the prop isWarning is truthy:

<template>
  <button 
    :class="['my-button', {'warning': isWarning}]"
  >
    {{ text }}
  </button>  
</template>

and below in the style tag:

<style lang="scss">
.my-button {
  padding: 10px 20px;
  border-radius: 8px;
  border: 0;
  &.warning {
    background-color: #FC4;
  }
}
</style>

#3 Computed class

With this technique we simply define a classes computed value that returns a string of CSS class names based on the component property isWarning value:

  computed: {
    classes () {
      return this.isWarning ? 'my-button warning' : 'my-button';
    }
  }

then we use the class binding we used above, passing only the computed value:

<template>
  <button :class="classes">
    {{ text }}
  </button>
</template>

#4 Computed style with css variable

Ahh, this is the technique I like the most 😀 . It's a variant of the previous one but we use style binding and a css variable in order to change the background color.
Let's start using a css variable for background-color property:

<style lang="scss">
.my-button {
  padding: 10px 20px;
  border-radius: 8px;
  border: 0;
  background-color: var(--button-bg-color)
}
</style>

then we add a computed value that defines the final value of our --button-bg-color variable:

  computed: {
    cssVars () {
      return {
        '--button-bg-color': this.isWarning ? '#FC4' : '#CCC'
      }
    }
  }

and finally we add style binding to the button tag:

<template>
  <button 
    class="my-button"
    :style="cssVars"
  >
    {{ text }}
  </button>
</template>

#5 Styled-components

Styled-components is a famous CSS-in-JS library used especially by React developers...and you can use it with Vue.js too 😉. You can find the package here, please note that it's compatible only with Vue 2.x.

Install the package (using yarn as the package manager):

yarn add vue-styled-components

Due to the simplicity of the component, we define it inside the parent component inside the script tag. First we must import the library:

import styled from 'vue-styled-components';

then we define the component (a styled button) and its property isWarning:

const btnProps = {
  isWarning: Boolean
}
const MyButton = styled('button', btnProps)`
  padding: 10px 20px;
  border-radius: 8px;
  border: 0;
  background-color: ${props => props.isWarning ? '#FC4' : '#CCC'};
`;

Note the background-color: ${props => props.isWarning ? '#FC4' : '#CCC'};, here we are telling the library to change the CSS property based on then prop isWarning value.

Last step is to register the newly created component and use it inside the template:

....
  components: {
    MyButton
  }
...

<my-button :is-warning="true">
  Attention!
</my-button>

Besides of styled-components library, there are also other CSS-in-JS libraries usable for Vue.js, for example Emotion through vue-emotion package.

That's all, hope you find this article useful. If you know other techniques feel free to write me and I'll update the article!

Thanks for reading!