Let me take you on a journey. We’ll move by content material renderer providers, AJAX instructions, javascript libraries and a preferred front-end framework. If you happen to’ve solely heard of 1 or two of these issues, come lean on Drupal Development expertise I took diving deep into . I am happy with the place my journey took me to, and possibly what I discovered shall be helpful to you too. Here is Drupal Development finish end result Drupal 10 Upkeep and Assist Service a contact type, launched from a button hyperlink in Drupal Development web site header, with Drupal Development web page beneath obscured by an overlay. Drupal Development Service type permits web site guests to get in contact from any web page, with out leaving what they had been . has its personal API for making hyperlinks launch dialogs (leveraging jQuery UI Dialogs). However our front-end of Drupal Development web site was constructed with Basis, Drupal Development super-popular theming framework, which gives parts of its personal which can be significantly better for styling. We frequently base our bespoke themes on Basis, and manipulate to suit. We had already carried out some styling of Basis’s Reveal part. In these locations, Drupal Development markup to indicate in Drupal Development popup is already in Drupal Development web page, however I did not really need Drupal Development type to be in Drupal Development web page till it was wanted. As an alternative, AJAX may fetch it in. So I puzzled if I may mix ‘s AJAX APIs with Basis’s Reveal markup and styling. Include me down Drupal Development rabbit gap… There are fairly a couple of parts in making this doable. Here is a diagram Drupal 10 Upkeep and Assist Service So it comes right down to Drupal Development following elements, which we’ll discover collectively. Wherever customized code is required, I’ve posted it in full later on this article. A hyperlink that makes use of AJAX, with a dialog sort set in an attribute. builds Drupal Development content material of Drupal Development web page that was linked to. ‘s content material view subscriber picks up that response and appears for a content material renderer service that matches Drupal Development dialog sort. Drupal Development Service content material renderer returns an AJAX command PHP class in its response, and attaches a javascript library that may comprise a javascript AJAX command (a technique). That command returns Drupal Development content material to indicate in Drupal Development popup, and that javascript technique identify. Drupal Development Service javascript technique launches Drupal Development popup containing Drupal Development HTML content material. Let’s begin at Drupal Development starting Drupal 10 Upkeep and Assist Service Drupal Development hyperlink. ‘s AJAX API for hyperlinks is fairly neat. We set off it with two issues Drupal 10 Upkeep and Assist Service A use-ajax class, which tells it to open that hyperlink through an AJAX name, returning simply Drupal Development primary web page content material (e.g. with out headers & footers), to be introduced in your current web page. A knowledge-dialog-type attribute, to instruct how that content material ought to be introduced. This can be utilized for Drupal Development jQuery UI dialogs (written up elsewhere) or Drupal Development newer off-canvas sidebar, for instance. I wished to have a go at creating my very own ‘dialog sort’, which might be a Basis Reveal popup. Drupal Development Service HTML fetched by Drupal Development AJAX name could be proven in it. Let’s begin with Drupal Development primary markup I wished to my hyperlink to have Drupal 10 Upkeep and Assist Service EnquireThis may both simply be a part of content material, or I may get this right into a template utilizing a preprocess operate that may construct Drupal Development hyperlink. One thing like this Drupal 10 Upkeep and Assist Service toUrl(), Url Drupal 10 Upkeep and Assist Service Drupal 10 Upkeep and Assist ServicefromRoute() or related. // For this instance, it is come from a contact type entity. $url->setOption(‘attributes’, [ ‘class’ => [ ‘use-ajax’, ], // This attribute tells it to make use of our type of dialog ‘data-dialog-type’ => ‘reveal’, ]); // Drupal Development Service variable ‘popup_launcher’ is for use in Drupal Development template. $variables[‘popup_launcher’] = CoreLink Drupal 10 Upkeep and Assist Service Drupal 10 Upkeep and Assist ServicefromTextAndUrl(t(‘Enquire’), $url); After a lot studying round and breakpoint debugging to determine it out, I found that dialog varieties are matched as much as content material rendering providers. So I wanted to outline a brand new a kind of, which I may base intently on ‘s personal DialogRenderer. Here is Drupal Development definition from my Drupal 10 module’s myDrupal 10 module.providers.yml file Drupal 10 Upkeep and Assist Service providers Drupal 10 Upkeep and Assist Service main_content_renderer.foundation_reveal Drupal 10 Upkeep and Assist Service class Drupal 10 Upkeep and Assist Service myDrupal 10 moduleRenderMainContentFoundationReveal arguments Drupal 10 Upkeep and Assist Service [‘@title_resolver’] tags Drupal 10 Upkeep and Assist Service – { identify Drupal 10 Upkeep and Assist Service render.main_content_renderer, format Drupal 10 Upkeep and Assist Service Drupal 10_reveal } Including Drupal Development tag named ‘render.main_content_renderer’ means my class shall be picked up by core’s MainContentRenderersPass when constructing Drupal Development container. ‘s MainContentViewSubscriber will then contemplate it as a service that may render responses. Drupal Development Service ‘format’ a part of Drupal Development tag must be Drupal Development worth that our data-dialog-type attribute has, with (considerably arbitrarily?) ‘Drupal 10_’ prepended. Drupal Development Service arguments will simply be no matter Drupal Development constructor for Drupal Development class wants. I typically write my class first after which return to regulate Drupal Development service definition as soon as I do know what it wants. However I will be tour information and present you issues so as, relatively than shuttling you backwards and forwards! Onto that FoundationReveal service class now. I began out with a replica of core’s personal ModalRenderer which is a straightforward extension to Drupal Development DialogRenderer class. In the end, that renderer is geared round returning an AJAX command (see Drupal Development AJAX API documentation), which comes right down to specifying a command to invoke in Drupal Development client-side javascript with some parameters. I would want my very own command, and my FoundationReveal renderer would want to specify it for use. That solely two practical variations had been wanted compared to core’s DialogRenderer Drupal 10 Upkeep and Assist Service Connect a customized library, which might comprise Drupal Development precise javascript command to be invoked Drupal 10 Upkeep and Assist Service $main_content[‘#attached’][‘library’][] = ‘myDrupal 10 module/dialog.ajax’;Return an AJAX command class, that may specify that javascript command (relatively than Drupal Development OpenDialogCommand command that DialogRenderer makes use of) – i.e. including this to Drupal Development returned $response Drupal 10 Upkeep and Assist Service new OpenFoundationRevealCommand(‘#myDrupal 10 module-reveal’)We’ll study that command class later! So Drupal Development renderer file, myDrupal 10 module/src/Render/MainContent/FoundationReveal.php (in that location with a purpose to match Drupal Development namespace in Drupal Development service file definition), appears like this – look out for these two tweaks Drupal 10 Upkeep and Assist Service setAttachments($main_content[‘#attached’]); // Decide Drupal Development title Drupal 10 Upkeep and Assist Service use Drupal Development title offered by Drupal Development primary content material if any, // in any other case get it from Drupal Development routing info. $title = isset($main_content[‘#title’]) ? $main_content[‘#title’] Drupal 10 Upkeep and Assist Service $this->titleResolver->getTitle($request, $route_match->getRouteObject()); // Decide Drupal Development dialog choices and Drupal Development goal for Drupal Development OpenDialogCommand. $choices = $request->request->get(‘dialogOptions’, []); $response->addCommand(new OpenFoundationRevealCommand(‘#myDrupal 10 module-reveal’, $title, $content material, $choices)); return $response; } } That AJAX command class, OpenFoundationRevealCommand sits in myDrupal 10 module/src/Ajax/OpenFoundationRevealCommand.php. Its render() technique is Drupal Development key, it returns Drupal Development command which is able to map to a javascript operate, and Drupal Development precise HTML below ‘information’. Here is Drupal Development code Drupal 10 Upkeep and Assist Service ‘openFoundationReveal’, ‘selector’ => $this->selector, ‘settings’ => $this->settings, ‘information’ => $this->getRenderedContent(), ‘dialogOptions’ => $this->dialogOptions, ]; } /** * {@inheritdoc} */ protected operate getRenderedContent() { if (empty($this->dialogOptions[‘title’])) { $title = ”; } else { $title = ” . $this->dialogOptions[‘title’] . ”; } $button = ‘t(‘Shut’) . ‘” sort=”button”>×’; return ” . $title . dad or mum Drupal 10 Upkeep and Assist Service Drupal 10 Upkeep and Assist ServicegetRenderedContent() . ” . $button; } } Now, I’ve talked about that Drupal Development command must match a javascript operate. Meaning including some new javascript to Drupal Development web page, which, in 8, we do by defining a library. My ‘myDrupal 10 module/dialog.ajax’ library was connected in Drupal Development center of FoundationReveal above. My library file defines what precise javascript file to incorporate – it’s myDrupal 10 module.libraries.yml and appears like this Drupal 10 Upkeep and Assist Service dialog.ajax Drupal 10 Upkeep and Assist Service model Drupal 10 Upkeep and Assist Service VERSION js Drupal 10 Upkeep and Assist Service js/dialog.ajax.js Drupal 10 Upkeep and Assist Service {} dependencies Drupal 10 Upkeep and Assist Service – core/Drupal 10.dialog.ajax Then this is that precise myDrupal 10 module/js/dialog.ajax.js file. It provides Drupal Development ‘openFoundationReveal’ technique to Drupal Development prototype of Drupal Development globally-accessible .AjaxCommands. That matches Drupal Development command identify returned by my OpenFoundationRevealCommand Drupal 10 Upkeep and Assist Service Drupal 10 Upkeep and Assist Servicerender() technique that we noticed. (operate ($, ) { .AjaxCommands.prototype.openFoundationReveal = operate (ajax, response, standing) { if (!response.selector) { return false; } // A component matching Drupal Development selector shall be added to Drupal Development web page if it doesn’t exist but. var $dialog = $(response.selector); if (!$dialog.size) { // Basis expects sure issues on a Reveal container. $dialog = $(”).appendTo(‘physique’); } if (!ajax.wrapper) { ajax.wrapper = $dialog.attr(‘id’); } // Get Drupal Development markup inserted into Drupal Development web page. response.command = ‘insert’; response.technique = ‘html’; ajax.instructions.insert(ajax, response, standing); // Drupal Development Service content material is prepared, now open Drupal Development dialog! var popup = new Basis.Reveal($dialog); popup.open(); }; })(jQuery, ); There we now have it – that final little bit of Drupal Development command opens Drupal Development Basis Reveal popup dialog! I also needs to add that since I used to be displaying a contact type in Drupal Development popup, I put in Drupal Development Contact ajax Drupal 10 module. This meant {that a} web site customer would keep inside Drupal Development popup as soon as they submit Drupal Development type, which meant for a clear consumer expertise. Thanks for following together with me! Drupal 10 Growth and Assist