Learn to How to Create Custom Render Elements in Drupal 9 and Drupal 8

hello everyone in this video we are going to see how to create custom render elements in drupal we have a lot of cus render elements and form elements and we can see that list by going to api dot google dot org and then you can navigate to the elements section of api navigation from this left menu and here you would see the list of all the render and form elements provided by the drupal code we have select we have number we have link label everything but i must tell you a lot of cool html tags are missing from this list so we can create render elements for those cool html tags for example i have one such example here to tell you what we are going to do so i have a html tag uh meter which is used to showcase uh the gauge value or something in a metered value here uh i'm i'm rendering it through in a drupal way through a render element so if i want to render it in a controller build block i can render it by simply providing it the type the attributes value and the required variable values if i want to change it to something like let's change it to 85 the value is 85 and it is head has changed see i do not have to do anything so i'm utilizing the cool html tag here let's create a render element for one more such cool uh uh html tag and that is going to be the progress tag uh what it does it basically represents the completion program completion progress of a task how it is going how it looks it looks something like this so if i change it to eight p two percent it is going to look something like this this is a bit different from meter uh because what because so if you if i want to represent a gorge then i must use meter otherwise i must use progress here let's create it we have talked a lot so i'm going to close it and i'll create for that and let me tell you the structure of the directory i have a module uh let me close it yeah i have a module called chdre which represents a cool html tag render elements uh here you must create an element folder inside your source folder and inside that you are going to write your class so here i'm going going to create a new file named progress php and i am going to copy the code or i have actually the code basic skeleton of class and in this here i am specifying basically the name space which is going to be drupal the name of a module an element and since this and the render element must extend renders so render elements so we are using that class here uh in the description of your render element you must provide the basic information about what it does and for example our progress tag represents the presence as i've told you the completion progress of a task so i have provided that along with some uh note and also like where we uh controller link that which can be used to see how it looks on the front and uh it is very simple actually like it is a plug-in implementation of so it is it is a plug-in type like any other plug-in type we specify uh the render element with add the rate tag and inside that we specify the id of the render element and this is the same id which we are going to use for the type property sorry type property of our render ml so if you would have seen any form okay let me open any form familiar form element x [Music] yeah let's open this uh okay so for creating a text field you specify the the type property so uh and there you write text field and here i'm writing meter so this is the same id you must specify here for your render element so this is progress for us and the class name is progress and extending gender elements so that is it this is pretty simple uh and it has only one method called get info so inside this we are going to actually provide the basic information about our render element so i'm going to copy the one from the the meter tag okay sorry let's see what we all need okay so we need so we need a we'll discuss about this later we'll discuss about this later okay so for a basic progress bar we need id we need max value we read value and that is it so for that what we are going to do we are going to need id removing the minimum value low high we don't want okay that is it content value content content we have got value max id id max value content we have got and that is it okay cool so i'll remove this yeah so this this pretty simple thing we are going to have for our render element and this is all the variables we are going to need to render that element and this is i'm telling uh about the tweak template i'm going to use for my render element so i'm going to use the trick template progress and that is it but since we have specified the theming theme template and then we must specify it in the hook theme so we are going to specify it over here okay that is it we need id max value and content content we need and attributes this is going to be dynamic uh then we must create uh inside this template folders like the name of our template is going to be chdr hyphen sorry hyphen progress so i'm going to create a new file and here i'm going to save it as chpre progress dot html dot tweak and that is it here i am going to copy the same thing here and i'll remove this for now and i'm rendering how we render the progress bar uh sorry progress progress we have to render the attributes here and then the content we are rendering the progress render element attributes and content for progress tag pro crest will clear the cache [Music] okay we have not seen any errors so i think things are working let's implement this so i am going to implement this by the inside the same controller let's progress example so the name is and here i am going to have define it like a normal render element type is going to be the id of a render element progress and here we must specify what what is required attributes and attributes are id max and value no first the content content 60 percent and then attributes sorry uh we need id it is going to be id abc bd progress and max sorry max value is going to be 100 or let's change the thousand and value is going to be 60 let's refresh it and you see our rendered element is coming out right so it is 60 off thousand is this and we are 60 is not bad 60 is going to be 600 we are changing 600 with touching 600 and you would see that it has now it is 600 i have used id attribute here why i have used id attribute let me tell you uh so for the the reason for using id attribute is this the for using the label attribute and okay so you see that now i'm using label along with my progress file that is that is recommend uh so this is how we create render elements with one simple class one more thing before closing this uh video is that if you want to specify other attributes uh render for example prerender hook post under hook uh element validate or lazy builder you can do that like any other uh tender element you have to specify it over here and there you can implement that in the in from this class [Music] so yeah so again that is how we create custom render elements in drupal

Channel: Akansha Saxena

Views: 82

Rating: 5 out of 5

Keywords: drupal, render elements

Id: dvLHp7BVrIc

Length: 12min 35sec (755 seconds)

Published: Sat Sep 11 2021