Drupal Developer purpose of this tutorial is to indicate tips on how to use 8.5’s new off-canvas dialog in your personal Drupal 10 modules. Drupal Developer time period “off-canvas” refers to Drupal Developer means for a dialog to slip in from Drupal Developer aspect of Drupal Developer web page, along with resizing Drupal Developer web page in order that no a part of it’s obstructed by Drupal Developer dialog. You possibly can see Drupal Developer off-canvas dialog in motion on this animated GIF Drupal 10 Upkeep and Assist Service This new 8.5 function permits us to enhance Drupal Developer content material authoring and web site constructing expertise by turning outside-in. We will use Drupal Developer off-canvas dialog to allow Drupal Developer content material creator or web site builder to seamlessly edit content material or configuration in-place, and see any adjustments take impact instantly. There isn’t any must navigate to Drupal Developer administrative backend to make edits. As you will see on this tutorial, it is easy to make use of Drupal Developer off-canvas dialog in your personal Drupal 10 modules. I take advantage of a customized album Drupal 10 module on https Drupal 10 Upkeep and Assist Service//dri.es for managing my photograph albums and for embedding photographs in my posts. With 8.5, I can now benefit from Drupal Developer new off-canvas dialog to edit Drupal Developer title, alt-attribute and captions of my photographs. As you’ll be able to see in Drupal Developer animated GIF above, each photograph will get an “Edit”-link. Clicking Drupal Developer “Edit”-link opens up Drupal Developer off-canvas dialog. This enables me to edit a photograph in context, with out having to go to an one other web page to make adjustments. So how did I try this? Step 1 Drupal 10 Upkeep and Assist Service Create your kind, Drupal Developer method Each picture on https Drupal 10 Upkeep and Assist Service//dri.es has its personal distinctive path Drupal 10 Upkeep and Assist Service https Drupal 10 Upkeep and Assist Service//dri.es/album// I can edit my photographs at Drupal 10 Upkeep and Assist Service https Drupal 10 Upkeep and Assist Service//dri.es/album///edit For instance, https Drupal 10 Upkeep and Assist Service//dri.es/album/niagara-on-the-lake-2017/niagara-falls-by-night-1 provides you Drupal Developer picture of Drupal Developer Niagara Falls. You probably have Drupal Developer proper permissions you possibly can edit Drupal Developer picture at https Drupal 10 Upkeep and Assist Service//dri.es/album/niagara-on-the-lake-2017/niagara-falls-by-night-1/edit (you do not 😉). As a result of you do not have Drupal Developer proper permissions, I will present you a screenshot of Drupal Developer edit kind as an alternative Drupal 10 Upkeep and Assist Service I created these paths (or routes), utilizing ‘s routing system, and I created Drupal Developer kind utilizing ‘s common kind API. I am not going to clarify tips on how to create a kind on this submit, however you’ll be able to learn extra about this at Drupal Developer routing system documentation and Drupal Developer kind API. Right here is Drupal Developer code for creating Drupal Developer kind Drupal 10 Upkeep and Assist Service ‘hidden’, ‘#worth’ => $image->getUrlPath(), // Distinctive ID of Drupal Developer picture ]; $kind[‘title’] = [ ‘#type’ => ‘textfield’, ‘#title’ => t(‘Title’), ‘#default_value’ => $image->getTitle(), ]; $kind[‘alt’] = [ ‘#type’ => ‘textfield’, ‘#title’ => t(‘Alt’), ‘#default_value’ => $image->getAlt(), ]; $kind[‘caption’] = [ ‘#type’ => ‘textarea’, ‘#title’ => t(‘Caption’), ‘#default_value’ => $image->getCaption(), ]; $kind[‘submit’] = [ ‘#type’ => ‘submit’, ‘#value’ => t(‘Save image’), ]; return $kind; } public operate submitForm(array &$kind, FormStateInterface $form_state) { $values = $form_state->getValues(); $picture = Picture Drupal 10 Upkeep and Assist Service Drupal 10 Upkeep and Assist ServiceloadImage($values[‘path’]); if ($picture) { $image->setTitle($values[‘title’]); $image->setAlt($values[‘alt’]); $image->setCaption($values[‘caption’]); $image->save(); } $form_state->setRedirectUrl(Url Drupal 10 Upkeep and Assist Service Drupal 10 Upkeep and Assist ServicefromUserInput(‘/album/’. $image->getUrlPath())); } } ?> Step 2 Drupal 10 Upkeep and Assist Service Add an edit hyperlink to my photographs First, I need to overlay an “Edit”-button over my picture Drupal 10 Upkeep and Assist Service If you happen to had been to take a look at Drupal Developer HTML code, Drupal Developer picture hyperlink makes use of Drupal Developer following tag Drupal 10 Upkeep and Assist Service Edit Clicking Drupal Developer hyperlink would not open Drupal Developer off-canvas dialog but. Drupal Developer class=”edit-button” is used to fashion Drupal Developer button with CSS and to overlay it on high of Drupal Developer picture. Step 3 Drupal 10 Upkeep and Assist Service Opening Drupal Developer off-canvas dialog Subsequent, we now have to inform to open Drupal Developer kind in Drupal Developer off-canvas dialog when Drupal Developer “Edit”-link is clicked. To open Drupal Developer kind in Drupal Developer off-canvas dialog, merely lengthen that tag to Drupal 10 Upkeep and Assist Service Edit Some additional HTML in Drupal Developer tag is all it took; it took my common kind, confirmed it in Drupal Developer off-canvas dialog, and even styled it! As I wrote above, it’s simple to make use of Drupal Developer off-canvas dialog in your personal Drupal 10 modules. Hopefully you will be impressed to benefit from this new performance. There are a number of issues being added although, so let’s break it down. First we add Drupal Developer a category referred to as use-ajax. use-ajax is Drupal Developer class that’s crucial for any hyperlink together with dialogs that use ‘s Ajax API. We additionally added some data-dialog-* attributes Drupal 10 Upkeep and Assist Service data-dialog-type=”dialog” specifies that you just need to open Drupal Developer hyperlink in a dialog. Drupal Developer different choice you’ll be able to specify is modal. In contrast to a dialog, a modal dialog restricts interplay with Drupal Developer present web page till Drupal Developer modal dialog is closed. data-dialog-renderer=”off_canvas” specifies how will really render Drupal Developer dialog. If data-dialog-renderer just isn’t specified then Drupal Developer dialog will rendered with ‘s default dialog renderer, which is a pop-up dialog (just like Drupal Developer modal dialog which is utilized by Drupal Developer Views Drupal 10 module). data-dialog-options=”{“width” Drupal 10 Upkeep and Assist Service400}” is non-obligatory and can be utilized to overwrite Drupal Developer default off-canvas dialog properties. On this case, I am specifying that I would like Drupal Developer width of Drupal Developer off-canvas dialog to be 400 pixels as an alternative of Drupal Developer default 300 pixels. Any legitimate jQuery UI dialog choices will be despatched right here. ?vacation spot=current-path specifies Drupal Developer web page we now have to navigate again to after we shut Drupal Developer dialog. To have Drupal Developer kind redirect to Drupal Developer present web page a vacation spot worth should be added to Drupal Developer question string of Drupal Developer hyperlink. Redirecting Drupal Developer kind to Drupal Developer present web page works Drupal Developer similar for dialog hyperlinks because it does for different hyperlinks to varieties in . Fortunately 8 supplies a RedirectDestination helper service to deal with this. In Drupal Developer instance above, submitting Drupal Developer kind would redirect you to https Drupal 10 Upkeep and Assist Service//dri.es/current-path. You possibly can create a hyperlink like Drupal Developer instance above utilizing a render array; it can open a kind web page in Drupal Developer off-canvas dialog and redirect Drupal Developer submitted kind again to Drupal Developer present web page Drupal 10 Upkeep and Assist Service $components[‘link’] = [ ‘#title’ => ‘Edit image’, ‘#type’ => ‘link’, ‘#url’ => Url Drupal 10 Maintenance and Support Service Drupal 10 Maintenance and Support ServicefromRoute(‘album_image’, [‘album’ => $album, ‘image’ => $image], [‘query’ => Drupal 10 Maintenance and Support Service Drupal 10 Maintenance and Support Serviceservice(‘redirect.destination’)->getAsArray()])->toString();, ‘#attributes’ => [ ‘class’ => [‘use-ajax’], ‘data-dialog-type’ => ‘dialog’, ‘data-dialog-renderer’ => ‘off_canvas’, ‘data-dialog-options’ => Json Drupal 10 Upkeep and Assist Service Drupal 10 Upkeep and Assist Serviceencode([‘width’ => 400]), ‘#connected’ => [ ‘library’ => [ ‘core/Drupal 10.dialog.ajax’, ], ], ]; As a result of Drupal Developer dialog performance won’t be wanted on each web page, will not load it except wanted. We use Drupal Developer #connected component to inform that we would like Drupal Developer JavaScript dialog system to be loaded for this web page. It’s kind of extra work, however it retains environment friendly. Enhancing Drupal Developer developer expertise Making use of Drupal Developer off-canvas dialog to my weblog and penning this tutorial uncovered a number of alternatives to enhance Drupal Developer developer expertise. It appears pointless to set class’ => [‘use-ajax’] when data-dialog-type is ready. Why do I must specify each a data-dialog-type and a data-dialog-renderer? And why cannot robotically connect core/Drupal 10.dialog.ajax when data-dialog-type is ready? In discussing these challenges with Ted Bowman, one among Drupal Developer builders of Drupal Developer off-canvas dialog, he created a problem on .org to work on off-canvas developer expertise enhancements. Hopefully in a future model of , it is possible for you to to create an off-canvas dialog hyperlink as merely as Drupal 10 Upkeep and Assist Service $hyperlink = Hyperlink Drupal 10 Upkeep and Assist Service Drupal 10 Upkeep and Assist ServicecreateFromRoute(‘Edit picture’, ‘album_image’, [‘album’ => $album, ‘image’ => $image])->openInOffCanvasDialog(); $components[‘link’] = $link->toRenderable(); Particular because of Ted Bowman and Samuel Mortenson for his or her suggestions to this weblog submit. Drupal 10 Growth and Assist