Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough
Jun 01 2020
Jun 01

Drupal 8's Layout Builder allows content editors and site builders to easily and quickly create visual layouts for displaying content. Users can customize how content is arranged on a single page, or across types of content, or even create custom landing pages with an easy to use drag-and-drop interface. Our recently contributed module - The Layout Builder Asset Injector module is definitely not a replacement for theming, but it provides site administrators with a quick and easy approach. The Layout Builder Asset Injector module allows site builders to add CSS and JS to the layout builder blocks. 

| Benefits 

  • It allows you to inject CSS and JS within the layout builder blocks without the need to add it in the codebase.

  • Append unique CSS and scripts specific to layout builder blocks

  • It provides content editors with basic knowledge of CSS and JS to style their individual layout builder blocks and add short JS scripts to modify the behaviour.

  • Instead of adding CSS and JS on a page level, this module allows you to inject them on an individual block.

| CSS Injector

CSS Injector allows administrators to inject CSS into the page output based on configurable rules. It's useful for adding simple CSS tweaks without modifying a site's official theme.

| JS  Injector

JS Injector allows administrators to inject JS into the page output based on configurable rules. It's useful for adding simple JS tweaks without modifying a site's official theme.

Note: Block class will be appended automatically to each CSS.

For example when we add a CSS as given below:

h1.node__title {

  background-color:red;

}

It will automatically append the class of the block for which CSS is added once saved.

.block-field-blocknodepagebody h2.node__title{

   background-color:red;

}

 

Layout Builder Asset Injector Drupal module

| How does it work? 

  • Enable the Layout Builder Asset module

  • After you enable the module, enable the layout option from the manage display section as shown below:

Layout Builder Asset Injector Drupal module

Layout Builder Asset Injector Drupal module

Layout Builder Asset Injector Drupal module

To understand Layout Builder in detail refer  https://www.drupal.org/docs/8/core/modules/layout-builder

  • You can add your styling and scripts under the CSS and JS fields respectively

  • To make the styling and scripts specific to a block, add classes under the Classes text field. This class should be unique so as to reflect scripts and styling specific to a block.

  • On adding the CSS and JS and saving the configuration, it will automatically prefix the CSS with a custom class added.

Note: You don't need to add it manually.

Layout Builder Asset Injector Drupal module

Layout Builder Asset Injector Drupal module

 https://www.youtube.com/watch?v=3Ogya_66GDU&feature=youtu.be

| Implementing the Layout Builder asset injector module 

Click here for the steps to install the Layout Builder asset injector module - https://www.drupal.org/docs/8/extending-drupal-8/installing-drupal-8-modules

| Developer support

Kishor Kolekar: https://www.drupal.org/u/kishor_kolekar

Harshal Pradhan: https://www.drupal.org/u/hash6

Abhishek Mazumdar: https://www.drupal.org/u/abhisekmazumdar

Hardik Patel: https://www.drupal.org/u/hardik_patel_12

Naresh Bavaskar: https://www.drupal.org/u/naresh_bavaskar

| Module download link 

https://www.drupal.org/project/layout_builder_asset

| Alternative module links 

https://www.drupal.org/project/asset_injector

https://www.drupal.org/project/layout_builder_styles

Jun 01 2020
Jun 01

While trying to build a form, I found that it would be useful to have a one-click/touch option to clear text field values instead of selecting all the text and removing it. Even though this appears like a small issue, solving this would make users life easy! This was the driving force behind creating the Clear Field Values module for Drupal 8. The Clear Field Values module provides a way to clear data in the text field values with a single click/touch.

| Clear Field Values module

This module adds a button to clear text field values in one click/touch and provides two options at present, one is a simple cross button and the other is using font awesome icons.

| Benefits 

  • Helps clear the entire input field without having to delete the whole text manually 

  • Clears a pre-suggested input present in the input field, that the user does not require.

| Implementing the Clear Field Values module

Follow these steps to configure the Clear Field: 

  1. Go to /admin/config/clear-field/settings steps

  2. Enable Clear Field by selecting the checkbox 

  3. Next, select the type of Button:

    1. Simple X 

    2. Fontawesome for all generic fields

  4. You can then add the text and tooltip which you need to add along with icon or keep it empty if not required.

  5. Add classes for the text field elements where you need the cross button to be visible.

Step 1 : Move to  Settings page /admin/config/clear-field/settings 

Step 2: Enable Clear Field Checkbox

Select Type of Button

  1. Text along with X for all

Selecting the above option would add X(cross) with text beside the text field

  1. Font Awesome for all fields generic

Enable FontAwesome module https://www.drupal.org/project/fontawesome and you can add the cross button

Default values for the text of the icon and tooltip are Clear Field & Clear field value which can be overridden.

Default values for the Classes are form-text form-email separated by a space.

For a custom-form add custom classes defined under element’s attributes under Classes field.

| Developer support

This module is supported by 

  1. Harshal Pradhan https://www.drupal.org/u/hash6

  2. Kiran Kadam https://www.drupal.org/u/kirankadam911

| Module download links

https://www.drupal.org/project/clear_field

https://www.drupal.org/project/clear_field/releases/8.x-1.x-dev

Do send in your feedback around this module! We would love to hear from you. 
 

Reference: https://www.geeksforgeeks.org/html-clearing-the-input-field/

May 20 2020
May 20

Low-code platforms have been slowly gaining popularity in the Marketing stack of organisations. Low-code essentially means being able to assemble UI of your Digital experience visually and often without the need for a dedicated Development team. Webflow for Websites and Shopify for e-commerce are among the list of rising low-code platforms. These platforms help organisations become more agile and help enable various functions like Design, Marketing to come on board as Makers on the Digital experience. Today we will talk about Cohesion now renamed as Site Studio, a low code offering for Drupal websites by Acquia, we will discuss benefits and some of the paradigms that make it an effective low code option in Drupal stack.

Drupal has witnessed a healthy growth over these years as a pillar for Enterprise Digital stack, Acquia's Site Studio brings the DIY spirit to this stack. What more and more Marketers are looking for is quicker and cheaper ways to assemble landing pages and work out of a component library of Digital elements that are performant and consistent to the Design systems of the organisation. A low code approach to Drupal will only work if its aware of its capabilities & flexibility, that is what Cohesion brings on the table. Ability to apply Design systems on your Digital Experience built on Drupal, DIY!

Benefits of Acquia's Site Studio

  1. Low code 
  2. Highly configurable
  3. Easy maintainable
  4. Easily modifiable 
  5. Highly scalable
  6. Component-based driven
  7. Less developer dependent

Acquia Site Studio

Acquia's Site Studio provides a contributed module and theme which needs to be installed in Drupal, quite similar to the way we install other modules and themes. However, to use this service, it is required to purchase a cohesion package that provides us with an API Key, Agency Key, Site ID, and an API Server URL which needs to be inserted in the Account Settings form.

Cohesion DX8

Here are the settings and key features of Acquia's Site Studio:

  1. Website Settings
  2. Style Settings
  3. Components
  4. Templates

Site Studio provides an in-site configuration form which takes care of your branding requirements. You can add your own branding elements like fonts, colours, icons, grid settings, SCSS variables, etc. directly onto the site. And there is absolutely no need to make any changes in the theme folder as well as the theme settings. Doesn’t this sound cool! Your basic frontend settings would be handy to you and you can modify it directly from the site without asking for help from a developer.

Website Settings

Cohesion DX8

Style Settings

It’s not over yet, with Acquia Site Studio you can create/modify styles of a site. Acquia Site Studio provides settings to update the base style or to create custom styles. 

Cohesion DX8

And this is how the default preview and configuration pane looks like.

Now let’s understand what comes under Base styling and Custom styling

Base styling - Styling which is going to be consistent throughout the site, e.g., font-size of body. Font formatting of Headings, Style of a button, style of link, etc.

Custom styling - Styling which will be different for each instance or as a variation of base style. E.g., Big button, Small button, Read More Link, Consistent layout related styles (Padding Top & Bottom Large, Padding Top & Bottom Small), Social icons theming, etc.

Let’s look at the example of CTA link styling.

  • CTA style structure
    • Link styling
    • After pseudo-element styling
    • On hover pseudo-element styling
  • Style properties required for CTA link and those properties are added in the config form through properties button on the top right corner of the styling pane
  • Styling properties required for pseudo-element styling
  • Styling properties required for pseudo-element after hover

COHESION DX8

COHESION DX8

cohesion DX8

Component Builder

Now let’s introduce the coolest feature of the Acquia's Site Studio -  a Component Builder. Acquia Site Studio follows a complete component-based development approach. So, what is the component-based development approach? 

Acquia Site Studio provides a list of elements. By using these elements even simple and complex components can be created and be made configurable by creating a component form. The amazing part is that everything can be built by mere drag and drop. Doesn’t it sound super user friendly?

Let’s look at an example of a Hero Component and figure out which elements could be part of this component?  Let’s create a list of elements(atoms).

  • Hero Image
  • Hero Title
  • Hero Description
  • CTA button

Let’s consider the below-displayed hero component that we are trying to achieve.

Cohesion dx8

Based on the Hero component design, the hero component structure would look similar as described in the below image.

Cohesion DX8

A component will be created which will have the above-mentioned elements. But what about styling? This is the real beauty of Acquia Site Studio. It allows us to create a base style as well as a custom style and those can be appended to the component. Doesn’t it sound fascinating?

Here would like to take you back to the styling part of the section where we have styled CTA link. Now, here in the above component CTA link element can directly assign the style which has been created under custom style. And as per image, styling can be appended to CTA Link element.

COHESION DX8

Layout

There are multiple ways to create different layouts. Here, with Acquia Site Studio, the layout can be defined by a Layout Category component and also component dropzone element can be provided to add other components. 

Does it mean? Woah! Yes, it means nesting use of the component is also possible. I won’t provide the screenshot for this example right now.

Template

There are four main templates:

  • Master Template
  • Content Template
  • Views Template
  • Menu Template

The template names clearly state the use of each template, but, I am sure you must have some questions related to master templates. 

What will it hold? The thumb rule is, this template should be least modifiable, means, it should not be updated frequently. We can ensure this by using only consistent section/components/regions added to it.

Acquia Site Studio Demo 

Explore how Site Studio enables you to apply design systems on your Digital Experience built on Drupal!

I hope this blog was helpful to understand the basic outline of Acquia Site Studio. Stay tuned! We have an upcoming blog that will talk about the advanced usage of templates. 

P.S - If you want to learn more about Site Studio, Acquia has a training and a full support guide - https://cohesiondocs.acquia.com/6.1 and get access to the free sandbox here - https://www.acquia.com/products-services/acquia-cohesion#create-sandbox.

Interested to read more about Site Studio? Here are some articles for you:

Apr 18 2020
Apr 18

What divides us pales in comparison to what unites us.

     - Ted Kennedy

This especially rings true in the time we're living in now.

Because of a much needed country-wide lockdown here in India to prevent the spread of COVID-19 disease, everyone has been locked-out in their homes and have socially distanced themselves form their communities. This, of course, includes the Drupal India community as well. And what better way to bring this community together than an online pan-India contribution weekend organized by Drupal India Association.

First-ever fully-remote pan-India contribution event

Today, on 18th April 2020, Drupal India Association (DIA) conducted it's first online 'Contribution Weekend'. It's the first event of its kind in that it was completely remote and saw participation from Drupalers across India.

We had 116 RSVPs, 22 Mentors, 96 Issues on Contribkanban board.

Thank you, organizers!

Before I talk more about the event, I would like to give a huge shout-out to everyone who was involved in the planning of this amazing event and a special shout-out to Rakhi Mandhania, Surabhi Gokte & Sharmila Kumaran (#WomenInDrupal FTW) for managing this so well. The planning team worked super hard to make this a success. They took time out of their personal and professional lives to have various meetings for issue triaging, communication and marketing for the event, arranging for speakers and much more. Thank you, everyone, who contributed to planning this.

The introductory hour for new/first-time contributors

DIA Contribution Weekend April 2020

We started the event at 8:45 in the morning,(Yes, That's 8:45 in the morning!) with a special session for new and first-time contributors. A big shout-out to all the newcomers and especially the mentors who took time out this early in the morning to volunteer for mentoring them. And boy did we have a lot of mentors! We had a mentor-to-mentee ratio of 5:1! Don't you feel special now mentees!

Main event

The main event started at 10:00 AM with more than 40 people joining in. And more people kept pouring in as the event went by. At a time we had around 70 people in the call!

Drupal India Association

Rakhi, our host, got us started and handed over the call to Mukesh Agarwal. Mukesh is CEO of Innoraft, one of the member organizations of DIA, and introduced us to DIA, its goals and purposes and the role it is going to play in representing the Indian Drupal community to the world. Major goals of DIA can be summarised as:

  1. Becoming an exemplary community leadership organization to the rest of the Drupal world
  2. Developing thought leaders in Drupal who will enhance India’s image in the Drupal world
  3. Becoming a major influencer and enabler in the adoption of Drupal in the Gulf & ASEAN region
  4. Making India an innovation hub for Drupal
  5. Making Impactful Contribution to community & the extended stakeholders of Drupal

Drupal Association needs our help!

Mukesh's introduction was followed by Tanisha Kalia, a representative from the Drupal Association, and she talked about DA and the financial effects of COVID-19 on DA and the larger Drupal community. DA is a very important entity for the whole Drupal community. Among the numerous things they do for the community, a few are:

  • Managing, hosting and conducting DrupalCons
  • Managing the infrastructure of drupal.org

Tanisha mentioned that the majority of DA's funding comes from the revenues of DrupalCon events and the almost inevitable possibility of cancellation/postponement of DrupalCon NA has put DA in a big financial hole. DA needs the community's support. 
Tanisha encouraged community members to either donate to DA directly via #DrupalCares initiative or support DA by purchasing/subscribing to be a member of DA, the cost of which starts from just 15 USD.

As of this moment, DA has reached 25% of its USD 500,000 goal:

DrupalCares Goal DIA Contribution Weekend 2020

As an individual member or an organization, you can help DA sustain the COVID-19 Impact and help reach its goal. Read more here: https://bit.ly/2VyKbmM

Tanisha also talked about the initiative taken by prominent members in the community to encourage donations and financial contributions. Some of these are:

  • From now until April 30, Vanessa and Dries are offering a dollar-for-dollar match for new, individual contributions to the Drupal Association - up to a total match of $100K! More details: https://bit.ly/2KefaPJ
  • Gábor Hojtsy, Acquia, will be donating 9EUR for every module ported to Drupal 9 for a total of up to 900EUR. More details: https://bit.ly/2wS5uaE
  • Jeff Geerling, @geerlingguy, will be donating 2$ for every like on his recent Youtube video for a total of up to 1000USD. Video link: https://youtu.be/fdk7zUwDQdM

A big thanks to all of you! 

Thanks to an amazing community, we had 6 new individual memberships registered before the introduction call finished.

Code-of-Conduct and Tips for the day

Next up Rakhi communicated the Code-of-Conduct to all the contributors and shared the various channels for communication that people could use throughout the day.
We were using channels on DIA slack. There were various channels set up for clear and effective communication:

  1. #new-contributors: For first-timers and newcomers.
  2. #regular-contributors: For experienced contributors.
  3. #issue-reviews-contribution day: For issues ready for review.

This setup was really efficient and was instrumental in keeping people engaged and active throughout the day.

Hussain kicking off the day 

Rakhi then handed over to Hussain Abbas from Axelerant who joined us as guest speaker for the sprint. He started by talking about the power of open source and how open source has in past sustained and in fact grown in face of financial crises. Truly, Open Source is here to stay!
Hussain then proceeded with talking about the path for Drupal core and contributes projects to Drupal 9 and how we can make sure that projects we frequently use and maintain can be made ready for Drupal 9. The Drupal community has created various tools to help us with these:

  1. drupal-check: A PHP CLI tool to get a report of any deprecated code used. This can be integrated into build processes and continuous integration systems.
  2. drupal-rector: A tool for automated deprecation fixes for some common cases.
  3. Upgrade status module: A wrapper module around drupal-check internals that generates a full site report of contributed and custom modules used in the site. This report can be used to assess the overall Drupal 9 compatibility of the modules.
  4. Upgrade rector: A user interface on top of drupal-rector, which also integrated with Upgrade Status.

Read more about these tools in the official Drupal documentation: https://bit.ly/3apZhAA

After Hussain finished his session and just before we were about to wrap up the call, we realized that Rachel Lawson, Community Liason - Drupal Association, has joined us in the call. The presence of the Community Liason from DA also inspired & motivated us to give our best to this contribution weekend.

Let's code!

After all the sessions, it was time for the code contribution now. From the start, one could tell that it was going to be a productive day. Just under an hour we made significant progress and moved a lot of issues to RTBC or Fixed.

Start of the day:

Start of the day

An hour into contribution:

An hour into contribution

Come for the code, Stay for the community!

Highlights of the day were the appreciation that the mentors received from the newcomers and first-time contributors for their help and support. We had a first-time contributor who had been contributing back to the WordPress community in the past as well as trying their hands-on Drupal contribution for the first time. They really loved the experience and appreciated the welcome and support they received from the community. In their own words: "You all (Drupal community) are awesome and doing great work!"

Words of appreciation from a wordpress community member.

With our spirits high we continued the rest of the day with the contribution. And to have the feeling of togetherness in this endeavour, we had the zoom bridge open throughout the day so that people could freely reach out to each other. We even had regular check-ins every couple of hours so that everyone feels connected.

We ended the even at 3:30 pm with a call where everyone shared their experience and appreciation for the community. It turned out to be a very fruitful day of contribution. By the end of it, we were able to move around 50 issues from needs work/active to RTBC/Fixed.Thanks to all amazing mentors for their support to make this happen: 

@azeets@JayKandari@piyuesh23

@yogeshmpawar@AshishVDalvi@joshua1234511

@ankushgautam76@meenakshig489@sonvir249

@abhisekmajumdar@forhemant@dipakmdhrm

@malavya88@nitesh624@durgesh29@subson

@iampratik_dk@vaibhavjain_in@heykarthikwithu

In the end, this would never have been possible without all you contributors who supported the event with writing patches, reviewing/testing them,  showing up to the event motivating all organizers. We hope for your continued participation over the coming Sprints.

My experience

Overall, it was a very productive day! I really enjoyed this new experience of contributing from the comfort of my home and it was also a much-welcomed distraction from the grim time we all have been having because of the current pandemic. I appreciate the opportunity to work with everyone from the community and would love to do it again soon.

Oh yes! That reminds me of something! Guess what? We already have another contribution weekend planned for next month! It's planned for May 16th and I would love to see and work with the community again. Read more about the event here: https://groups.drupal.org/node/535887.

See you all again on 16th next month.

Until then, stay safe!

Apr 10 2020
Apr 10

Drupal 9 is scheduled to be released on June 03, 2020. This is when the final Drupal 8 minor release 8.9 will also be released. Considering the history of previous Drupal major upgrades, Drupal 9 will relatively be smooth. Thanks to the semantic versioning introduced in Drupal 8. The upgrade to Drupal 9 will just be another minor upgrade with deprecated code removed. Drupal 8 has brought a lot of standardization in the Drupal world, thus allowing Drupal as a project to grow incrementally. 

To put it in simple terms, Drupal 9 contains the same code as of 8.9 + deprecated code removed. Here’s a reference image from the Drupal 9 documentation.

Drupal 9

That is if you reduce Drupal 9 from the last Drupal 8 version (8.8.x) the rest is just the deprecated code and dependency upgrades. 

However, upgrading all the underlying dependencies and removing all deprecated API is a challenging task. Contributors around the world are working hard to get this done especially when the world is facing an epidemic. This is a challenging time for the entire world, yet Drupal contributors have shown their love towards Drupal and are helping it advance to the next release.

This article highlights some of the system requirements, the new dependencies and some of the most commonly used APIs which are going to be removed in 9.0.0.

Let us expedite Drupal’s journey to its 9th version!

| Third-party dependency updates

  • Upgraded Symfony from 3 to 4.4

  • Upgraded Twig from 1 to 2

  • Upgraded CKEditor from 4 and 5

  • Upgraded PHPUnit from 6 to 7

  • Upgraded Guzzle from 6.3 to 6.5.2

  • Popper.js updated to version 2.0.6

| System requirement updates

  • Apache, at least version 2.4.7
  • PHP - at least 7.3. (PHP 7.4 also supported)
  • Database: MySQL (5.7.8), MariaDB (10.2.7), SQLite (3.26), PostgreSQL (10)

| Modules being removed in D9

  • Block_place

  • Entityreference

  • Field_layout -> Replaced by Layout Builder.

  • SimpleTest module has been moved to contrib

  • Action renamed to action UI

| New features in Drupal 9

Drupal 9 will have the same new features as of Drupal 8.9. Thus, Drupal 9.0 will not include new features. But Drupal 9.1 will continue to receive new features as it did for the minor D8 releases.

| Breaking APIs

Following is a list of major APIs which were deprecated in Drupal 8 and will be removed in Drupal 9.0.0. That means if your code contains any of these codes, they need to be replaced before upgrading to Drupal 9. This list is not exhaustive and has been curated by scanning Drupal core codebase for deprecated warnings and sorted according to the usage of these APIs in contributed projects as given Drupal 9 Deprecation Status by Acquia.

  • drupal_set_message() removed

change record

drupal_set_message(), drupal_get_message() functions removed.

Recommendation: 

Use messenger service 

Example: 

\Drupal::service('messenger')->addMessage('Hello world');
  • Drupal::entityManager() removed

change record

EntityManager has been split into 11 classes.

Recommendation: 

Services like entity_type.manager, entity_type.repository, entity_display.repository etc to be used instead. See change records for more info.

Example: 

\Drupal::entityTypeManager()->getStorage('node')->load(1);
  • db_*() functions removed

change record

All of the db_* procedural functions part of the Database API layer have been deprecated.

Recommendation: 

Obtain the database connection object and execute operations on it. See change records for more info.

Example: 

$injected_database->query($query, $args, $options);

$injected_database->select($table, $alias, $options);
  • drupal_render() removed

change record

drupal_render() and drupal_render_root()  functions

Recommendation: 

Use renderer service

Example: 

\Drupal::service('renderer')->render($elements,$is_recursive_call);
  • Methods for generating URLs and links deprecated

change record

Drupal::l(), Drupal::url(), Drupal::linkinfo() etc and many methods for generating URL & links are removed

Recommendation: 

See example. 

Example: 

EntityInterface::toLink();

EntityInterface::toUrl();
  • File functions removed

change record

file_unmanaged_copy()
file_unmanaged_prepare()
file_unmanaged_move()
file_unmanaged_delete()
file_unmanaged_delete_recursive()
file_unmanaged_save_data()
file_prepare_directory()
file_destination()
file_create_filename()

Recommendation: 

Use file_system service 

Example: 

\Drupal::service('file_system')->copy($source, $destination, $replace);

\Drupal::service('file_system')->move($source, $destination, $replace);

\Drupal::service('file_system')->delete($path);

  • Loading of entities removed

change record

node_load(), entity_load(), file_load() etc removed.

Recommendation: 

Use entity_type.manager service to get specific entity storage and then use the respective load functions

Example: 

use \Drupal\node\Entity\Node;

$node = Node::load(1);

or

$file = \Drupal::entityTypeManager()->getStorage('file')->load(1);
  • Functions to view entities are deprecated

change record

entity_view(), entity_view_multiple(), comment_view() etc removed.

Recommendation: 

Use entity view builder handler

Example: 

$builder = \Drupal::entityTypeManager()->getViewBuilder('node'); 

$build = $builder->view($node, 'teaser');
  • Date formats API changes

Some of the functions and hooks removed (change record)

format_date()

hook_date_formats()

hook_date_formats_alter()

system_get_date_format()

system_get_date_format() etc.

Recommendation: 

Use date.formatter service 

Example: 

\Drupal::service('date.formatter')->format()
  • Unicode::* methods removed

Following functions removed (change record)

Unicode::strlen()

Unicode::strtoupper()

Unicode::strtolower()

Unicode::substr()

Unicode::strpos()

Recommendation: 

Use mb_* functions
 
Example: 

mb_strlen();
  • Functions retrieving extensions info removed

change record

_system_rebuild_module_data(), system_get_info() etc are removed

Recommendation: 

Use extension.list.module, extension.list.profile and extension.list.theme services

Example: 

\Drupal::service('extension.list.module')->getAllInstalledInfo();

\Drupal::service('extension.list.theme')->getAllInstalledInfo();

  • drupal_get_user_timezone() removed

change record

drupal_get_user_timezone() function removed.

Recommendation: 

Replaced with an event listener which updates the default timezone

Example: 

date_default_timezone_get();
  • SafeMarkup methods are removed

change record

SafeMarkup::checkPlain() SafeMarkup::format() etc removed.

Recommendation: 

See change record for replacements 

Example: 

Html::escape();

| More Changes/Updates

  • Drupal core themes no longer extend Classy. Read more

  • Drupal core themes, Bartik, Claro, Seven, and Umami no longer depend on Stable.

  • New Stable theme for D9, recommended new themes to be built on new D9 stable theme. Old D8 stable to be removed from core and be moved to a contributed project before D10.

  • A new administration theme, Claro (targeted for inclusion in Drupal 9.1)

  • Drupal 9 won't be able to run updates from 8.7.x or earlier databases anymore, it is necessary for all new updates added to the code base to be tested from a Drupal 8.8.x starting point. Read more

  • Changes to how HTML Elements are inserted via AJAX commands. Read more

  • ZendFramework/* packages have been updated to their Laminas equivalents. Read more

  • PhantonJS based testing removed. Read more

  • The jQuery UI asset libraries not in use by Drupal core have been marked deprecated and have been removed from core in Drupal 9.

  • Drupal 9 will continue to depend on CKEditor 4 and jQuery 3.4.

  • Modules to be compatible with Drupal 8 and 9 at the same time and to support semantic versioning for contributed projects

  • jquery.cookie has been replaced with js-cookie version 2. 

| Conclusion

At this point, 9.0.0-beta2 is released, which means the code for 9.0.0 is stable and is ready for testing by end-users. Now is a good time to test upgrade your existing D8 sites to the latest version of 9.  If you have contributed a project in drupal.org, it is also a good time to check your extensions for D9 readiness. There are several tools which can speed up this process of making your extensions compatible with D9.

Have questions about how Drupal 9 will impact your site? We are here to help. Check out our Drupal Services or send us an email at [email protected]

| Important References

If you see any discrepancies in the information provided above, please let us know.

Thanks!

Dec 06 2017
Dec 06

The Rise of Assistants

In last couple of years we have seen the rise of assistants, AI is enabling our lives more and more and with help of devices like Google Home and Amazon Echo, its now entering our living rooms and changing how we interact with technology. Though Assistants have been around for couple of years through android google home app, the UX is changing rapidly with home devices where now we are experiencing Conversational UI i.e. being able to talk to devices, no more typing/searching, you can now converse with your device and book a cab or play your favourite music. Though the verdict on home devices like Echo and Google home is pending, the underlying technology i.e. AI based assistants are here to stay.

In this post, we will explore Google Assistant Developer framework and how we can integrate it with Drupal.

Google Assistant Overview


Google Assistant works with help of Apps that define actions which in turn invokes operations to be performed on our product and services. These apps are registered with Actions on Google, which basically is a platform comprising of Apps and hence connecting different products and services via Apps. Unlike traditional mobile or desktop apps, users interact with Assistant apps through a conversation, natural-sounding back and forth exchanges (voice or text) and not traditional Click and Touch paradigms. 

The first step in the flow is understanding use requests through actions, so lets learn more about it. 

How Action on Google works with the Assistant?

It is very important to understand how actually actions on Google work with the assistant to have an overview of the workflow. From the development perspective, it's crucial we understand the whole of the Google Assistant and Google Action model in total, so that extending the same becomes easier.

 

Actions on Google

 

It all starts with User requesting an action, followed by Google Assistant invoking best corresponding APP using Actions on Google. Now, it's the duty of Actions on Google to contact APP by sending a request. The app must be prepared to handle the request, perform the corresponding action and send a valid response to the Actions on Google which is then passed to Google Assistant. Google Assistant renders the response in its UI and displays it to the user and conversation begins.

Lets build our own action, following tools are required:

  • Ngrok - Local web server supporting HTTPS. 
  • Editor - Sublime/PHPStorm
  • Google Pixel 2 - Just kidding! Although you can order 1 for me :p
  • Bit of patience and 100% attention

STEP1: BUILD YOUR ACTION APP

Very first step now is building our Actions on Google APP. Google provides 3 ways to accomplish this:

  1. With Templates
  2. With Dialogflow
  3. With Actions SDK

Main purpose of this app would be matching user request with an action. For now, we would be going with Dialogflow (for beginner convenience). To develop with Dialogflow, we first need to create an Actions on Google developer project and a Dialogflow agent. Having a project allows us to access the developer console to manage and distribute our app.

  1. Go to the Actions on Google Developer Console.
  2. Click on Add Project, enter YourAppName for the project name, and click Create Project.
  3. In the Overview screen, click BUILD on the Dialogflow card and then CREATE ACTIONS ON Dialogflow to start building actions.
  4. The Dialogflow console appears with information automatically populated in an agent. Click Save to save the agent.

Post saving an agent, we start improving/developing our agent. We can consider this step as training of our newly created Agent via some training data set. These structured training data sets referred here are intents. An individual Intent comprises of query patterns that a user may ask to perform an action, events and actions associated with this particular intent which together define a purpose user want to fulfill. So, every task user wants Assistant to perform is actually mapped with an intent. Events and Actions can be considered as a definitive representation of the actual associated event and task that needs to be performed which will be used by our products and services to understand what the end user is asking for.

So, here we define all the intents that define our app. Let's start with creating an intent to do cache rebuild.

  1. Create a new intent with name CACHE-REBUILD.
  2. We need to add query patterns we can think of, that user might say to invoke this intent. (Query Patterns may content parameters too, we will cover this later.)
  3. Add event cache-rebuild.
  4. Save the intent.
Intent Google Actions

For now, this is enough to just understand the flow, we will focus on entities and other aspects later. To verify if the intent you have created gets invoked if user says “do cache rebuild”, use “Try it now” present in the right side of the Dialogflow window.

STEP2: BUILD FULFILLMENT

After we are done with defining action in dialogflow, we now need to prepare our product (Drupal App) to fulfill the user request. So, basically after understanding user request and matching that with an intent and action Actions on Google is now going to invoke our Drupal App in one or the other way . This is accomplished using WEBHOOKS. So, Google is now going to send a post request with all the details. Under Fulfillment tab, we configure our webhook. We need to ensure that our web service fulfills webhook requirements.

According to this, the web service must use HTTPS and the URL must be publicly accessible and hence we need to install NGROK. Ngrok exposes local web server to the internet.

NGROK

After having a publicly accessible URL, we just need to add this URL under fulfillment tab. As this URL will receive post request and processing will be done thereafter, so we need to add that URL where we are gonna handle requests just like endpoints. (It may be like http://yourlocalsite.ngrok.io/google-assistant-request)

add webhook url

Now, we need to build corresponding fulfillment to process the intent.

OK! It seems simple we just need to create a custom module with a route and a controller to handle the request. Indeed it is simple, only important point is understanding the flow which we understood above.

So, why are we waiting? Let’s start.

Create a custom module and a routing file:

droogle.default_controller_handleRequest:
 path: '/google-assistant-request'
 defaults:
   _controller: '\Drupal\droogle\Controller\DefaultController::handleRequest'
   _title: 'Handle Request'
 requirements:
   _access: TRUE

Now, let’s add the corresponding controller

requestStack = $request_stack;
   $this->loggerFactory = $loggerFactory;
 }

 /**
  * {@inheritdoc}
  */
 public static function create(ContainerInterface $container) {
   return new static(
     $container->get('request_stack'),
     $container->get('logger.factory')
   );
 }

 /**
  * Handlerequest.
  *
  * @return mixed
  *   Return Hello string.
  */
 public function handleRequest() {
   $this->loggerFactory->get('droogle')->info('droogle triggered');
   $this->processRequest();
   $data = [
     'speech' => 'Cache Rebuild Completed for the Site',
     'displayText' => 'Cache Rebuild Completed',
     'data' => '',
     'contextOut' => [],
     'source' => 'uniworld',
   ];
   return JsonResponse::create($data, 200);
 }

 protected function processRequest() {
   $params = $this->requestStack->getCurrentRequest();
   // Here we will process the request to get intent

   // and fulfill the action.
 }
}

Done! We are ready with a request handler to process the request that will be made by Google Assistant.

 

STEP3: DEPLOY FULFILLMENT AND TESTING THE APP

Part of the deployment has already been done, as we are developing on our local only. Now, we need to enable our custom module. Post that let's get back to dialogflow and establish the connection with app to test this. Earlier we had configured fulfillment URL details, ensure we have enabled webhook for all domains.

deployment

 

Let’s get back to intent that we build and enable webhook there too and save the intent.

intent enable webhook

Now, to test this we need to integrate it any of the device or live/sandbox app. Under Integrations tab, google provides several options for this too. Enable for Web Demo and open the URL in new tab, to test this:

Integration Web Demo

Speak up and test your newly build APP and let Google Assistant do its work.

So, as seen in the screenshot, there can be 2 type of responses. First, where our server is not able to handle request properly and the second one where Drupal server sends a valid JSON response.

GREAT! Connection is now established, you can now add intents in Google Action APP and correspondingly handle that intent and action at Drupal End. This is just a taste, conversational UX and Assistant technology will definitely impact how we interact with technology and we believe Drupal has a great role to play as a robust backend.

Nov 28 2016
Nov 28

This article assumes you are familiar with what RESTful is & what do we mean when we use the term REST API. Some of you might have already worked with RESTful Web Services module in D7, it exposes all entity types as web services using REST architecture. Drupal 8 out of the box is RESTful with core support. All entities (provided by core + ones created using Entity API) are RESTful resources.

To explore the RESTful nature of Drupal 8, we will need to enable the following modules:

In Core

  • HAL - Serializes entities using Hypertext Application Language.
  • HTTP Basic Authentication - Provides the HTTP Basic authentication provider.
  • RESTful Web Services - Exposes entities and other resources as RESTful web API
  • Serialization - Provides a service for (de)serializing data to/from formats such as JSON and XML.

Contributed

  • REST UI - Provides a user interface to manage REST resources.

RESTful Resources

Every entity in D8 is a resource, which has an end point. Since, its RESTful, the same end-point is used for CRUD (Create, Read, Update, Delete) operations with different HTTP verbs. Postman is an excellent tool to explore / test RESTful services.  Drupal 8 allows you to selectively choose & enable a REST API. e.g., we can choose to expose only nodes via a REST API & not other entities like users, taxonomy, comments etc.

After enabling REST_UI module we can see list of all RESTful resources at /admin/config/services/rest. In addition to ability to choose the entity one can enable, we can also choose the authentication method per resource & enable specific CRUD operations per resource.

Resource Settings

Let us take a look at what the REST APIs for User entity would be after we save the configuration in the above screenshot.

User

POST

http:
{
 "_links": {
   "type": {
     "href": "http://domain.com/rest/type/user/user"
   }
 },
 "name": {
   "value":"testuser"
 },
 "mail":{
   "value":"[email protected]"
 },
 "pass":{
   "value":"testpass"
 },
 "status": {
   "value": 1
 }
}

Header

X-CSRF-Token: Get from http://domain.com/rest/session/token
Content-Type: application/hal+json
Accept: application/hal+json
Authorization: Basic (hashed username and password)

Note: Drupal 8 doesn't allow anonymous user to send a POST on user resource. It is already fixed in 8.3.x branch but for now we can pass the credentials of the user who have permission to create users. If you are interested in taking a deeper look at the issue, you can follow https://www.drupal.org/node/2291055.

Response: You will get a user object with "200 OK" response code

 

PATCH

http:
{
 "_links": {
   "type": {
     "href": "http://domain.com/rest/type/user/user"
   }
 },
 "pass":[{"existing":"testpass"}],
 "mail":{
   "value":"[email protected]"
 }
}

Note: Now as user have permission to update his own profile so we can pass current user's credentials in authentication header.

Response: You will get "204 No Content" in response code.

 

GET

http:

Response: You will get a user object with "200 OK" response code.

 

DELETE

http:

Response: You will get "204 No Content" in response code.

RESTful Views and Authentication

Drupal 8 also allows us to export views as a REST service. It allows you to use all the available authentication mechanism in views itself.

JSON API Module

JSON API module provides a new format called "api_json" which is soon becoming the de-facto standard for Javascript Frontend frameworks, If you plan to use completely de-coupled Drupal with frontend framework like Angular / React / Ember then its worth a look. To read more about JSON API you can visit the site.

Nov 24 2016
Nov 24

Autocomplete on textfields like tags / user & node reference helps improve the UX and interactivity for your site visitors, In this blog post I'd like to cover how to implement autocomplete functionality in Drupal 8, including implementing a custom callback

Step 1: Assign autocomplete properties to textfield

As per Drupal Change records, #autocomplete_path has been replaced by #autocomplete_route_name and #autocomplete_parameters for autocomplete fields ( More details -- https://www.drupal.org/node/2070985).

The very first step is to assign appropriate properties to the textfield:

  1. '#autocomplete_route_name':
    for passing route name of callback URL to be used by autocomplete Javascript Library.
  2. '#autocomplete_route_parameters':
    for passing array of arguments to be passed to autocomplete handler.
$form['name'] = array(
    '#type' => 'textfield',
    '#autocomplete_route_name' => 'my_module.autocomplete',
    '#autocomplete_route_parameters' => array('field_name' => 'name', 'count' => 10),
);

Thats all! for adding an #autocomplete callback to a textfield. 

However, there might be cases where the routes provided by core might not suffice as we might different response in JSON or additional data. Lets take a look at how to write a autocomplete callback, we will be using using my_module.autocomplete route and will pass arguments: 'name' as field_name and 10 as count.

Step 2: Define autocomplete route

Now, add the 'my_module.autocomplete' route in my_module.routing.yml file as:

my_module.autocomplete:
  path: '/my-module-autocomplete/{field_name}/{count}'
  defaults:
    _controller: '\Drupal\my_module\Controller\AutocompleteController::handleAutocomplete'
    _format: json
  requirements:
    _access: 'TRUE'

While Passing parameters to controller, use the same names in curly braces, which were used while defining the autocomplete_route_parameters. Defining _format as json is a good practise.

Step 3: Add Controller and return JSON response

Finally, we need to generate the JSON response for our field element. So, proceeding further we would be creating AutoCompleteController class file at my_module > src > Controller > AutocompleteController.php.

query->get('q')) {
      $typed_string = Tags::explode($input);
      $typed_string = Unicode::strtolower(array_pop($typed_string));
      // @todo: Apply logic for generating results based on typed_string and other
      // arguments passed.
      for ($i = 0; $i < $count; $i++) {
        $results[] = [
          'value' => $field_name . '_' . $i . '(' . $i . ')',
          'label' => $field_name . ' ' . $i,
        ];
      }
    }

    return new JsonResponse($results);
  }

}

We would be extending ControllerBase class and would then define our handler method, which will return results. Parameters for the handler would be Request object and arguments (field_name and count) passed in routing.yml file. From the Request object, we would be getting the typed string from the URL. Besides, we do have other route parameters (field_name and Count) on the basis of which we can generate the results array. 

An important point to be noticed here is, we need the results array to have data in 'value' and 'label' key-value pair as we have done above. Then finally we would be generating JsonResponse by creating new JsonResponse object and passing $results.

That's all we need to make autocomplete field working. Rebuild the cache and load the form page to see results.

Nov 08 2016
Nov 08

Drupal sites with events functionality, often have to allow their users to export events in their personal calendars. On a recent Drupal 8 project we were asked to integrate 3rd party service Add to Calendar to their events and having found no formal integration of the widget with Drupal we developed and contributed this module. The widget provided by Add to calendar supports export of Dates / events to iCalender, Google Calendar, Outlook, Outlook Online and Yahoo Calendar.

add-to-calendar-blue

 

Why use Add To Calendar Service?

  • Add to Calendar Module provides a widget to export events.
  • With Add to Calendar Module, you can create event button on a page and allow guests to add this event to their calendar.

How Does Add to Calendar Module Works?

Add to Calendar Module provides third party field formatter settings for DateTime fields. Module internally uses services provided by http://addtocalendar.com to load free add to calendar button for event page on website and email. Clicking on this button, the event is exported to the corresponding website with proper information in the next tab where a user can add the event to their calendar. Besides, it provides a handful of configuration for a really flexible experience, Allowing you to use your datetime format along with Add to Calendar button.

Using Add to Calendar

  1. Download and enable Add to Calendar module (https://www.drupal.org/project/addtocalendar)

  2. Adding Add to Calendar button to any datetime field would require enabling “Show Add to Calendar” checkbox present at format configurations on Manage Display page of the desired content type.

add-to-calendar-manage-display

 

  1. Following configurations are available:

Option Description Style Three basic styles are available: Basic, Blue and Glow Orange Display Text Text for the display button. Event Details Module provides you three options here. You may opt for static data, tokenized value or any field value, specific to the current entity. Privacy Use public for free access to event information while private if the event is closed to public access. Security Level To specify whether button link should use http or https Calendars to show Select Calendars to be enabled for the display.

4. Save the settings and visit content display page.

Developer Support

Devs have the option to add "Add to Calendar" button anywhere on the website by following below steps:

1. Include base library ('addtocalendar/base') for add to calendar basic functionality. Optionally, You may also one of the following style libraries for styling the display button:

  • 'addtocalendar/blue'
  • 'addtocalendar/glow_orange'
$variables['#attached']['library'][] = 'addtocalendar/base';

2. Place event data on the page as:



2016-05-04 12:00:00
2016-05-04 18:00:00
Europe/London
Star Wars Day Party
May the force be with you
Tatooine
Luke Skywalker
[email protected]

For further customization of this custom button visit: http://addtocalendar.com/ Event Data Options section.

3. This would create "Add to Calendar" button for your website.

 

Oct 25 2016
Oct 25

CSSgram module supplements Drupal Image styling experience by making Instagram like filters available to your Drupal 8 site images, we do this with help of CSSgram library. 

Beauty of this module is, it simply uses css to beautify your image.

cssgram-filters-sample

Few CSSGram sample filters applied to an image.

How CSSGram Module works?

CSSGram module uses CSSGram Library for adding filter effects via CSS to the image fields. Module extends Field Formatter Settings to add image filter for that particular field. CSSGram extends field formatter settings and hence these filters can be applied on top of the existing available image formatters and image presets. Allowing you to use your desired image preset along with CSSGram filters.
 

Using CSSGram

  1. Download and enable CSSGram module (https://www.drupal.org/project/cssgram)

  2. Visit Manage Display of content type and for the desired image field, click on the setting link under format column.

  3. Select Filter option lets us choose from the available image filters. Just select the desired image filter and hit update button.

third-party-settings-cssgram
  1. Save the settings and visit the content display page.

Developer Support

Devs have the option to use these filters anywhere on the site by just attaching the ‘cssgram/cssgram’ library and then applying any of the available css filter class to the wrapper element.


function mymodule_preprocess_field(&$variables) {
    // Add desired css class.
    $variables['attributes']['class'] = 'kelvin';
    // Attach cssgram library.
    $variables['#attached']['library'][] = 'cssgram/cssgram';
}

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web