Wednesday , July 17 2019
Home / Uncategorized / How to use the Off-Canvas dialog box in Drupal 8

How to use the Off-Canvas dialog box in Drupal 8



A brilliant new feature has recently been added to Drupal 8 since version 8.5 of the dialog box support.

Dialog boxes outside the area are those that come out of the page. They push on existing content to create space for themselves while keeping existing content unaltered, unlike a traditional dialog pop-up. These dialogs are often used for menus on smaller screens. Most Drupal 8 users are familiar with the use of an offline menu style toolbar, which is automatically activated on smaller screens.

Off-canvas administration toolbar

The founder of Drupal Dries published a tutorial and finally I had the chance to try it on my own.

In my case, I was creating a reviewer form to send reviews of long and complicated submissions. The reviewers had to be able to easily access the entire application while entering their review. A form at the bottom of the screen would have meant too much scrolling and a traditional popup would have blocked much of the content that they had to see. Therefore, an "off-canvas" dialog was the perfect solution.

Build yours

With the latest Drupal core updates, you can now easily add your dialogs out of the canvas.

Create a page for your canvas content

The integrated integration in the canvas is designed to load the Drupal pages in the dialog (and only the pages as far as I know). So you will need an existing page, such as a node edit module, or you will need to create your own personalized page through the Drupal routing system, which will contain your custom form or other content. In my case, I created a personalized page with a custom form.

Create a link

Once you have a page that you want to display in the dialog box, you will need to link to that page. This will function as an activation element to load the dialog.

In my case, I wanted to make the revision module dialog from the display of the complete application node. I created an "extra field" using hook_entity_extra_field_info (), I created the link in hook_ENTITY_TYPE_view (), so I set up the new link field using the Manage View tab for the entity of my application.

/ *
* Implements hook_entity_extra_field_info ().
* /
function custom_entity_extra_field_info () {
$ more['node']['application']['display']['review_form_link']    = array (
& # 39; label & # 39; => t (& # 39; Review Application & # 39;),
& # 39; description & # 39; => t (& # 39; View a link to the review form. & # 39;),
& # 39; weight & # 39; => 0,
);
return $ extra;
}

/ **
* Implements hook_ENTITY_TYPE_view ().
* /
function custom_node_view (array & $ build, Drupal  Core  Entity  EntityInterface $ entity, Drupal  Core  Entity  Display  EntityViewDisplayInterface $ display, $ view_mode) {
if ($ display-> getComponent (& # 39; review_form_link & # 39;))) {
$ accumulation['review_link'] = array (
& # 39; & # title # 39; => t (& # 39; Review Application & # 39;),
& # 39; & # type # 39; => & # 39; link & # 39 ;,
& # 39; & # url # 39; => Url :: fromRoute (& # 39; custom.review_form & # 39 ;, ['application' => $entity->id()])
);
}
}

Add the canvas to the link

So you just have to set the link to open it using the off-canvas function instead of a new page.

There are four attributes to add to your link array to do this:

                        & # 39; & # 39 # attributes; => array (
& # 39; class & # 39; => & # 39; use-ajax & # 39 ;,
& # 39; data-dialog-renderer & # 39; => & # 39; off_canvas & # 39 ;,
& # 39; data-dialog-type & # 39; => & # 39; dialog & # 39 ;,
& # 39; data-dialog-options & # 39; => & # 39; {"width": "30%"} & # 39;
)
"#attached" => [
        'library' => [
          'core/drupal.dialog.ajax',
        ],
],

The first three attributes are necessary to make the dialog work and the last one is recommended, as it allows you to control the size of the dialog.

In addition, you will need to attach Drupal's ajax dialog library. Before adding the library to my implementation, I was encountering a problem where some user roles could access the dialogue and others did not. It turned out that this was due to loading the role library with access to the administration toolbar.

The rendered link will end up looking like:

Review the application

And this is all! The dialog outside the area is ready and ready for action.

off-canvas-demo-gif


Source link

Leave a Reply

Your email address will not be published.