Drupal Planet Feed https://www.qed42.com/ en Layout Builder Asset Injector module https://www.qed42.com/blog/layout-builder-asset-injector-module <span property="schema:name" class="field field--name-title field--type-string field--label-hidden">Layout Builder Asset Injector module</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-above"> <div class="field__label">Body</div> <div property="schema:text" class="field__item"><p dir="ltr">Drupal 8's Layout Builder allows content editors and site builders to easily and quickly create visual layouts for displaying content. Users can customize how content is arranged on a single page, or across types of content, or even create custom landing pages with an easy to use drag-and-drop interface. Our recently contributed module - The Layout Builder Asset Injector module is definitely not a replacement for theming, but it provides site administrators with a quick and easy approach. The Layout Builder Asset Injector module allows site builders to add CSS and JS to the layout builder blocks. </p> <h3>| Benefits </h3> <ul> <li dir="ltr"> <p dir="ltr" role="presentation">It allows you to inject CSS and JS within the layout builder blocks without the need to add it in the codebase.</p> </li> <li dir="ltr"> <p dir="ltr" role="presentation">Append unique CSS and scripts specific to layout builder blocks</p> </li> <li dir="ltr"> <p dir="ltr" role="presentation">It provides content editors with basic knowledge of CSS and JS to style their individual layout builder blocks and add short JS scripts to modify the behaviour.</p> </li> <li dir="ltr"> <p dir="ltr" role="presentation">Instead of adding CSS and JS on a page level, this module allows you to inject them on an individual block.</p> </li> </ul> <h3 dir="ltr">| CSS Injector</h3> <p dir="ltr">CSS Injector allows administrators to inject CSS into the page output based on configurable rules. It's useful for adding simple CSS tweaks without modifying a site's official theme.</p> <h3 dir="ltr">| JS  Injector</h3> <p dir="ltr">JS Injector allows administrators to inject JS into the page output based on configurable rules. It's useful for adding simple JS tweaks without modifying a site's official theme.</p> <p dir="ltr">Note: Block class will be appended automatically to each CSS.</p> <p dir="ltr">For example when we add a CSS as given below:</p> <pre> <code class="language-twig">h1.node__title {   background-color:red; } It will automatically append the class of the block for which CSS is added once saved. .block-field-blocknodepagebody h2.node__title{    background-color:red; }</code></pre> <h3 dir="ltr"> </h3> <p dir="ltr"><img alt="Layout Builder Asset Injector Drupal module" data-entity-type="file" data-entity-uuid="8a9f4b7e-e69f-490e-adc5-49bcba145c0c" src="/sites/default/files/inline-images/10_0.png" /></p> <h3 dir="ltr">| How does it work? </h3> <ul> <li dir="ltr"> <p dir="ltr" role="presentation">Enable the Layout Builder Asset module</p> </li> <li dir="ltr"> <p dir="ltr" role="presentation">After you enable the module, enable the layout option from the manage display section as shown below:</p> </li> </ul> <p dir="ltr" role="presentation"><img alt="Layout Builder Asset Injector Drupal module" data-entity-type="file" data-entity-uuid="05fd1354-f480-404f-a415-636d8678936c" src="/sites/default/files/inline-images/11_3.png" /></p> <ul> <li dir="ltr"> <p dir="ltr" role="presentation">Under Layout Options, check both ‘Use Layout Builder’ and ‘Allow each content item’ options.</p> </li> </ul> <p dir="ltr" role="presentation"><img alt="Layout Builder Asset Injector Drupal module" data-entity-type="file" data-entity-uuid="eedc340b-a131-4f30-a727-61c9ba8450dc" src="/sites/default/files/inline-images/12.png" /></p> <ul> <li dir="ltr"> <p dir="ltr" role="presentation">Click on the Add Block where you have CSS and JS text field (text area)</p> </li> </ul> <p dir="ltr" role="presentation"><img alt="Layout Builder Asset Injector Drupal module" data-entity-type="file" data-entity-uuid="56972f60-9e8a-47b9-80ee-492c0ed0f6aa" src="/sites/default/files/inline-images/13.png" /></p> <p><em>To understand Layout Builder in detail refer  <a href="https://www.drupal.org/docs/8/core/modules/layout-builder">https://www.drupal.org/docs/8/core/modules/layout-builder</a></em></p> <ul> <li dir="ltr"> <p dir="ltr" role="presentation">You can add your styling and scripts under the CSS and JS fields respectively</p> </li> <li dir="ltr"> <p dir="ltr" role="presentation">To make the styling and scripts specific to a block, add classes under the Classes text field. This class should be unique so as to reflect scripts and styling specific to a block.</p> </li> <li dir="ltr"> <p dir="ltr" role="presentation">On adding the CSS and JS and saving the configuration, it will automatically prefix the CSS with a custom class added.</p> </li> </ul> <p dir="ltr"><em>Note: You don't need to add it manually.</em></p> <p dir="ltr"><em><img alt="Layout Builder Asset Injector Drupal module" data-entity-type="file" data-entity-uuid="9c5cc7f0-7e12-4e64-8af6-abbfb34cefd1" src="/sites/default/files/inline-images/14.png" /></em></p> <ul> <li dir="ltr"> <p dir="ltr" role="presentation">Upon saving the configuration, it creates a block specific unique file in the backend.</p> </li> </ul> <p dir="ltr" role="presentation"><img alt="Layout Builder Asset Injector Drupal module" data-entity-type="file" data-entity-uuid="39563ce1-4a4d-40ca-8457-d1d886a0bec5" src="/sites/default/files/inline-images/15.png" /></p> <ul> <li dir="ltr"> <p dir="ltr" role="presentation">In the frontend, you can see the CSS applied to the respective block.</p> </li> </ul> <p dir="ltr"><img alt=" https://www.youtube.com/watch?v=3Ogya_66GDU&amp;feature=youtu.be" data-entity-type="file" data-entity-uuid="b1a3b093-efc0-4261-b2f3-b563f7fa08eb" src="/sites/default/files/inline-images/16.png" /></p> <h3>| Implementing the Layout Builder asset injector module </h3> <p>Click here for the steps to install the Layout Builder asset injector module - <a href="https://www.drupal.org/docs/8/extending-drupal-8/installing-drupal-8-modules">https://www.drupal.org/docs/8/extending-drupal-8/installing-drupal-8-modules</a></p> <div class="embed-media embed-media--video-youtube"><div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"><iframe src="https://www.youtube.com/embed/v3NYUYyg-3s?rel=0" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" allowfullscreen="" scrolling="no" allow="encrypted-media; accelerometer; gyroscope; picture-in-picture" title="Layout Builder Asset Injector Module | QED42"></iframe></div></div> <h3>| Developer support</h3> <p>Kishor Kolekar: <a href="https://www.drupal.org/u/kishor_kolekar">https://www.drupal.org/u/kishor_kolekar</a></p> <p>Harshal Pradhan: <a href="https://www.drupal.org/u/hash6">https://www.drupal.org/u/hash6</a></p> <p>Abhishek Mazumdar: <a href="https://www.drupal.org/u/abhisekmazumdar">https://www.drupal.org/u/abhisekmazumdar</a></p> <p>Hardik Patel: <a href="https://www.drupal.org/u/hardik_patel_12">https://www.drupal.org/u/hardik_patel_12</a></p> <p>Naresh Bavaskar: <a href="https://www.drupal.org/u/naresh_bavaskar">https://www.drupal.org/u/naresh_bavaskar</a></p> <h3>| Module download link </h3> <p><a href="https://www.drupal.org/project/layout_builder_asset">https://www.drupal.org/project/layout_builder_asset</a></p> <h3>| Alternative module links </h3> <p><a href="https://www.drupal.org/project/asset_injector">https://www.drupal.org/project/asset_injector</a></p> <p><a href="https://www.drupal.org/project/layout_builder_styles">https://www.drupal.org/project/layout_builder_styles</a></p> <p> </p> </div> </div> <span rel="schema:author" class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/user/6368" typeof="schema:Person" property="schema:name" datatype="">Kishor Kolekar</span></span> <span property="schema:dateCreated" content="2020-06-01T12:46:00+00:00" class="field field--name-created field--type-created field--label-hidden">Mon, 06/01/2020 - 18:16</span> Mon, 01 Jun 2020 12:46:00 +0000 Kishor Kolekar 348 at https://www.qed42.com Clear Field Values Module: Drupal 8 https://www.qed42.com/blog/clear-field-values-module-drupal-8 <span property="schema:name" class="field field--name-title field--type-string field--label-hidden">Clear Field Values Module: Drupal 8</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-above"> <div class="field__label">Body</div> <div property="schema:text" class="field__item"><p dir="ltr">While trying to build a form, I found that it would be useful to have a one-click/touch option to clear text field values instead of selecting all the text and removing it. Even though this appears like a small issue, solving this would make users life easy! This was the driving force behind creating the Clear Field Values module for Drupal 8. The Clear Field Values module provides a way to clear data in the text field values with a single click/touch.</p> <h3>| Clear Field Values module</h3> <p dir="ltr">This module adds a button to clear text field values in one click/touch and provides two options at present, one is a simple cross button and the other is using font awesome icons.</p> <h3 dir="ltr">| Benefits </h3> <ul> <li dir="ltr"> <p dir="ltr">Helps clear the entire input field without having to delete the whole text manually </p> </li> <li dir="ltr"> <p dir="ltr">Clears a pre-suggested input present in the input field, that the user does not require.</p> </li> </ul> <h3>| Implementing the Clear Field Values module</h3> <p dir="ltr">Follow these steps to configure the Clear Field: </p> <ol> <li dir="ltr"> <p dir="ltr">Go to /admin/config/clear-field/settings steps</p> </li> <li dir="ltr"> <p dir="ltr">Enable Clear Field by selecting the checkbox </p> </li> <li dir="ltr"> <p dir="ltr">Next, select the type of Button:</p> <ol> <li dir="ltr"> <p dir="ltr">Simple X </p> </li> <li dir="ltr"> <p dir="ltr">Fontawesome for all generic fields</p> </li> </ol> </li> <li dir="ltr"> <p dir="ltr">You can then add the text and tooltip which you need to add along with icon or keep it empty if not required.</p> </li> <li dir="ltr"> <p dir="ltr">Add classes for the text field elements where you need the cross button to be visible.</p> </li> </ol> <h4>Step 1 : Move to  Settings page /admin/config/clear-field/settings </h4> <h4>Step 2: Enable Clear Field Checkbox</h4> <p>Select Type of Button</p> <ol> <li dir="ltr"> <p dir="ltr">Text along with X for all</p> </li> </ol> <p dir="ltr">Selecting the above option would add X(cross) with text beside the text field</p> <ol start="2"> <li dir="ltr"> <p dir="ltr">Font Awesome for all fields generic</p> </li> </ol> <p dir="ltr">Enable FontAwesome module <a href="https://www.drupal.org/project/fontawesome">https://www.drupal.org/project/fontawesome</a> and you can add the cross button</p> <p dir="ltr">Default values for the text of the icon and tooltip are Clear Field &amp; Clear field value which can be overridden.</p> <p dir="ltr">Default values for the Classes are form-text form-email separated by a space.</p> <p dir="ltr">For a custom-form add custom classes defined under element’s attributes under Classes field.</p> <div class="embed-media embed-media--video-youtube"><div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"><iframe src="https://www.youtube.com/embed/1czrz9RcCs8?rel=0" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" allowfullscreen="" scrolling="no" allow="encrypted-media; accelerometer; gyroscope; picture-in-picture" title="Clear fields value module | QED42"></iframe></div></div> <h3>| Developer support</h3> <p dir="ltr">This module is supported by </p> <ol> <li dir="ltr"> <p dir="ltr">Harshal Pradhan <a href="https://www.drupal.org/u/hash6">https://www.drupal.org/u/hash6</a></p> </li> <li dir="ltr"> <p dir="ltr">Kiran Kadam <a href="https://www.drupal.org/u/kirankadam911">https://www.drupal.org/u/kirankadam911</a></p> </li> </ol> <h3>| Module download links</h3> <p dir="ltr"><a href="https://www.drupal.org/project/clear_field">https://www.drupal.org/project/clear_field</a></p> <p dir="ltr"><a href="https://www.drupal.org/project/clear_field/releases/8.x-1.x-dev">https://www.drupal.org/project/clear_field/releases/8.x-1.x-dev</a></p> <h4>Do send in your feedback around this module! We would love to hear from you. <br />  </h4> <p>Reference: <a href="https://www.geeksforgeeks.org/html-clearing-the-input-field/">https://www.geeksforgeeks.org/html-clearing-the-input-field/</a></p> <p> </p> </div> </div> <span rel="schema:author" class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/user/6287" typeof="schema:Person" property="schema:name" datatype="">Harshal Pradhan</span></span> <span property="schema:dateCreated" content="2020-06-01T08:40:00+00:00" class="field field--name-created field--type-created field--label-hidden">Mon, 06/01/2020 - 14:10</span> Mon, 01 Jun 2020 08:40:00 +0000 Harshal Pradhan 349 at https://www.qed42.com Acquia Site Studio - Low Code Enterprise-grade, Drupal website building platform. https://www.qed42.com/blog/Cohesion-low-code-enterprise-grade-Drupal-website-building-platform <span property="schema:name" class="field field--name-title field--type-string field--label-hidden">Acquia Site Studio - Low Code Enterprise-grade, Drupal website building platform.</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-above"> <div class="field__label">Body</div> <div property="schema:text" class="field__item"><p>Low-code platforms have been slowly gaining popularity in the Marketing stack of organisations. Low-code essentially means being able to assemble UI of your Digital experience visually and often without the need for a dedicated Development team. <a href="https://webflow.com/">Webflow</a> for Websites and <a href="https://www.shopify.com/">Shopify</a> for e-commerce are among the list of rising low-code platforms. These platforms help organisations become more agile and help enable various functions like Design, Marketing to come on board as Makers on the Digital experience. Today we will talk about Cohesion now renamed as Site Studio, a low code offering for Drupal websites by Acquia, we will discuss benefits and some of the paradigms that make it an effective low code option in Drupal stack.</p> <p>Drupal has witnessed a healthy growth over these years as a pillar for Enterprise Digital stack, Acquia's <span><span><span><span><span><span>Site Studio </span></span></span></span></span></span>brings the DIY spirit to this stack. What more and more Marketers are looking for is quicker and cheaper ways to assemble landing pages and work out of a component library of Digital elements that are performant and consistent to the Design systems of the organisation. A low code approach to Drupal will only work if its aware of its capabilities &amp; flexibility, that is what Cohesion brings on the table. Ability to apply Design systems on your Digital Experience built on Drupal, DIY!</p> <h3>Benefits of Acquia's Site Studio</h3> <ol> <li>Low code </li> <li>Highly configurable</li> <li>Easy maintainable</li> <li>Easily modifiable </li> <li>Highly scalable</li> <li>Component-based driven</li> <li>Less developer dependent</li> </ol> <h3>Acquia Site Studio</h3> <p>Acquia's Site Studio provides a contributed module and theme which needs to be installed in Drupal, quite similar to the way we install other modules and themes. However, to use this service, it is required to <a href="https://www.acquia.com/products-services/acquia-cohesion#create-sandbox">purchase a cohesion package</a> that provides us with an API Key, Agency Key, Site ID, and an API Server URL which needs to be inserted in the Account Settings form.</p> <p><img alt="Cohesion DX8" data-entity-type="file" data-entity-uuid="5af0f71a-8cf9-422f-b20a-cb415864ca34" height="442" src="/sites/default/files/inline-images/1_16.png" width="656" /></p> <p><span><span><span><span><span><span>Here are the settings and key features of Acquia's Site Studio:</span></span></span></span></span></span></p> <ol> <li><span><span><span><span><span><span>Website Settings</span></span></span></span></span></span></li> <li><span><span><span><span><span><span>Style Settings</span></span></span></span></span></span></li> <li><span><span><span><span><span><span>Components</span></span></span></span></span></span></li> <li><span><span><span><span><span><span>Templates</span></span></span></span></span></span></li> </ol> <p><span><span><span><span><span><span>Site Studio provides an in-site configuration form which takes care of your branding requirements. You can add your own branding elements like fonts, colours, icons, grid settings, SCSS variables, etc. directly onto the site. And there is absolutely no need to make any changes in the theme folder as well as the theme settings. Doesn’t this sound cool! Your basic frontend settings would be handy to you and you can modify it directly from the site without asking for help from a developer.</span></span></span></span></span></span></p> <h3><span><span><span><strong><span><span>Website Settings</span></span></strong></span></span></span></h3> <p><img alt="Cohesion DX8" data-entity-type="file" data-entity-uuid="1ee0e7ab-6d81-4b09-8709-36fe40fadaf9" height="598" src="/sites/default/files/inline-images/Cohesion%20DX8.png" width="574" /></p> <h3>Style Settings</h3> <p>It’s not over yet, with Acquia <span><span><span><span><span><span>Site Studio</span></span></span></span></span></span> you can create/modify styles of a site. Acquia <span><span><span><span><span><span>Site Studio</span></span></span></span></span></span> provides settings to update the base style or to create custom styles. </p> <p><img alt="Cohesion DX8" data-entity-type="file" data-entity-uuid="eaf54954-292b-46a0-926a-5e4fcf163614" height="437" src="/sites/default/files/inline-images/3_10.png" width="572" /></p> <p><span><span><span><span><span><span>And this is how the default preview and configuration pane looks like.</span></span></span></span></span></span></p> <div class="embed-media embed-media--video-youtube"><div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"><iframe src="https://www.youtube.com/embed/XRklqBrVkgo?rel=0" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" allowfullscreen="" scrolling="no" allow="encrypted-media; accelerometer; gyroscope; picture-in-picture" title="Cohesion DX8 | QED42"></iframe></div></div> <p>Now let’s understand what comes under Base styling and Custom styling</p> <p><strong>Base styling - </strong>Styling which is going to be consistent throughout the site, e.g., font-size of body. Font formatting of Headings, Style of a button, style of link, etc.</p> <p><strong>Custom styling - </strong>Styling which will be different for each instance or as a variation of base style. E.g., Big button, Small button, Read More Link, Consistent layout related styles (Padding Top &amp; Bottom Large, Padding Top &amp; Bottom Small), Social icons theming, etc.</p> <p>Let’s look at the example of CTA link styling.</p> <ul> <li>CTA style structure <ul> <li>Link styling</li> <li>After pseudo-element styling</li> <li>On hover pseudo-element styling</li> </ul> </li> <li>Style properties required for CTA link and those properties are added in the config form through properties button on the top right corner of the styling pane</li> <li>Styling properties required for pseudo-element styling</li> <li>Styling properties required for pseudo-element after hover</li> </ul> <p style="list-style-type:disc"><img alt="COHESION DX8" data-entity-type="file" data-entity-uuid="6416862e-0e32-420c-8b2b-b71fb615826e" src="/sites/default/files/inline-images/2_23.png" /></p> <p style="list-style-type:disc"><img alt="COHESION DX8" data-entity-type="file" data-entity-uuid="f4dcd6b4-b43e-44b2-bd10-70172df2a0d9" src="/sites/default/files/inline-images/COHESION%20DX8%20%283%29_0.png" /></p> <p style="list-style-type:disc"><img alt="cohesion DX8" data-entity-type="file" data-entity-uuid="188ca05a-fa4f-4a04-ac39-ccac413af21f" src="/sites/default/files/inline-images/3_11.png" /></p> <h3><span><span><span><strong><span><span>Component Builder</span></span></strong></span></span></span></h3> <p><span><span><span><span><span><span>Now let’s introduce the coolest feature of the </span></span></span></span></span></span>Acquia's <span><span><span><span><span><span>Site Studio -  a Component Builder. </span></span></span></span></span></span>Acquia <span><span><span><span><span><span>Site Studio follows a complete component-based development approach. So, what is the component-based development approach? </span></span></span></span></span></span></p> <p>Acquia <span><span><span><span><span><span>Site Studio provides a list of elements. By using these elements even simple and complex components can be created and be made configurable by creating a component form. The amazing part is that everything can be built by mere drag and drop. Doesn’t it sound super user friendly?</span></span></span></span></span></span></p> <p><span><span><span><span><span><span>Let’s look at an example of a Hero Component and figure out which elements could be part of this component?  Let’s create a list of elements(atoms).</span></span></span></span></span></span></p> <ul> <li><span><span><span><span><span><span>Hero Image</span></span></span></span></span></span></li> <li><span><span><span><span><span><span>Hero Title</span></span></span></span></span></span></li> <li><span><span><span><span><span><span>Hero Description</span></span></span></span></span></span></li> <li><span><span><span><span><span><span>CTA button</span></span></span></span></span></span></li> </ul> <p><span style="font-size:11pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:Arial"><span style="color:#000000"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">Let’s consider the below-displayed hero component that we are trying to achieve.</span></span></span></span></span></span></p> <p><span style="font-size:11pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:Arial"><span style="color:#000000"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none"><img alt="Cohesion dx8" data-entity-type="file" data-entity-uuid="c3f18be2-7693-4cda-9693-c403e70cd2b7" height="400" src="/sites/default/files/inline-images/Screenshot%202020-05-16%20at%205.47.22%20PM.png" width="812" /></span></span></span></span></span></span></p> <p>Based on the Hero component design, the hero component structure would look similar as described in the below image.</p> <p><img alt="Cohesion DX8" data-entity-type="file" data-entity-uuid="7eea2af3-13ea-4a77-b0fa-cc8051737767" src="/sites/default/files/inline-images/Cohesion%20DX8%20%281%29.png" /></p> <p>A component will be created which will have the above-mentioned elements. But what about styling? This is the real beauty of Acquia <span><span><span><span><span><span>Site Studio.</span></span></span></span></span></span> It allows us to create a base style as well as a custom style and those can be appended to the component. Doesn’t it sound fascinating?</p> <p>Here would like to take you back to the styling part of the section where we have styled CTA link. Now, here in the above component CTA link element can directly assign the style which has been created under custom style. And as per image, styling can be appended to CTA Link element.</p> <p><span style="font-size:11pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:Arial"><span style="color:#000000"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none"><img alt="COHESION DX8" data-entity-type="file" data-entity-uuid="cac6dade-fd42-4a3b-aacf-9eefab4e81d3" src="/sites/default/files/inline-images/Cohesion%20DX8%20%282%29_0.png" /></span></span></span></span></span></span></p> <h3><span><span><span><strong><span><span>Layout</span></span></strong></span></span></span></h3> <p>There are multiple ways to create different layouts. Here, with Acquia <span><span><span><span><span><span>Site Studio</span></span></span></span></span></span>, the layout can be defined by a Layout Category component and also component dropzone element can be provided to add other components. </p> <p>Does it mean? Woah! Yes, it means nesting use of the component is also possible. I won’t provide the screenshot for this example right now.</p> <h3><span><span><span><strong><span><span>Template</span></span></strong></span></span></span></h3> <p><span><span><span><span><span><span>There are four main templates:</span></span></span></span></span></span></p> <ul> <li><span><span><span><span><span><span>Master Template</span></span></span></span></span></span></li> <li><span><span><span><span><span><span>Content Template</span></span></span></span></span></span></li> <li><span><span><span><span><span><span>Views Template</span></span></span></span></span></span></li> <li><span><span><span><span><span><span>Menu Template</span></span></span></span></span></span></li> </ul> <p><span><span><span><span><span><span>The template names clearly state the use of each template, but, I am sure you must have some questions related to master templates. </span></span></span></span></span></span></p> <p><span><span><span><span><span><span>What will it hold? The thumb rule is, this template should be least modifiable, means, it should not be updated frequently. </span></span></span></span></span></span><span><span><span><span><span><span>We can ensure this by using only consistent section/components/regions added to it.</span></span></span></span></span></span></p> <h3>Acquia Site Studio Demo </h3> <p>Explore how Site Studio enables you to apply design systems on your Digital Experience built on Drupal!</p> <div class="embed-media embed-media--video-youtube"><div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"><iframe src="https://www.youtube.com/embed/mRe-mF5YCWY?rel=0" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" allowfullscreen="" scrolling="no" allow="encrypted-media; accelerometer; gyroscope; picture-in-picture" title="Acquia Site Studio - A new site-building paradigm."></iframe></div></div> <p><span><span><span><span><span><span>I hope this blog was helpful to understand the basic outline of </span></span></span></span></span></span>Acquia <span><span><span><span><span><span>Site Studio. Stay tuned! We have an upcoming blog that will talk about the advanced usage of templates. </span></span></span></span></span></span></p> <p><strong>P.S - </strong>If you want to learn more about <span><span><span><span><span><span>Site Studio</span></span></span></span></span></span>, Acquia has a training and a full support guide - <a data-mt-detrack-attachment-inspected="true" data-mt-detrack-inspected="true" data-saferedirecturl="https://www.google.com/url?q=https://cohesiondocs.acquia.com/6.1&amp;source=gmail&amp;ust=1590226563972000&amp;usg=AFQjCNGjOWexBRf_yCeDeIh6MP9pLNHSDA" href="https://cohesiondocs.acquia.com/6.1" rel="noreferrer" target="_blank">https://cohesiondocs.acquia.<wbr></wbr>com/6.1</a> and get access to the free sandbox here - <a data-mt-detrack-attachment-inspected="true" data-mt-detrack-inspected="true" data-saferedirecturl="https://www.google.com/url?q=https://www.acquia.com/products-services/acquia-cohesion%23create-sandbox&amp;source=gmail&amp;ust=1590226563972000&amp;usg=AFQjCNGVjrbmgd9sfjkAzUwt3V_8ZP7Jzw" href="https://www.acquia.com/products-services/acquia-cohesion#create-sandbox" rel="noreferrer" target="_blank">https://www.acquia.com/<wbr></wbr>products-services/acquia-<wbr></wbr>cohesion#create-sandbox</a>.</p> </div> </div> <span rel="schema:author" class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/user/4889" typeof="schema:Person" property="schema:name" datatype="">Vidit Anjaria</span></span> <span property="schema:dateCreated" content="2020-05-20T08:11:00+00:00" class="field field--name-created field--type-created field--label-hidden">Wed, 05/20/2020 - 13:41</span> Wed, 20 May 2020 08:11:00 +0000 Vidit Anjaria 369 at https://www.qed42.com DIA Contribution Weekend, April 2020 https://www.qed42.com/blog/dia-contribution-weekend-april-2020 <span property="schema:name" class="field field--name-title field--type-string field--label-hidden">DIA Contribution Weekend, April 2020</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-above"> <div class="field__label">Body</div> <div property="schema:text" class="field__item"><h2 class="quote">What divides us pales in comparison to what unites us.</h2> <h4 class="blog-grey">    <em> - Ted Kennedy</em></h4> <p>This especially rings true in the time we're living in now.</p> <p>Because of a much needed country-wide lockdown here in India to prevent the spread of COVID-19 disease, everyone has been locked-out in their homes and have socially distanced themselves form their communities. This, of course, includes the Drupal India community as well. And what better way to bring this community together than an online pan-India contribution weekend organized by Drupal India Association.</p> <h3>First-ever fully-remote pan-India contribution event</h3> <p>Today, on 18th April 2020, Drupal India Association (DIA) conducted it's first online 'Contribution Weekend'. It's the first event of its kind in that it was completely remote and saw participation from Drupalers across India.</p> <h4><em>We had 116 RSVPs, 22 Mentors, 96 Issues on Contribkanban board.</em></h4> <h3>Thank you, organizers!</h3> <p>Before I talk more about the event, I would like to give a huge shout-out to everyone who was involved in the planning of this amazing event and a special shout-out to <a href="https://www.drupal.org/u/rakhimandhania">Rakhi Mandhania</a>, <a href="https://www.drupal.org/u/surabhi-gokte">Surabhi Gokte</a> &amp; <a href="https://www.drupal.org/u/sharmilas">Sharmila Kumaran</a> (#WomenInDrupal FTW) for managing this so well. The planning team worked super hard to make this a success. They took time out of their personal and professional lives to have various meetings for issue triaging, communication and marketing for the event, arranging for speakers and much more. Thank you, everyone, who contributed to planning this.</p> <h3>The introductory hour for new/first-time contributors</h3> <p><img alt="DIA Contribution Weekend April 2020" data-entity-type="file" data-entity-uuid="d478cd6b-2ca8-452e-9459-d5f2f3d219ed" height="761" src="/sites/default/files/inline-images/Screenshot%202020-04-19%20at%203.06.33%20PM-min-min%20%281%29.png" width="1385" /></p> <p>We started the event at 8:45 in the morning,(Yes, That's 8:45 in the morning!) with a special session for new and first-time contributors. A big shout-out to all the newcomers and especially the mentors who took time out this early in the morning to volunteer for mentoring them. And boy did we have a lot of mentors! We had a mentor-to-mentee ratio of 5:1! Don't you feel special now mentees!</p> <h3>Main event</h3> <p>The main event started at 10:00 AM with more than 40 people joining in. And more people kept pouring in as the event went by. At a time we had around 70 people in the call!</p> <h3>Drupal India Association</h3> <p>Rakhi, our host, got us started and handed over the call to <a href="https://www.drupal.org/u/mukeshagarwal17">Mukesh Agarwal</a>. Mukesh is CEO of Innoraft, one of the member organizations of DIA, and introduced us to DIA, its goals and purposes and the role it is going to play in representing the Indian Drupal community to the world. Major goals of DIA can be summarised as:</p> <ol> <li>Becoming an exemplary community leadership organization to the rest of the Drupal world</li> <li>Developing thought leaders in Drupal who will enhance India’s image in the Drupal world</li> <li>Becoming a major influencer and enabler in the adoption of Drupal in the Gulf &amp; ASEAN region</li> <li>Making India an innovation hub for Drupal</li> <li>Making Impactful Contribution to community &amp; the extended stakeholders of Drupal</li> </ol> <h3>Drupal Association needs our help!</h3> <p>Mukesh's introduction was followed by <a href="https://www.drupal.org/u/tanishakalia">Tanisha Kalia</a>, a representative from the Drupal Association, and she talked about DA and the financial effects of COVID-19 on DA and the larger Drupal community. DA is a very important entity for the whole Drupal community. Among the numerous things they do for the community, a few are:</p> <ul> <li>Managing, hosting and conducting DrupalCons</li> <li>Managing the infrastructure of drupal.org</li> </ul> <p>Tanisha mentioned that the majority of DA's funding comes from the revenues of DrupalCon events and the almost inevitable possibility of cancellation/postponement of DrupalCon NA has put DA in a big financial hole. DA needs the community's support. <br /> Tanisha encouraged community members to either donate to DA directly via #DrupalCares initiative or support DA by purchasing/subscribing to be a member of DA, the cost of which starts from just 15 USD.</p> <p>As of this moment, DA has reached 25% of its USD 500,000 goal:</p> <p><img alt="DrupalCares Goal DIA Contribution Weekend 2020" data-entity-type="file" data-entity-uuid="0ff795e2-fa71-4b0d-a81d-fe571658e402" height="117" src="/sites/default/files/inline-images/Screenshot%202020-04-28%20at%2012.23.41%20PM.png" width="439" /></p> <p>As an individual member or an organization, you can help DA sustain the COVID-19 Impact and help reach its goal. Read more here: <a href="https://bit.ly/2VyKbmM">https://bit.ly/2VyKbmM</a></p> <p>Tanisha also talked about the initiative taken by prominent members in the community to encourage donations and financial contributions. Some of these are:</p> <ul> <li>From now until April 30, Vanessa and Dries are offering a dollar-for-dollar match for new, individual contributions to the Drupal Association - up to a total match of $100K! More details: <a href="https://bit.ly/2KefaPJ">https://bit.ly/2KefaPJ</a></li> <li>Gábor Hojtsy, Acquia, will be donating 9EUR for every module ported to Drupal 9 for a total of up to 900EUR. More details: <a href="https://bit.ly/2wS5uaE">https://bit.ly/2wS5uaE</a></li> <li>Jeff Geerling, @geerlingguy, will be donating 2$ for every like on his recent Youtube video for a total of up to 1000USD. Video link: <a href="https://youtu.be/fdk7zUwDQdM">https://youtu.be/fdk7zUwDQdM</a></li> </ul> <p>A big thanks to all of you! </p> <p>Thanks to an amazing community, we had 6 new individual memberships registered before the introduction call finished.</p> <h3>Code-of-Conduct and Tips for the day</h3> <p>Next up Rakhi communicated the Code-of-Conduct to all the contributors and shared the various channels for communication that people could use throughout the day.<br /> We were using channels on DIA slack. There were various channels set up for clear and effective communication:</p> <ol> <li>#new-contributors: For first-timers and newcomers.</li> <li>#regular-contributors: For experienced contributors.</li> <li>#issue-reviews-contribution day: For issues ready for review.</li> </ol> <p>This setup was really efficient and was instrumental in keeping people engaged and active throughout the day.</p> <h3>Hussain kicking off the day </h3> <p>Rakhi then handed over to <strong><a href="https://www.drupal.org/u/hussainweb">Hussain Abbas</a></strong> from Axelerant who joined us as guest speaker for the sprint. He started by talking about the power of open source and how open source has in past sustained and in fact grown in face of financial crises. Truly, Open Source is here to stay!<br /> Hussain then proceeded with talking about the path for Drupal core and contributes projects to Drupal 9 and how we can make sure that projects we frequently use and maintain can be made ready for Drupal 9. The Drupal community has created various tools to help us with these:</p> <ol> <li><a href="https://github.com/mglaman/drupal-check">drupal-check</a>: A PHP CLI tool to get a report of any deprecated code used. This can be integrated into build processes and continuous integration systems.</li> <li><a href="https://www.drupal.org/project/rector">drupal-rector</a>: A tool for automated deprecation fixes for some common cases.</li> <li><a href="https://www.drupal.org/project/upgrade_status">Upgrade status module</a>: A wrapper module around drupal-check internals that generates a full site report of contributed and custom modules used in the site. This report can be used to assess the overall Drupal 9 compatibility of the modules.</li> <li><a href="https://www.drupal.org/project/upgrade_rector">Upgrade rector</a>: A user interface on top of drupal-rector, which also integrated with Upgrade Status.</li> </ol> <p>Read more about these tools in the official Drupal documentation: <a href="https://bit.ly/3apZhAA">https://bit.ly/3apZhAA</a></p> <p>After Hussain finished his session and just before we were about to wrap up the call, we realized that <strong><a href="https://www.drupal.org/u/rachel_norfolk">Rachel Lawson</a>, Community Liason - Drupal Association</strong>, has joined us in the call. The presence of the Community Liason from DA also inspired &amp; motivated us to give our best to this contribution weekend.</p> <h3>Let's code!</h3> <p>After all the sessions, it was time for the code contribution now. From the start, one could tell that it was going to be a productive day. Just under an hour we made significant progress and moved a lot of issues to RTBC or Fixed.</p> <p><strong>Start of the day:</strong></p> <p><img alt="Start of the day" data-entity-type="file" data-entity-uuid="6b1b5c1d-f2a5-4202-9262-0522e4b7ed5f" height="440" src="/sites/default/files/inline-images/EV3m7GyUcAItqy7.jpeg" width="909" /></p> <p><strong>An hour into contribution:</strong></p> <p><img alt="An hour into contribution" data-entity-type="file" data-entity-uuid="ed41321f-7455-45d6-8398-f545640a2b0d" height="434" src="/sites/default/files/inline-images/Screenshot%202020-04-28%20at%2012.24.56%20PM-min.png" width="911" /></p> <h3>Come for the code, Stay for the community!</h3> <p>Highlights of the day were the appreciation that the mentors received from the newcomers and first-time contributors for their help and support. We had a first-time contributor who had been contributing back to the WordPress community in the past as well as trying their hands-on Drupal contribution for the first time. They really loved the experience and appreciated the welcome and support they received from the community. In their own words: "You all (Drupal community) are awesome and doing great work!"</p> <p><img alt="Words of appreciation from a wordpress community member." data-entity-type="file" data-entity-uuid="63f9189e-6c9b-4763-85cb-d695b76d4567" height="366" src="/sites/default/files/inline-images/EV3cd8dUcAEnwI1.jpeg" width="837" /></p> <p>With our spirits high we continued the rest of the day with the contribution. And to have the feeling of togetherness in this endeavour, we had the zoom bridge open throughout the day so that people could freely reach out to each other. We even had regular check-ins every couple of hours so that everyone feels connected.</p> <p>We ended the even at 3:30 pm with a call where everyone shared their experience and appreciation for the community. It turned out to be a very fruitful day of contribution. By the end of it, we were able to <strong>move around 50 issues from needs work/active to RTBC/Fixed</strong>.Thanks to all amazing mentors for their support to make this happen: </p> <p><a href="https://twitter.com/azeets">@azeets</a>, <a href="https://twitter.com/JayKandari">@JayKandari</a>, <a href="https://twitter.com/piyuesh23">@piyuesh23</a>, </p> <p><a href="https://twitter.com/yogeshmpawar">@yogeshmpawar</a>, <a href="https://twitter.com/AshishVDalvi">@AshishVDalvi</a>, <a href="https://twitter.com/Joshua1234511">@joshua1234511</a>, </p> <p><a href="https://twitter.com/ankushgautam76">@ankushgautam76</a>, <a href="https://twitter.com/meenakshig489">@meenakshig489</a>, <a href="https://twitter.com/sonvir249">@sonvir249</a>, </p> <p><a href="https://twitter.com/abhisekmajumdar">@abhisekmajumdar</a>, <a href="https://twitter.com/forhemant">@forhemant</a>, <a href="https://twitter.com/dipakmdhrm">@dipakmdhrm</a>, </p> <p><a href="https://twitter.com/malavya88">@malavya88</a>, <a href="https://twitter.com/nitesh624">@nitesh624</a>, <a href="https://twitter.com/durgesh29">@durgesh29</a>, <a href="https://twitter.com/subson">@subson</a>, </p> <p><a href="https://twitter.com/iampratik_dk">@iampratik_dk</a>, <a href="https://twitter.com/vaibhavjain_in">@vaibhavjain_in</a>, <a href="https://twitter.com/heykarthikwithu">@heykarthikwithu</a>. </p> <p>In the end, this would never have been possible without all you contributors who supported the event with writing patches, reviewing/testing them,  showing up to the event motivating all organizers. We hope for your continued participation over the coming Sprints.</p> <h3>My experience</h3> <p>Overall, it was a very productive day! I really enjoyed this new experience of contributing from the comfort of my home and it was also a much-welcomed distraction from the grim time we all have been having because of the current pandemic. I appreciate the opportunity to work with everyone from the community and would love to do it again soon.</p> <p>Oh yes! That reminds me of something! Guess what? We already have another contribution weekend planned for next month! It's planned for <strong>May 16th</strong> and I would love to see and work with the community again. Read more about the event here: <a href="https://groups.drupal.org/node/535887">https://groups.drupal.org/node/535887</a>.</p> <p>See you all again on <strong>16th next month</strong>.</p> <p>Until then, stay safe!</p> </div> </div> <span rel="schema:author" class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/user/2507" typeof="schema:Person" property="schema:name" datatype="">Dipak Yadav</span></span> <span property="schema:dateCreated" content="2020-04-18T11:12:10+00:00" class="field field--name-created field--type-created field--label-hidden">Sat, 04/18/2020 - 16:42</span> Sat, 18 Apr 2020 11:12:10 +0000 Dipak Yadav 350 at https://www.qed42.com A preview of the breaking changes in Drupal 9 https://www.qed42.com/blog/preview-breaking-changes-drupal-9 <span property="schema:name" class="field field--name-title field--type-string field--label-hidden">A preview of the breaking changes in Drupal 9</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-above"> <div class="field__label">Body</div> <div property="schema:text" class="field__item"><p>Drupal 9 is scheduled to be released on June 03, 2020. This is when the final Drupal 8 minor release 8.9 will also be released. Considering the history of previous Drupal major upgrades, Drupal 9 will relatively be smooth. Thanks to the semantic versioning introduced in Drupal 8. The upgrade to Drupal 9 will just be another minor upgrade with deprecated code removed. Drupal 8 has brought a lot of standardization in the Drupal world, thus allowing Drupal as a project to grow incrementally. </p> <p>To put it in simple terms, Drupal 9 contains the same code as of 8.9 + deprecated code removed. Here’s a reference image from the Drupal 9 <a href="https://www.drupal.org/docs/9">documentation</a>.</p> <p dir="ltr"><img alt="Drupal 9" data-entity-type="file" data-entity-uuid="3d3be3e5-ac2f-4240-87b3-78a01ba8e77c" height="289" src="/sites/default/files/inline-images/Drupal%208.9%20to%20Drupal%209%20blog%20image.png" width="629" /></p> <p dir="ltr">That is if you reduce Drupal 9 from the last Drupal 8 version (8.8.x) the rest is just the deprecated code and dependency upgrades. </p> <p>However, upgrading all the underlying dependencies and removing all deprecated API is a challenging task. Contributors around the world are working hard to get this done especially when the world is facing an epidemic. This is a challenging time for the entire world, yet Drupal contributors have shown their love towards Drupal and are helping it advance to the next release.</p> <p>This article highlights some of the system requirements, the new dependencies and some of the most commonly used APIs which are going to be removed in 9.0.0.</p> <h4>Let us expedite Drupal’s journey to its 9th version!</h4> <h3>| Third-party dependency updates</h3> <ul> <li dir="ltr"> <p dir="ltr">Upgraded Symfony from 3 to 4.4</p> </li> <li dir="ltr"> <p dir="ltr">Upgraded Twig from 1 to 2</p> </li> <li dir="ltr"> <p dir="ltr">Upgraded CKEditor from 4 and 5</p> </li> <li dir="ltr"> <p dir="ltr">Upgraded PHPUnit from 6 to 7</p> </li> <li dir="ltr"> <p dir="ltr">Upgraded Guzzle from 6.3 to 6.5.2</p> </li> <li dir="ltr"> <p dir="ltr">Popper.js updated to version 2.0.6</p> </li> </ul> <h3 dir="ltr">| System requirement updates</h3> <ul dir="ltr"> <li role="presentation">Apache, at least version 2.4.7</li> <li role="presentation">PHP - at least 7.3. (PHP 7.4 also supported)</li> <li role="presentation">Database: MySQL (5.7.8), MariaDB (10.2.7), SQLite (3.26), PostgreSQL (10)</li> </ul> <h3 dir="ltr">| Modules being removed in D9</h3> <ul> <li dir="ltr"> <p dir="ltr">Block_place</p> </li> <li dir="ltr"> <p dir="ltr">Entityreference</p> </li> <li dir="ltr"> <p dir="ltr">Field_layout -&gt; Replaced by Layout Builder.</p> </li> <li dir="ltr"> <p dir="ltr">SimpleTest module has been moved to contrib</p> </li> <li dir="ltr"> <p dir="ltr">Action renamed to action UI</p> </li> </ul> <h3 dir="ltr">| New features in Drupal 9</h3> <p dir="ltr">Drupal 9 will have the same new features as of Drupal 8.9. Thus, Drupal 9.0 will not include new features. But Drupal 9.1 will continue to receive new features as it did for the minor D8 releases.</p> <h3 dir="ltr">| Breaking APIs</h3> <p dir="ltr">Following is a list of major APIs which were deprecated in Drupal 8 and will be removed in Drupal 9.0.0. That means if your code contains any of these codes, they need to be replaced before upgrading to Drupal 9. This list is not exhaustive and has been curated by scanning Drupal core codebase for deprecated warnings and sorted according to the usage of these APIs in contributed projects as given <a href="https://dev.acquia.com/drupal9/deprecation_status/errors">Drupal 9 Deprecation Status</a> by Acquia.</p> <ul> <li> <h4>drupal_set_message() removed</h4> </li> </ul> <p><em><a href="https://www.drupal.org/node/2774931">change record</a></em></p> <pre> <code class="language-twig">drupal_set_message(), drupal_get_message() functions removed. Recommendation:  Use messenger service  Example:  \Drupal::service('messenger')-&gt;addMessage('Hello world');</code></pre> <p> </p> <ul dir="ltr"> <li> <h4 dir="ltr">Drupal::entityManager() removed</h4> </li> </ul> <p><em><a href="https://www.drupal.org/node/2549139">change record</a></em></p> <pre> <code class="language-twig">EntityManager has been split into 11 classes. Recommendation:  Services like entity_type.manager, entity_type.repository, entity_display.repository etc to be used instead. See change records for more info. Example:  \Drupal::entityTypeManager()-&gt;getStorage('node')-&gt;load(1);</code></pre> <p> </p> <ul dir="ltr"> <li> <h4 dir="ltr">db_*() functions removed</h4> </li> </ul> <p dir="ltr"><em><a href="https://www.drupal.org/node/2993033">change record</a></em></p> <pre> <code class="language-twig">All of the db_* procedural functions part of the Database API layer have been deprecated. Recommendation:  Obtain the database connection object and execute operations on it. See change records for more info. Example:  $injected_database-&gt;query($query, $args, $options); $injected_database-&gt;select($table, $alias, $options);</code></pre> <ul dir="ltr"> <li> <h4 dir="ltr">drupal_render() removed</h4> </li> </ul> <p dir="ltr"><em><a href="https://www.drupal.org/node/2912696">change record</a></em></p> <pre> <code class="language-twig">drupal_render() and drupal_render_root()  functions Recommendation:  Use renderer service Example:  \Drupal::service('renderer')-&gt;render($elements,$is_recursive_call);</code></pre> <ul dir="ltr"> <li> <h4>Methods for generating URLs and links deprecated</h4> </li> </ul> <p><em><a href="https://www.drupal.org/node/2614344">change record</a></em></p> <pre> <code class="language-twig">Drupal::l(), Drupal::url(), Drupal::linkinfo() etc and many methods for generating URL &amp; links are removed Recommendation:  See example.  Example:  EntityInterface::toLink(); EntityInterface::toUrl();</code></pre> <ul dir="ltr"> <li> <h4 dir="ltr">File functions removed</h4> </li> </ul> <p dir="ltr"><em><a href="https://www.drupal.org/node/3006851">change record</a></em></p> <pre> <code class="language-twig">file_unmanaged_copy() file_unmanaged_prepare() file_unmanaged_move() file_unmanaged_delete() file_unmanaged_delete_recursive() file_unmanaged_save_data() file_prepare_directory() file_destination() file_create_filename() Recommendation:  Use file_system service  Example:  \Drupal::service('file_system')-&gt;copy($source, $destination, $replace); \Drupal::service('file_system')-&gt;move($source, $destination, $replace); \Drupal::service('file_system')-&gt;delete($path); </code></pre> <ul> <li> <h4>Loading of entities removed</h4> </li> </ul> <p><em><a href="https://www.drupal.org/node/2266845">change record</a></em></p> <pre> <code class="language-twig">node_load(), entity_load(), file_load() etc removed. Recommendation:  Use entity_type.manager service to get specific entity storage and then use the respective load functions Example:  use \Drupal\node\Entity\Node; $node = Node::load(1); or $file = \Drupal::entityTypeManager()-&gt;getStorage('file')-&gt;load(1);</code></pre> <ul> <li> <h4>Functions to view entities are deprecated</h4> </li> </ul> <p><em><a href="https://www.drupal.org/node/3033656">change record</a></em></p> <pre> <code class="language-twig">entity_view(), entity_view_multiple(), comment_view() etc removed. Recommendation:  Use entity view builder handler Example:  $builder = \Drupal::entityTypeManager()-&gt;getViewBuilder('node');  $build = $builder-&gt;view($node, 'teaser');</code></pre> <ul dir="ltr"> <li> <h4 dir="ltr">Date formats API changes</h4> </li> </ul> <p dir="ltr">Some of the functions and hooks removed (<em><a href="https://www.drupal.org/node/1876852">change record</a></em>)</p> <pre> <code class="language-twig">format_date() hook_date_formats() hook_date_formats_alter() system_get_date_format() system_get_date_format() etc. Recommendation:  Use date.formatter service  Example:  \Drupal::service('date.formatter')-&gt;format()</code></pre> <ul> <li> <h4>Unicode::* methods removed</h4> </li> </ul> <p dir="ltr">Following functions removed (<em><a href="https://www.drupal.org/node/2850048">change record</a></em>)</p> <pre> <code class="language-twig">Unicode::strlen() Unicode::strtoupper() Unicode::strtolower() Unicode::substr() Unicode::strpos() Recommendation:  Use mb_* functions   Example:  mb_strlen();</code></pre> <ul dir="ltr"> <li> <h4 dir="ltr">Functions retrieving extensions info removed</h4> </li> </ul> <p dir="ltr"><em><a href="https://www.drupal.org/node/2709919">change record</a></em></p> <pre> <code class="language-twig">_system_rebuild_module_data(), system_get_info() etc are removed Recommendation:  Use extension.list.module, extension.list.profile and extension.list.theme services Example:  \Drupal::service('extension.list.module')-&gt;getAllInstalledInfo(); \Drupal::service('extension.list.theme')-&gt;getAllInstalledInfo(); </code></pre> <ul dir="ltr"> <li> <h4 dir="ltr">drupal_get_user_timezone() removed</h4> </li> </ul> <p dir="ltr"><em><a href="https://www.drupal.org/node/3009387">change record</a></em></p> <pre> <code>drupal_get_user_timezone() function removed. Recommendation:  Replaced with an event listener which updates the default timezone Example:  date_default_timezone_get();</code></pre> <ul> <li> <h4>SafeMarkup methods are removed</h4> </li> </ul> <p><em><a href="https://www.drupal.org/node/2549395">change record</a></em></p> <pre> <code>SafeMarkup::checkPlain() SafeMarkup::format() etc removed. Recommendation:  See change record for replacements  Example:  Html::escape();</code></pre> <h3 dir="ltr">| More Changes/Updates</h3> <ul> <li dir="ltr"> <p dir="ltr">Drupal core themes no longer extend Classy. <a href="https://www.drupal.org/node/3103178">Read more</a></p> </li> <li dir="ltr"> <p dir="ltr">Drupal core themes, Bartik, Claro, Seven, and Umami no longer depend on Stable.</p> </li> <li dir="ltr"> <p dir="ltr">New Stable theme for D9, recommended new themes to be built on new D9 stable theme. Old D8 stable to be removed from core and be moved to a contributed project before D10.</p> </li> <li dir="ltr"> <p dir="ltr">A new administration theme, Claro (<a href="https://www.drupal.org/project/ideas/issues/3088378">targeted for inclusion in Drupal 9.1)</a></p> </li> <li dir="ltr"> <p dir="ltr">Drupal 9 won't be able to run updates from 8.7.x or earlier databases anymore, it is necessary for all new updates added to the code base to be tested from a Drupal 8.8.x starting point. <a href="https://www.drupal.org/node/3098322">Read more</a></p> </li> <li dir="ltr"> <p dir="ltr">Changes to how HTML Elements are inserted via AJAX commands. <a href="https://www.drupal.org/node/2940704">Read more</a></p> </li> <li dir="ltr"> <p dir="ltr">ZendFramework/* packages have been updated to their Laminas equivalents. <a href="https://www.drupal.org/project/drupal/issues/3104015">Read more</a></p> </li> <li dir="ltr"> <p dir="ltr">PhantonJS based testing removed. <a href="https://www.drupal.org/project/drupal/issues/3088688">Read more</a></p> </li> <li dir="ltr"> <p dir="ltr">The jQuery UI asset libraries not in use by Drupal core have been marked deprecated and have been removed from core in Drupal 9.</p> </li> <li dir="ltr"> <p dir="ltr">Drupal 9 will continue to depend on CKEditor 4 and jQuery 3.4.</p> </li> <li dir="ltr"> <p dir="ltr">Modules to be compatible with Drupal 8 and 9 at the same time and to support semantic versioning for contributed projects</p> </li> <li dir="ltr"> <p dir="ltr">jquery.cookie has been replaced with js-cookie version 2. </p> </li> </ul> <h3>| Conclusion</h3> <p dir="ltr">At this point, 9.0.0-beta2 is released, which means the code for 9.0.0 is stable and is ready for testing by end-users. Now is a good time to test upgrade your existing D8 sites to the latest version of 9.  If you have contributed a project in drupal.org, it is also a good time to check your extensions for <a href="https://www.drupal.org/about/strategic-initiatives/drupal9">D9 readiness</a>. There are <a href="https://www.drupal.org/docs/9/how-to-prepare-your-drupal-7-or-8-site-for-drupal-9/deprecation-checking-and-correction-tools">several tools</a> which can speed up this process of making your extensions compatible with D9.</p> <p data-stringify-type="pre">Have questions about how Drupal 9 will impact your site? We are here to help. Check out our <a href="https://www.qed42.com/services/drupal-development">Drupal Services</a> or send us an email at business@qed42.com! </p> <h4>| Important References</h4> <ul dir="ltr"> <li><a href="https://www.drupal.org/docs/9">Drupal 9 documentation</a></li> <li><a href="https://dev.acquia.com/drupal9/deprecation_status/">Drupal 9 Deprecation Status</a></li> <li><a href="https://www.drupal.org/docs/9/how-to-prepare-your-drupal-7-or-8-site-for-drupal-9">How to prepare your Drupal 7 or 8 sites for Drupal 9</a></li> <li><a href="https://www.drupal.org/project/drupal/issues/3007300">[META] Release Drupal 9 on June 3 2020</a></li> <li><a href="https://api.drupal.org/api/drupal/deprecated">Search for Deprecated code</a></li> <li><a href="http://hojtsy.hu/blog/2020-mar-16/whole-new-version-open-source-state-drupal-9-slideshow-present-it-yourself">“State of Drupal 9” slideshow by Gábor Hojtsy</a></li> </ul> <p>If you see any discrepancies in the information provided above, please let us know.</p> <p>Thanks!</p> </div> </div> <span rel="schema:author" class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/user/311" typeof="schema:Person" property="schema:name" datatype="">Jaideep Kandari</span></span> <span property="schema:dateCreated" content="2020-04-10T07:44:10+00:00" class="field field--name-created field--type-created field--label-hidden">Fri, 04/10/2020 - 13:14</span> Fri, 10 Apr 2020 07:44:10 +0000 Jaideep Kandari 343 at https://www.qed42.com Google Assistant Integration with Drupal https://www.qed42.com/blog/google-assistant-drupal-integration <span property="schema:name" class="field field--name-title field--type-string field--label-hidden">Google Assistant Integration with Drupal</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-above"> <div class="field__label">Body</div> <div property="schema:text" class="field__item"><h3>The Rise of Assistants</h3> <p>In last couple of years we have seen the rise of assistants, AI is enabling our lives more and more and with help of devices like Google Home and Amazon Echo, its now entering our living rooms and changing how we interact with technology. Though Assistants have been around for couple of years through android google home app, the UX is changing rapidly with home devices where now we are experiencing Conversational UI i.e. being able to talk to devices, no more typing/searching, you can now converse with your device and book a cab or play your favourite music. Though the verdict on home devices like Echo and Google home is pending, the underlying technology i.e. AI based assistants are here to stay.</p> <p>In this post, we will explore Google Assistant Developer framework and how we can integrate it with Drupal.</p> <img alt="Google Assistant Overview" data-entity-type="file" data-entity-uuid="945eda54-fb1f-4d40-b200-db777a7a6640" src="/sites/default/files/inline-images/1_2.jpg" class="align-center" /> <p><br /> Google Assistant works with help of Apps that define actions which in turn invokes operations to be performed on our product and services. These apps are registered with <a href="https://developers.google.com/actions/">Actions on Google</a>, which basically is a platform comprising of Apps and hence connecting different products and services via Apps. Unlike traditional mobile or desktop apps, users interact with Assistant apps through a conversation, natural-sounding back and forth exchanges (voice or text) and not traditional Click and Touch paradigms. </p> <p>The first step in the flow is understanding use requests through actions, so lets learn more about it. </p> <h2 dir="ltr"><b id="docs-internal-guid-4d255021-079f-4903-3945-1952985e6939">How Action on Google works with the Assistant?</b></h2> <p class="text-align-justify" dir="ltr">It is very important to understand how actually actions on Google work with the assistant to have an overview of the workflow. From the development perspective, it's crucial we understand the whole of the Google Assistant and Google Action model in total, so that extending the same becomes easier.</p> <p class="text-align-justify" dir="ltr"> </p> <img alt="Actions on Google" data-entity-type="file" data-entity-uuid="3a5536e9-e9a6-4596-a8ec-46c3f1667db5" src="/sites/default/files/inline-images/2_0.jpg" class="align-center" /> <p dir="ltr"> </p> <p class="text-align-justify" dir="ltr">It all starts with User requesting an action, followed by Google Assistant invoking best corresponding APP using Actions on Google. Now, it's the duty of Actions on Google to contact APP by sending a request. The app must be prepared to handle the request, perform the corresponding action and send a valid response to the Actions on Google which is then passed to Google Assistant. Google Assistant renders the response in its UI and displays it to the user and conversation begins.</p> <p class="text-align-justify" dir="ltr">Lets build our own action, following tools are required:</p> <ul> <li class="text-align-justify">Ngrok - Local web server supporting HTTPS. </li> <li class="text-align-justify" dir="ltr">Editor - Sublime/PHPStorm</li> <li class="text-align-justify" dir="ltr">Google Pixel 2 - Just kidding! Although you can order 1 for me :p</li> <li class="text-align-justify" dir="ltr">Bit of patience and 100% attention</li> </ul> <h2 dir="ltr">STEP1: BUILD YOUR ACTION APP</h2> <p class="text-align-justify">Very first step now is building our Actions on Google APP. Google provides 3 ways to accomplish this:</p> <ol> <li class="text-align-justify" dir="ltr"><strong>With Templates</strong></li> <li class="text-align-justify" dir="ltr"><strong>With Dialogflow</strong></li> <li class="text-align-justify" dir="ltr"><strong>With Actions SDK</strong></li> </ol> <p class="text-align-justify">Main purpose of this app would be <strong>matching user request with an action</strong>. For now, we would be going with Dialogflow (for beginner convenience). To develop with Dialogflow, we first need to create an Actions on Google developer project and a Dialogflow agent. Having a project allows us to access the developer console to manage and distribute our app.</p> <ol> <li class="text-align-justify" dir="ltr">Go to the <a href="https://console.actions.google.com/">Actions on Google Developer Console</a>.</li> <li class="text-align-justify" dir="ltr">Click on Add Project, enter YourAppName for the project name, and click Create Project.</li> <li class="text-align-justify" dir="ltr">In the Overview screen, click BUILD on the Dialogflow card and then CREATE ACTIONS ON Dialogflow to start building actions.</li> <li class="text-align-justify" dir="ltr">The Dialogflow console appears with information automatically populated in an agent. Click Save to save the agent.</li> </ol> <p class="text-align-justify" dir="ltr">Post saving an agent, we start improving/developing our agent. We can consider this step as training of our newly created Agent via some training data set. These structured training data sets referred here are intents. An individual Intent comprises of query patterns that a user may ask to perform an action, events and actions associated with this particular intent which together define a purpose user want to fulfill. So, every task user wants Assistant to perform is actually mapped with an intent. Events and Actions can be considered as a definitive representation of the actual associated event and task that needs to be performed which will be used by our products and services to understand what the end user is asking for.</p> <p class="text-align-justify" dir="ltr">So, here we define all the intents that define our app. Let's start with creating an intent to do cache rebuild.</p> <ol> <li class="text-align-justify" dir="ltr">Create a new intent with name CACHE-REBUILD.</li> <li class="text-align-justify" dir="ltr">We need to add query patterns we can think of, that user might say to invoke this intent. (Query Patterns may content parameters too, we will cover this later.)</li> <li class="text-align-justify" dir="ltr">Add event cache-rebuild.</li> <li class="text-align-justify" dir="ltr">Save the intent.</li> </ol> <img alt="Intent Google Actions" data-entity-type="file" data-entity-uuid="5a089db2-ab2c-49af-be2b-cc7a9f5576c7" height="400" src="/sites/default/files/inline-images/3_2.png" width="600" class="align-center" /> <p> </p> <p class="text-align-justify" dir="ltr">For now, this is enough to just understand the flow, we will focus on entities and other aspects later. To verify if the intent you have created gets invoked if user says “do cache rebuild”, use “Try it now” present in the right side of the Dialogflow window.</p> <h2 dir="ltr">STEP2: BUILD FULFILLMENT</h2> <p class="text-align-justify">After we are done with defining action in dialogflow, we now need to prepare our product (Drupal App) to fulfill the user request. So, basically after understanding user request and matching that with an intent and action Actions on Google is now going to invoke our Drupal App in one or the other way . This is accomplished using WEBHOOKS. So, Google is now going to send a post request with all the details. Under Fulfillment tab, we configure our webhook. We need to ensure that our web service fulfills <a href="https://dialogflow.com/docs/fulfillment">webhook requirements</a>.</p> <p class="text-align-justify" dir="ltr">According to this, the web service must use HTTPS and the URL must be publicly accessible and hence we need to install <a href="https://ngrok.com/docs/2#expose">NGROK</a>. Ngrok exposes local web server to the internet.</p> <img alt="NGROK" data-entity-type="file" data-entity-uuid="8c4a288b-aebe-48a4-b899-ceda34385475" height="400" src="/sites/default/files/inline-images/4_0.png" width="600" class="align-center" /> <p> </p> <p class="text-align-justify" dir="ltr">After having a publicly accessible URL, we just need to add this URL under fulfillment tab. As this URL will receive post request and processing will be done thereafter, so we need to add that URL where we are gonna handle requests just like endpoints. (It may be like http://yourlocalsite.ngrok.io/google-assistant-request)</p> <img alt="add webhook url" data-entity-type="file" data-entity-uuid="dbcb2be3-2f4a-4cb9-80ee-d7aa5eed01bd" height="400" src="/sites/default/files/inline-images/5_1.png" width="600" class="align-center" /> <p> </p> <p class="text-align-justify">Now, we need to build corresponding fulfillment to process the intent.</p> <p class="text-align-justify">OK! It seems simple we just need to create a custom module with a route and a controller to handle the request. Indeed it is simple, only important point is understanding the flow which we understood above.</p> <p class="text-align-justify">So, why are we waiting? Let’s start.</p> <p class="text-align-justify"><strong>Create a custom module and a routing file:</strong></p> <pre> <code class="language-yaml">droogle.default_controller_handleRequest:  path: '/google-assistant-request'  defaults:    _controller: '\Drupal\droogle\Controller\DefaultController::handleRequest'    _title: 'Handle Request'  requirements:    _access: TRUE</code></pre> <p dir="ltr"><strong>Now, let’s add the corresponding controller</strong></p> <pre> <code class="language-php">&lt;?php namespace Drupal\droogle\Controller; use Drupal\Core\Controller\ControllerBase; use Drupal\Core\Logger\LoggerChannelFactoryInterface; use Symfony\Component\DependencyInjection\ContainerInterface; use Symfony\Component\HttpFoundation\JsonResponse; use Symfony\Component\HttpFoundation\RequestStack; /** * Class DefaultController. */ class DefaultController extends ControllerBase {  /**   * Symfony\Component\HttpFoundation\RequestStack definition.   *   * @var \Symfony\Component\HttpFoundation\RequestStack   */  protected $requestStack;  /**   * The logger factory.   *   * @var \Drupal\Core\Logger\LoggerChannelFactoryInterface   */  protected $loggerFactory;  /**   * Constructs a new DefaultController object.   */  public function __construct(RequestStack $request_stack, LoggerChannelFactoryInterface $loggerFactory) {    $this-&gt;requestStack = $request_stack;    $this-&gt;loggerFactory = $loggerFactory;  }  /**   * {@inheritdoc}   */  public static function create(ContainerInterface $container) {    return new static(      $container-&gt;get('request_stack'),      $container-&gt;get('logger.factory')    );  }  /**   * Handlerequest.   *   * @return mixed   *   Return Hello string.   */  public function handleRequest() {    $this-&gt;loggerFactory-&gt;get('droogle')-&gt;info('droogle triggered');    $this-&gt;processRequest();    $data = [      'speech' =&gt; 'Cache Rebuild Completed for the Site',      'displayText' =&gt; 'Cache Rebuild Completed',      'data' =&gt; '',      'contextOut' =&gt; [],      'source' =&gt; 'uniworld',    ];    return JsonResponse::create($data, 200);  }  protected function processRequest() {    $params = $this-&gt;requestStack-&gt;getCurrentRequest();    // Here we will process the request to get intent    // and fulfill the action.  } }</code></pre> <p class="text-align-justify" dir="ltr">Done! We are ready with a request handler to process the request that will be made by Google Assistant.</p> <p class="text-align-justify"> </p> <h2 dir="ltr"><b id="docs-internal-guid-4d255021-079f-c72b-d9eb-d223ef43059c">STEP3: DEPLOY FULFILLMENT AND TESTING THE APP</b></h2> <p class="text-align-justify" dir="ltr">Part of the deployment has already been done, as we are developing on our local only. Now, we need to enable our custom module. Post that let's get back to dialogflow and establish the connection with app to test this. Earlier we had configured fulfillment URL details, ensure we have enabled webhook for all domains.</p> <img alt="deployment" data-entity-type="file" data-entity-uuid="237771fd-72c6-41df-8427-668b70d254f7" height="300" src="/sites/default/files/inline-images/6_0.png" width="600" class="align-center" /> <p class="text-align-justify"> </p> <p class="text-align-justify" dir="ltr">Let’s get back to intent that we build and enable webhook there too and save the intent.</p> <img alt="intent enable webhook" data-entity-type="file" data-entity-uuid="b60ed51a-1e54-4e07-9ccd-f74638e66c41" height="300" src="/sites/default/files/inline-images/7_0.png" width="600" class="align-center" /> <p> </p> <p class="text-align-justify">Now, to test this we need to integrate it any of the device or live/sandbox app. Under Integrations tab, google provides several options for this too. Enable for Web Demo and open the URL in new tab, to test this:</p> <img alt="Integration Web Demo" data-entity-type="file" data-entity-uuid="6271f662-1301-4615-9c50-d34ae1ca9ec9" height="300" src="/sites/default/files/inline-images/8_0.png" width="300" class="align-center" /> <p> </p> <p class="text-align-justify">Speak up and test your newly build APP and let Google Assistant do its work.</p> <p class="text-align-justify">So, as seen in the screenshot, there can be 2 type of responses. First, where our server is not able to handle request properly and the second one where Drupal server sends a valid JSON response.</p> <p class="text-align-justify"><em><strong>GREAT! </strong></em>Connection is now established, you can now add intents in Google Action APP and correspondingly handle that intent and action at Drupal End. This is just a taste, conversational UX and Assistant technology will definitely impact how we interact with technology and we believe Drupal has a great role to play as a robust backend.</p> </div> </div> <span rel="schema:author" class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/user/18" typeof="schema:Person" property="schema:name" datatype="">Purushotam Rai</span></span> <span property="schema:dateCreated" content="2017-12-06T15:22:00+00:00" class="field field--name-created field--type-created field--label-hidden">Wed, 12/06/2017 - 20:52</span> Wed, 06 Dec 2017 15:22:00 +0000 Purushotam Rai 180 at https://www.qed42.com REST API Explorations in Drupal 8 - Primer https://www.qed42.com/blog/restful-drupal-primer <span property="schema:name" class="field field--name-title field--type-string field--label-hidden">REST API Explorations in Drupal 8 - Primer</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-above"> <div class="field__label">Body</div> <div property="schema:text" class="field__item"><p dir="ltr">This article assumes you are familiar with what <a href="https://en.wikipedia.org/wiki/Representational_state_transfer">RESTful</a> is &amp; what do we mean when we use the term <a href="http://mark-kirby.co.uk/2013/creating-a-true-rest-api/">REST API</a>. Some of you might have already worked with <a href="https://www.drupal.org/project/restws">RESTful Web Services</a> module in D7, it exposes all entity types as web services using REST architecture. Drupal 8 out of the box is RESTful with core support. All entities (provided by core + ones created using Entity API) are RESTful resources.</p> <p dir="ltr">To explore the RESTful nature of Drupal 8, we will need to enable the following modules:</p> <h4 dir="ltr">In Core</h4> <ul> <li dir="ltr">HAL - Serializes entities using Hypertext Application Language.</li> <li dir="ltr">HTTP Basic Authentication - Provides the HTTP Basic authentication provider.</li> <li dir="ltr">RESTful Web Services - Exposes entities and other resources as RESTful web API</li> <li dir="ltr">Serialization - Provides a service for (de)serializing data to/from formats such as JSON and XML.</li> </ul> <h4 dir="ltr">Contributed</h4> <ul> <li dir="ltr"><a href="https://www.drupal.org/project/restui">REST UI</a> - Provides a user interface to manage REST resources.</li> </ul> <h3 dir="ltr">RESTful Resources</h3> <p dir="ltr">Every entity in D8 is a resource, which has an end point. Since, its RESTful, the same end-point is used for CRUD (Create, Read, Update, Delete) operations with different HTTP verbs. <a href="https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop?hl=en">Postman</a> is an excellent tool to explore / test RESTful services.  Drupal 8 allows you to selectively choose &amp; enable a REST API. e.g., we can choose to expose only nodes via a REST API &amp; not other entities like users, taxonomy, comments etc.</p> <p dir="ltr">After enabling REST_UI module we can see list of all RESTful resources at /admin/config/services/rest. In addition to ability to choose the entity one can enable, we can also choose the authentication method per resource &amp; enable specific CRUD operations per resource.</p> <p><img alt="Resource Settings" class="align-center" data-entity-type="file" data-entity-uuid="999098fe-e8eb-46d3-999d-30daa72620fe" src="/sites/default/files/inline-images/Resource%20Settings.png" /></p> <p dir="ltr">Let us take a look at what the REST APIs for User entity would be after we save the configuration in the above screenshot.</p> <h4 dir="ltr">User</h4> <p dir="ltr"><strong>POST</strong></p> <pre> <code class="cs hljs ">http:<span class="hljs-comment">//domain.com/entity/user?_format=hal_json</span></code></pre> <pre> <code class="language-json hljs ">{  "<span class="hljs-attribute">_links</span>": <span class="hljs-value">{    "<span class="hljs-attribute">type</span>": <span class="hljs-value">{      "<span class="hljs-attribute">href</span>": <span class="hljs-value"><span class="hljs-string">"http://domain.com/rest/type/user/user"</span>    </span>}  </span>}</span>,  "<span class="hljs-attribute">name</span>": <span class="hljs-value">{    "<span class="hljs-attribute">value</span>":<span class="hljs-value"><span class="hljs-string">"testuser"</span>  </span>}</span>,  "<span class="hljs-attribute">mail</span>":<span class="hljs-value">{    "<span class="hljs-attribute">value</span>":<span class="hljs-value"><span class="hljs-string">"testuser@mailserver.com"</span>  </span>}</span>,  "<span class="hljs-attribute">pass</span>":<span class="hljs-value">{    "<span class="hljs-attribute">value</span>":<span class="hljs-value"><span class="hljs-string">"testpass"</span>  </span>}</span>,  "<span class="hljs-attribute">status</span>": <span class="hljs-value">{    "<span class="hljs-attribute">value</span>": <span class="hljs-value"><span class="hljs-number">1</span>  </span>} </span>}</code></pre> <p dir="ltr"><strong>Header</strong></p> <pre> <code class="http hljs "><span class="hljs-attribute">X-CSRF-Token</span>: <span class="hljs-string">Get from http://domain.com/rest/session/token</span> <span class="hljs-attribute">Content-Type</span>: <span class="hljs-string">application/hal+json</span> <span class="hljs-attribute">Accept</span>: <span class="hljs-string">application/hal+json</span> <span class="hljs-attribute">Authorization</span>: <span class="hljs-string">Basic (hashed username and password)</span></code></pre> <p dir="ltr">Note: Drupal 8 doesn't allow anonymous user to send a POST on user resource. It is already fixed in 8.3.x branch but for now we can pass the credentials of the user who have permission to create users. If you are interested in taking a deeper look at the issue, you can follow <a href="https://www.drupal.org/node/2291055">https://www.drupal.org/node/2291055</a>.</p> <p dir="ltr"><strong>Response:</strong> You will get a user object with "200 OK" response code</p> <p dir="ltr"> </p> <p dir="ltr"><strong>PATCH</strong></p> <pre> <code class="cs hljs ">http:<span class="hljs-comment">//domain.com/user/{uid}?_format=hal_json</span></code></pre> <pre> <code class="language-json hljs ">{  "<span class="hljs-attribute">_links</span>": <span class="hljs-value">{    "<span class="hljs-attribute">type</span>": <span class="hljs-value">{      "<span class="hljs-attribute">href</span>": <span class="hljs-value"><span class="hljs-string">"http://domain.com/rest/type/user/user"</span>    </span>}  </span>}</span>,  "<span class="hljs-attribute">pass</span>":<span class="hljs-value">[{"<span class="hljs-attribute">existing</span>":<span class="hljs-value"><span class="hljs-string">"testpass"</span></span>}]</span>,  "<span class="hljs-attribute">mail</span>":<span class="hljs-value">{    "<span class="hljs-attribute">value</span>":<span class="hljs-value"><span class="hljs-string">"updatedtestuser@mailserver.com"</span>  </span>} </span>}</code></pre> <p dir="ltr">Note: Now as user have permission to update his own profile so we can pass current user's credentials in authentication header.</p> <p dir="ltr"><strong>Response:</strong> You will get "204 No Content" in response code.</p> <p dir="ltr"> </p> <p dir="ltr"><strong>GET</strong></p> <pre> <code class="cs hljs ">http:<span class="hljs-comment">//domain.com/user/{uid}?_format=hal_json</span></code></pre> <p dir="ltr"><strong>Response:</strong> You will get a user object with "200 OK" response code.</p> <p dir="ltr"> </p> <p dir="ltr"><strong>DELETE</strong></p> <pre> <code class="cs hljs ">http:<span class="hljs-comment">//domain.com/user/{uid}?_format=hal_json</span></code></pre> <p dir="ltr"><strong>Response:</strong> You will get "204 No Content" in response code.</p> <h3 dir="ltr">RESTful Views and Authentication</h3> <p dir="ltr">Drupal 8 also allows us to export views as a REST service. It allows you to use all the available authentication mechanism in views itself.</p> <h3>JSON API Module</h3> <p dir="ltr"><a href="https://www.drupal.org/project/jsonapi">JSON API</a> module provides a new format called "api_json" which is soon becoming the de-facto standard for Javascript Frontend frameworks, If you plan to use completely de-coupled Drupal with frontend framework like Angular / React / Ember then its worth a look. To read more about JSON API you can visit <a href="http://jsonapi.org/">the site</a>.</p> </div> </div> <span rel="schema:author" class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/user/22" typeof="schema:Person" property="schema:name" datatype="">Sumit Madan</span></span> <span property="schema:dateCreated" content="2016-11-28T10:26:41+00:00" class="field field--name-created field--type-created field--label-hidden">Mon, 11/28/2016 - 15:56</span> Mon, 28 Nov 2016 10:26:41 +0000 Sumit Madan 164 at https://www.qed42.com Implementing #autocomplete in Drupal 8 with Custom Callbacks https://www.qed42.com/blog/autocomplete-drupal-8 <span property="schema:name" class="field field--name-title field--type-string field--label-hidden">Implementing #autocomplete in Drupal 8 with Custom Callbacks</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-above"> <div class="field__label">Body</div> <div property="schema:text" class="field__item"><p>Autocomplete on textfields like tags / user &amp; node reference helps improve the UX and interactivity for your site visitors, In this blog post I'd like to cover how to implement autocomplete functionality in Drupal 8, including implementing a custom callback</p> <h3>Step 1: Assign autocomplete properties to textfield</h3> <p>As per Drupal Change records, #autocomplete_path has been replaced by #autocomplete_route_name and #autocomplete_parameters for autocomplete fields ( More details -- <a href="https://www.drupal.org/node/2070985">https://www.drupal.org/node/2070985</a>).</p> <p>The very first step is to assign appropriate properties to the textfield:</p> <ol> <li>'<strong>#autocomplete_route_name</strong>':<br /> for passing route name of callback URL to be used by autocomplete Javascript Library.</li> <li>'<strong>#autocomplete_route_parameters':</strong><br /> for passing array of arguments to be passed to autocomplete handler.</li> </ol> <pre> <code class="language-php">$form['name'] = array( '#type' =&gt; 'textfield', '#autocomplete_route_name' =&gt; 'my_module.autocomplete', '#autocomplete_route_parameters' =&gt; array('field_name' =&gt; 'name', 'count' =&gt; 10), );</code></pre> <p>Thats all! for adding an #autocomplete callback to a textfield. </p> <p><strong>However</strong>, there might be cases where the routes provided by core might not suffice as we might different response in JSON or additional data. Lets take a look at how to write a autocomplete callback, we will be using using my_module.autocomplete route and will pass arguments: 'name' as field_name and 10 as count.</p> <h3>Step 2: Define autocomplete route</h3> <p>Now, add the 'my_module.autocomplete' route in <strong>my_module.routing.</strong><strong>yml</strong> file as:</p> <pre> <code class="language-yaml">my_module.autocomplete: path: '/my-module-autocomplete/{field_name}/{count}' defaults: _controller: '\Drupal\my_module\Controller\AutocompleteController::handleAutocomplete' _format: json requirements: _access: 'TRUE' </code></pre> <p>While Passing parameters to controller, use the same names in curly braces, which were used while defining the autocomplete_route_parameters. Defining _format as json is a good practise.</p> <h3>Step 3: Add Controller and return JSON response</h3> <p>Finally, we need to generate the JSON response for our field element. So, proceeding further we would be creating AutoCompleteController class file at <strong>my_module &gt; src &gt; Controller &gt; AutocompleteController.php</strong>.</p> <pre> <code class="language-php">&lt;?php namespace Drupal\my_module\Controller; use Drupal\Core\Controller\ControllerBase; use Symfony\Component\HttpFoundation\JsonResponse; use Symfony\Component\HttpFoundation\Request; use Drupal\Component\Utility\Tags; use Drupal\Component\Utility\Unicode; /** * Defines a route controller for entity autocomplete form elements. */ class AutocompleteController extends ControllerBase { /** * Handler for autocomplete request. */ public function handleAutocomplete(Request $request, $field_name, $count) { $results = []; // Get the typed string from the URL, if it exists. if ($input = $request-&gt;query-&gt;get('q')) { $typed_string = Tags::explode($input); $typed_string = Unicode::strtolower(array_pop($typed_string)); // @todo: Apply logic for generating results based on typed_string and other // arguments passed. for ($i = 0; $i &lt; $count; $i++) { $results[] = [ 'value' =&gt; $field_name . '_' . $i . '(' . $i . ')', 'label' =&gt; $field_name . ' ' . $i, ]; } } return new JsonResponse($results); } } </code></pre> <p>We would be extending ControllerBase class and would then define our handler method, which will return results. Parameters for the handler would be Request object and arguments (field_name and count) passed in routing.yml file. From the Request object, we would be getting the typed string from the URL. Besides, we do have other route parameters (field_name and Count) on the basis of which we can generate the results array. </p> <p>An important point to be noticed here is, we need the <strong>results array to have data in 'value' and 'label' key-value pair </strong>as we have done above. Then finally we would be generating JsonResponse by creating new JsonResponse object and passing $results.</p> <p>That's all we need to make autocomplete field working. Rebuild the cache and load the form page to see results.</p> </div> </div> <span rel="schema:author" class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/user/18" typeof="schema:Person" property="schema:name" datatype="">Purushotam Rai</span></span> <span property="schema:dateCreated" content="2016-11-24T11:59:54+00:00" class="field field--name-created field--type-created field--label-hidden">Thu, 11/24/2016 - 17:29</span> Thu, 24 Nov 2016 11:59:54 +0000 Purushotam Rai 220 at https://www.qed42.com New Module - AddToCalendar Drupal Integration https://www.qed42.com/blog/add-to-calendar-module <span property="schema:name" class="field field--name-title field--type-string field--label-hidden">New Module - AddToCalendar Drupal Integration </span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-above"> <div class="field__label">Body</div> <div property="schema:text" class="field__item"><p dir="ltr">Drupal sites with events functionality, often have to allow their users to export events in their personal calendars. On a recent Drupal 8 project we were asked to integrate 3rd party service<a href="http://addtocalendar.com/"> Add to Calendar</a> to their events and having found no formal integration of the widget with Drupal we developed and contributed this module. The widget provided by Add to calendar supports export of Dates / events to iCalender, Google Calendar, Outlook, Outlook Online and Yahoo Calendar.</p> <img alt="add-to-calendar-blue" data-entity-type="file" data-entity-uuid="34547868-1e06-4753-abcc-934dd9fad29f" src="/sites/default/files/inline-images/Screen%20Shot%202016-10-15%20at%206.02.30%20AM.png" class="align-center" /> <h3 align="center" dir="ltr"> </h3> <h3 dir="ltr">Why use Add To Calendar Service?</h3> <ul dir="ltr"> <li>Add to Calendar Module provides a widget to export events.</li> <li>With Add to Calendar Module, you can create event button on a page and allow guests to add this event to their calendar.</li> </ul> <h3 dir="ltr">How Does Add to Calendar Module Works?</h3> <p dir="ltr">Add to Calendar Module provides third party field formatter settings for DateTime fields. Module internally uses services provided by http://addtocalendar.com to load free add to calendar button for event page on website and email. Clicking on this button, the event is exported to the corresponding website with proper information in the next tab where a user can add the event to their calendar. Besides, it provides a handful of configuration for a really flexible experience, Allowing you to use your datetime format along with Add to Calendar button.</p> <h3 dir="ltr">Using Add to Calendar</h3> <ol> <li dir="ltr"> <p class="text-align-justify" dir="ltr">Download and enable Add to Calendar module (<a href="https://www.drupal.org/project/addtocalendar">https://www.drupal.org/project/addtocalendar</a>)</p> <ul> <li> <p class="text-align-justify" dir="ltr">The module has both D8 and a backported D7 versions.</p> </li> </ul> </li> <li dir="ltr"> <p class="text-align-justify" dir="ltr">Adding Add to Calendar button to any datetime field would require enabling “Show Add to Calendar” checkbox present at format configurations on Manage Display page of the desired content type.</p> </li> </ol> <img alt="add-to-calendar-manage-display" data-entity-type="file" data-entity-uuid="a71ab33b-a826-440e-8ba9-677661b96149" src="/sites/default/files/inline-images/Screen%20Shot%202016-11-02%20at%2010.33.09%20PM.png" class="align-center" /> <p class="text-align-justify"> </p> <ol start="3"> <li dir="ltr"> <p class="text-align-justify" dir="ltr">Following configurations are available:</p> </li> </ol> <table align="center" border="1" cellpadding="1" cellspacing="1" style="width: 100%;" summary="Configuration Options"> <thead> <tr> <th class="text-align-justify" scope="col" style="width: 149px;"><strong>Option</strong></th> <th class="text-align-justify" scope="col" style="width: 509px;"><strong>Description</strong></th> </tr> </thead> <tbody> <tr> <td class="text-align-justify" style="width: 149px;">Style</td> <td class="text-align-justify" style="width: 509px;">Three basic styles are available: <strong><em>Basic, </em></strong><em><strong>Blue</strong></em><strong><em> and Glow Orange</em></strong></td> </tr> <tr> <td class="text-align-justify" style="width: 149px;">Display Text</td> <td class="text-align-justify" style="width: 509px;">Text for the display button.</td> </tr> <tr> <td class="text-align-justify" style="width: 149px;">Event Details</td> <td class="text-align-justify" style="width: 509px;">Module provides you three options here. You may opt for <strong><em>static data, tokenized value or any field value</em></strong>, specific to the current entity.</td> </tr> <tr> <td class="text-align-justify" style="width: 149px;">Privacy</td> <td class="text-align-justify" style="width: 509px;">Use public for free access to event information while private if the event is closed to public access.</td> </tr> <tr> <td class="text-align-justify" style="width: 149px;">Security Level</td> <td class="text-align-justify" style="width: 509px;">To specify whether button link should use http or https</td> </tr> <tr> <td class="text-align-justify" style="width: 149px;">Calendars to show</td> <td class="text-align-justify" style="width: 509px;">Select Calendars to be enabled for the display.</td> </tr> </tbody> </table> <p class="text-align-justify" dir="ltr">4. Save the settings and visit content display page.</p> <h3 dir="ltr">Developer Support</h3> <p dir="ltr">Devs have the option to add "Add to Calendar" button anywhere on the website by following below steps:<br /> <br /> 1. Include base library ('addtocalendar/base') for add to calendar basic functionality. Optionally, You may also one of the following style libraries for styling the display button:</p> <ul dir="ltr"> <li>'addtocalendar/blue'</li> <li>'addtocalendar/glow_orange'</li> </ul> <pre> <code class="language-php">$variables['#attached']['library'][] = 'addtocalendar/base';</code></pre> <p>2. Place event data on the page as:</p> <pre> <code class="language-php">&lt;span class="addtocalendar atc-style-blue"&gt; &lt;var class="atc_event"&gt; &lt;var class="atc_date_start"&gt;2016-05-04 12:00:00&lt;/var&gt; &lt;var class="atc_date_end"&gt;2016-05-04 18:00:00&lt;/var&gt; &lt;var class="atc_timezone"&gt;Europe/London&lt;/var&gt; &lt;var class="atc_title"&gt;Star Wars Day Party&lt;/var&gt; &lt;var class="atc_description"&gt;May the force be with you&lt;/var&gt; &lt;var class="atc_location"&gt;Tatooine&lt;/var&gt; &lt;var class="atc_organizer"&gt;Luke Skywalker&lt;/var&gt; &lt;var class="atc_organizer_email"&gt;luke@starwars.com&lt;/var&gt; &lt;/var&gt; &lt;/span&gt;</code></pre> <p class="text-align-justify" dir="ltr">For further customization of this custom button visit: <a href="http://addtocalendar.com" target="_blank">http://addtocalendar.com/</a> Event Data Options section.</p> <p class="text-align-justify" dir="ltr">3. This would create "Add to Calendar" button for your website.</p> <p class="text-align-justify" dir="ltr"> </p> </div> </div> <span rel="schema:author" class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/user/18" typeof="schema:Person" property="schema:name" datatype="">Purushotam Rai</span></span> <span property="schema:dateCreated" content="2016-11-08T18:03:26+00:00" class="field field--name-created field--type-created field--label-hidden">Tue, 11/08/2016 - 23:33</span> Tue, 08 Nov 2016 18:03:26 +0000 Purushotam Rai 221 at https://www.qed42.com New Module - CSSgram recreating Instagram like filters for Drupal 8 https://www.qed42.com/blog/new-module-cssgram-recreating-instagram-filters-drupal-8 <span property="schema:name" class="field field--name-title field--type-string field--label-hidden">New Module - CSSgram recreating Instagram like filters for Drupal 8</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-above"> <div class="field__label">Body</div> <div property="schema:text" class="field__item"><p dir="ltr">CSSgram module supplements Drupal Image styling experience by making Instagram like filters available to your Drupal 8 site images, we do this with help of CSSgram library. </p> <p class="text-align-center" dir="ltr"><strong>Beauty of this module is, it simply uses css to beautify your image. </strong></p> <img alt="cssgram-filters-sample" data-entity-type="file" data-entity-uuid="419fb440-6868-45a5-ad00-7d16d9b52fe0" src="/sites/default/files/inline-images/Screen%20Shot%202016-10-23%20at%206.58.46%20PM.png" class="align-center" /> <p class="text-align-center" dir="ltr"><strong>Few CSSGram sample filters applied to an image.</strong></p> <p> </p> <h3 dir="ltr">How CSSGram Module works?</h3> <p dir="ltr">CSSGram module uses CSSGram Library for adding filter effects via CSS to the image fields. Module extends Field Formatter Settings to add image filter for that particular field. CSSGram extends field formatter settings and hence these filters can be applied on top of the existing available image formatters and image presets. Allowing you to use your desired image preset along with CSSGram filters.<br />  </p> <h3 dir="ltr">Using CSSGram</h3> <ol> <li dir="ltr"> <p dir="ltr">Download and enable CSSGram module (<a href="https://www.drupal.org/project/cssgram">https://www.drupal.org/project/cssgram</a>)</p> </li> <li dir="ltr"> <p dir="ltr">Visit Manage Display of content type and for the desired image field, click on the setting link under format column.</p> </li> <li dir="ltr"> <p dir="ltr">Select Filter option lets us choose from the available image filters. Just select the desired image filter and hit update button.</p> </li> </ol> <img alt="third-party-settings-cssgram" data-entity-type="file" data-entity-uuid="b9dd22b2-7ab5-4938-9cf5-5229fef71ce2" src="/sites/default/files/inline-images/Screen%20Shot%202016-10-23%20at%206.51.00%20PM.png" class="align-center" /> <ol start="4"> <li dir="ltr"> <p dir="ltr">Save the settings and visit the content display page.</p> </li> </ol> <h3 dir="ltr">Developer Support</h3> <p dir="ltr">Devs have the option to use these filters anywhere on the site by just attaching the ‘cssgram/cssgram’ library and then applying any of the available css filter class to the wrapper element.</p> <pre> <code class="language-php"> function mymodule_preprocess_field(&amp;$variables) { // Add desired css class. $variables['attributes']['class'] = 'kelvin'; // Attach cssgram library. $variables['#attached']['library'][] = 'cssgram/cssgram'; }</code></pre> <p> </p> </div> </div> <span rel="schema:author" class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/user/18" typeof="schema:Person" property="schema:name" datatype="">Purushotam Rai</span></span> <span property="schema:dateCreated" content="2016-10-25T13:52:02+00:00" class="field field--name-created field--type-created field--label-hidden">Tue, 10/25/2016 - 19:22</span> Tue, 25 Oct 2016 13:52:02 +0000 Purushotam Rai 226 at https://www.qed42.com