Graphical representation
2016 02 Apr

Popups in Drupal 8? No problem!

By Akash Jain

Drupal 8 is here and everyone is excited about it. There are too many features and add-ons to explore. However, this one focusses only on overlay / popup i.e. provide a simple and easy implementation. With this blog, I aim to explain the basic implementation of how to create a popup of your own.

Before learning to implement popup, let us briefly go through the drupal 8 routing system.

If you already know about the routing system, you can skip this section and if you don't I assume you still know at least the basics of Drupal 8. I have a page which has a table display of some data. On top of this page, I'll provide a link which will open a form in popup.

Now, let's start with the steps.

At first, we create a routing link where we show a table with some content.

hollywood.view_movie:

 path: '/movies-list'

 defaults:

   _title: 'Movie List'

   _controller: '\Drupal\hollywood\Controller\MovieList::overview'

 requirements:

   _permission: 'movies list'

 

This page will show table as shown in the figure.

Movie List   d8.png

I am using the below code to render this table.   

$content['movie_list'] = array(

     '#type' => 'table',

     '#header' => $this->header(),

     '#title' => $this->t('Movie List'),

     '#rows' => $this->row()

   );

 

Now let us see how we display the link at the top of the table which says "Add Movie".

Below is how the popup will eventually show.

Add Movie Overlay .png

 

I am using following code to show above link and its overlay  

 $content['overlay_link'] = array(

     '#type' => 'link',

     '#title' => $this->t('Add movie'),

     '#url' => Url::fromRoute('node.add', ['node_type' => 'content_type_movie']),

     '#attributes' => [

       'class' => ['use-ajax'],

       'data-dialog-type' => 'modal',

       'data-dialog-options' => Json::encode([

         'width' => 700,

       ]),

     ],

   );

This code is self-explanatory but let me explain you one by one, we tell drupal to create a link

by  '#type' => 'link', with title “Add movie” defined by #title, #url defined HREF attribute of a tag, #attributes uses to add an attribute in a tag these.     

'#attributes' => [

       'class' => ['use-ajax'],

       'data-dialog-type' => 'modal',

       'data-dialog-options' => Json::encode([

         'width' => 700,

       ]),

     ],

 

These above attributes will make the content of the link in an overlay, without these attributes this will be a simple link.

And there you go. It is as simple as that. No more dependencies on multiple modal and popup modules. Now you just need to be right in your syntax and understand the attributes well enough to be create a popup link in no time.
There are a lot of other things that can be done around the popups and I'll continue to explain them in further blogs. Look forward to your thoughts and feedback.

Featured blog

web-personalization

Personalized Content is a Proven Entity !!

Irrespective of how big a business icon or brand you are, increasing the relevance of your website will always be critical to your success.

Read More

Git Hooks

Git hooks for better codes

We are programmers and we are always on the lookout for ways to improve our code. A good and structured way of coding defines the completeness of a programmer.

Read More

Drupal ,varnish cache

Hard time with Drupal, Varnish Cache and Cookies

Using a reverse proxy server in front of a web server is usually needed for every big site and it is a very good thing to do so as reverse proxy server will handle all the anonymous traff

Read More

Say no to captcha

Say no to captcha - Various Spam Protection Methods

Maintaining high traffic websites have their own merits and demerits, the most annoying thing about them is SPAM.

Read More