This weblog has been re-posted and edited with permission from Drupal 10 Assist: ‘s weblog. Please go away your feedback on Drupal Development Service authentic put up. Drupal Development purpose of this tutorial is to indicate the right way to use 8.5’s new off-canvas dialog in your individual Drupal 10 modules. Drupal Development time period “off-canvas” refers to Drupal Development Service means for a dialog to slip in from Drupal Development Service aspect of Drupal Development Service web page, along with resizing Drupal Development Service web page in order that no a part of it’s obstructed by Drupal Development Service dialog. You possibly can see Drupal Development Service off-canvas dialog in motion on this animated GIF Drupal 10 Upkeep and Assist Service This new 8.5 characteristic permits us to enhance Drupal Development Service content material authoring and website constructing expertise by turning outside-in. We are able to use Drupal Development Service off-canvas dialog to allow Drupal Development Service content material creator or website builder to seamlessly edit content material or configuration in-place, and see any modifications take impact instantly. There isn’t a have to navigate to Drupal Development Service administrative backend to make edits. As you will see on this tutorial, it is easy to make use of Drupal Development Service off-canvas dialog in your individual 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 photos in my posts. With 8.5, I can now reap the benefits of Drupal Development Service new off-canvas dialog to edit Drupal Development Service title, alt-attribute and captions of my pictures. As you may see in Drupal Development Service animated GIF above, each photograph will get an “Edit”-link. Clicking Drupal Development Service “Edit”-link opens up Drupal Development Service off-canvas dialog. This permits me to edit a photograph in context, with out having to go to an one other web page to make modifications. So how did I do this? Step 1 Drupal 10 Upkeep and Assist Service Create your type, Drupal Development Service approach 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/<album-name>/<image-name> I can edit my photos at Drupal 10 Upkeep and Assist Service https Drupal 10 Upkeep and Assist Service//dri.es/album/<album-name>/<image-name>/edit For instance, https Drupal 10 Upkeep and Assist Service//dri.es/album/niagara-on-the-lake-2017/niagara-falls-by-night-1 offers you Drupal Development Service picture of Drupal Development Service Niagara Falls. You probably have Drupal Development Service proper permissions you would edit Drupal Development Service 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 Development Service proper permissions, I am going to present you a screenshot of Drupal Development Service edit type as a substitute Drupal 10 Upkeep and Assist Service I created these paths (or routes), utilizing ‘s routing system, and I created Drupal Development Service type utilizing ‘s common type API. I am not going to elucidate the right way to create a type on this put up, however you may learn extra about this at Drupal Development Service routing system documentation and Drupal Development Service type API. Right here is Drupal Development Service code for creating Drupal Development Service type Drupal 10 Upkeep and Assist Service <?php namespace album; use CoreFormFormBase; use CoreFormFormStateInterface; use albumImage; use CoreUrl; class ImageEditForm extends FormBase { public perform getFormId() { return ‘album_edit_image’; } public perform buildForm(array $type, FormStateInterface $form_state, $dir = NULL, $img = NULL) { $picture = Picture Drupal 10 Upkeep and Assist Service Drupal 10 Upkeep and Assist ServiceloadImage(“$dir/$img”); $type[‘path’] = [ ‘#type’ => ‘hidden’, ‘#value’ => $image->getUrlPath(), // Unique ID of the image ]; $type[‘title’] = [ ‘#type’ => ‘textfield’, ‘#title’ => t(‘Title’), ‘#default_value’ => $image->getTitle(), ]; $type[‘alt’] = [ ‘#type’ => ‘textfield’, ‘#title’ => t(‘Alt’), ‘#default_value’ => $image->getAlt(), ]; $type[‘caption’] = [ ‘#type’ => ‘textarea’, ‘#title’ => t(‘Caption’), ‘#default_value’ => $image->getCaption(), ]; $type[‘submit’] = [ ‘#type’ => ‘submit’, ‘#value’ => t(‘Save image’), ]; return $type; } public perform submitForm(array &$type, 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 photos 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 Development Service HTML code, Drupal Development Service picture hyperlink makes use of Drupal Development Service following <a href> tag Drupal 10 Upkeep and Assist Service <a href=”https Drupal 10 Upkeep and Assist Service//dri.es/album/niagara-on-the-lake-2017/niagara-falls-by-night-1/edit” class=”edit-button”>Edit</a> Clicking Drupal Development Service hyperlink would not open Drupal Development Service off-canvas dialog but. Drupal Development class=”edit-button” is used to model Drupal Development Service button with CSS and to overlay it on prime of Drupal Development Service picture. Step 3 Drupal 10 Upkeep and Assist Service Opening Drupal Development Service off-canvas dialog Subsequent, we’ve got to inform to open Drupal Development Service type in Drupal Development Service off-canvas dialog when Drupal Development Service “Edit”-link is clicked. To open Drupal Development Service type in Drupal Development Service off-canvas dialog, prolong that <a href> tag to Drupal 10 Upkeep and Assist Service <a href=”https Drupal 10 Upkeep and Assist Service//dri.es/album/niagara-on-the-lake-2017/niagara-falls-by-night-1/edit?vacation spot=current-path” class=”edit-button use-ajax” data-dialog-type=”dialog” data-dialog-renderer=”off_canvas” data-dialog-options=”{&quot;width&quot; Drupal 10 Upkeep and Assist Service400}”>Edit</a> Some additional HTML in Drupal Development Service <a href> tag is all it took; it took my common type, confirmed it in an off-canvas dialog, and even styled it! As I wrote above, it’s straightforward to make use of Drupal Development Service off-canvas dialog in your individual Drupal 10 modules. Hopefully you will be impressed to reap the benefits of this new performance. There are a number of issues being added although, so let’s break it down. First we add Drupal Development Service a category known as use-ajax Drupal 10 Upkeep and Assist Service use-ajax is Drupal Development Service class that’s obligatory 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 simply need to open Drupal Development Service hyperlink in a dialog. Drupal Development different choice you may specify is modal. In contrast to a dialog, a modal dialog restricts interplay with Drupal Development Service present web page till Drupal Development Service modal dialog is closed. data-dialog-renderer=”off_canvas” specifies how will truly render Drupal Development Service dialog. If data-dialog-renderer will not be specified then Drupal Development Service dialog will rendered with ‘s default dialog renderer, which is a pop-up dialog (much like Drupal Development Service modal dialog which is utilized by Drupal Development Service Views Drupal 10 module). data-dialog-options=”{&quot;width&quot; Drupal 10 Upkeep and Assist Service400}” is optionally available and can be utilized to overwrite Drupal Development Service default off-canvas dialog properties. On this case, I am specifying that I would like Drupal Development Service width of Drupal Development Service off-canvas dialog to be 400 pixels as a substitute of Drupal Development Service default 300 pixels. Any legitimate jQuery UI dialog choices might be despatched right here. ?vacation spot=current-path specifies Drupal Development Service web page we’ve got to navigate again to after we shut Drupal Development Service dialog. To have Drupal Development Service type redirect to Drupal Development Service present web page a vacation spot worth have to be added to Drupal Development Service question string of Drupal Development Service hyperlink. Redirecting Drupal Development Service type to Drupal Development Service present web page works Drupal Development Service similar for dialog hyperlinks because it does for different hyperlinks to varieties in . Fortunately 8 gives a RedirectDestination helper service to deal with this. In Drupal Development Service instance above, submitting Drupal Development Service type would redirect you to https Drupal 10 Upkeep and Assist Service//dri.es/current-path. You possibly can create a hyperlink like Drupal Development Service instance above utilizing a render array; it’s going to open a type web page in Drupal Development Service off-canvas dialog and redirect Drupal Development Service submitted type again to Drupal Development Service present web page Drupal 10 Upkeep and Assist Service $parts[‘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 Development Service dialog performance won’t be wanted on each web page, will not load it until wanted. We use Drupal Development Service #connected ingredient to inform that we would like Drupal Development Service JavaScript dialog system to be loaded for this web page. It is a bit extra work, but it surely retains environment friendly. Bettering Drupal Development Service developer expertise Making use of Drupal Development Service off-canvas dialog to my weblog and scripting this tutorial uncovered a number of alternatives to enhance Drupal Development Service developer expertise. It appears pointless to set class’ => [‘use-ajax’] when data-dialog-type is about. Why do I have to specify each a data-dialog-type and a data-dialog-renderer? And why cannot mechanically connect core/Drupal 10.dialog.ajax when data-dialog-type is about? In discussing these challenges with Ted Bowman, one in every of Drupal Development Service builders of Drupal Development Service off-canvas dialog, he created a difficulty 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(); $parts[‘link’] = $link->toRenderable(); Particular because of Ted Bowman and Samuel Mortenson for his or her suggestions to this weblog put up. Drupal 10 Growth and Assist