 This is the session about view style plugins in Drupal 8. I tried to cover Drupal 8 views and Drupal 7 views plugins as well so that all the guys which haven't worked with view style plugins before can get an idea how to build the style plugins. So first of all, I'm Jibran Jhaas. I think if you have attended yesterday's keynote, you should probably know me by now. But I'm just for the sake of introduction, I work for previous Next and I'm a backend developer, I have more than 150 commit mentions at Drupal.org and I'm a maintainer of shortcut modules and I have a lot of views related plugins including views. I also maintain field view module, Drupal 8 branch on Drupal.org. So let's get started. So first of all, what is the views module? Anyone? Sorry? Okay. So views is a query building tool in which you can build a query from UI and you can display the output of that query properly formatted in HTML and you can create different displays from that query. So as I reckon that views has two parts, query part in which you can select the base table and you can add a relationship to that table. You can add sorting on the table and you can add different fields to that table. So after the query, you can display that query into proper page or a blog or a pane, whatever you want to display, whatever in whatever display you want to show it or if you want to attach that display to an entity or if you just want to attach the existing display to another entity or another view, so you can do that. And this output part also consists the fields and their styling. So I'm going to concentrate on output part now. So output part has, again, two parts display in which you know, as I described earlier, you can choose different kind of display, pages and blogs and attachments and entity views and then you can style them like formatted fields, unformatted fields, you know, collapsible fields and stuff like that. So now I'm going to take a deep dive in view style plugins and what are those plugins? So have you heard about views PHP module? So have you ever used that module? So sorry, why shamefully? So can someone answer that question, why you need views PHP module? Why do you ever use that module? So the thing is that whatever style plugin you are using, it doesn't provide you that thing, you know, that option to add that on your display. So you need some kind of SQL query or you want to show some kind of listing, you want to change some HTML, whatever you want to do, you can do that in that views PHP module. So what if you can, you know, write a view style plugin for yourself and you can use that in future with all that changes and you don't have to, you know, worry about deploying the code or wrong PHP and, you know, generating a fatal which you cannot locate ever again in your production site. So you can avoid all that by writing this view style plugin. So let's take a look. Okay. So in Drupal 7, that's how we start. First of all, in the module file, we mention our hook, views API hook. The job of this hook is to let views know that I have something that, you know, I want to integrate with views. So this is the way we, you know, send the message to views. And after that, you know, views is a very different thing with all our module calculation and backend logic. So what we try to do is that we try to keep our, all the views related stuff and hooks into a different module file. So we'll use, you know, module name, mymodule.views.inc file, you know, inc is include file and we try to use that. And we let in views API know, in views API, we let views know that this is the views inc file in my module, which I'm going to be using for, you know, displaying the, for views hooks and, you know, default views. So in that inc file, we have to write a views plugin hook. So this hook adds the view plugins definition to hooks, to views, sorry. So there are many plugins in views. If you can, you know, look into views, there are query plugins and there are style plugins and there are sorting plugins and there are field plugins. So we can, we'll look into the style plugins now. So in that definition, then we have to mention the class and we have, you know, that class has all the business logic related to that style. So we try to keep that, you know, separate as well. So for that, we have to add another file. So so far, we have a hook and two separate files. And then after adding that file, we have to include that file in the info file as well, you know, so that registry would know that where to find that class. So one, two, three, four, five, okay, so in Drupal 8, it's very simple for you. Just drop a class in this folder and just add metadata to that class in form of annotations and you are done. You have a style plugin. So as you can see, it's a long name and you have to, you know, look, you can't remember that long name, what is source, plugins, view, style. So I can give you a short, you know, hack for that to, you know, so that you can remember that for the rest of your life. So it's not that difficult to, you know, look at it and remember that. Okay. So SRC is the main folder in Drupal 8 in which you add your classes and then Drupal 8 support plugins which are actually, you know, to store some kind of metadata and which provides some functionality like blocks and feeds and stuff like that. So it's a Drupal 8 thing. So we have a plugin API and there is a proper page on api.drupal.org on which you can read all about plugins. So Views is using this plugin system in Drupal 8 to display, to, you know, declare his plugins and to use those plugins, Views plugins are using the plugin API in Drupal 8. It's kind of confusing thing but it's like that. Okay. So then we have these plugins and then we have the module in which, for which this plugin belongs to. So this is a Views module's plugin and then the type of the plugin, the style is the type of that plugin here and so we are declaring style type Views plugins and what is MyStyle.php? It's the name of the class and it's PSR0 thing, a PSR4 thing. So your file name should match your class name. So it's there. So then in that class, you have to add this command type thing which is actually JSON and it is used to hold your Views related data and I'll get into that in more detail in the next slides but it is there to, you know, let Views know that this is a ViewStyle plugin. So you don't have to write, you know, you don't have to do all that four steps now. You just have to add a class and just add that text in that class. So now as I mentioned before that the primary reason of using Views.php is that we also want to style something. We also want to change the display or we want to load something and then change that display or, you know, configure our HTML. So you can also do that in ViewStyle plugin. The basic reason of, you know, ViewStyle plugins is that you can update your markup and you can change the markup with your logic and you don't have to worry about that, you know, in theming system. So markup can be controlled using options, style options. As you remember, if you have worked with Views, you should know that there are, you know, classes you can choose from, there are four methods you can choose from. So there are always options for each and every style plugin which you can configure and, you know, change your markup style. So every query is fetching a lot of data from, you know, your database. So this data chunk has, his chunk can be called a row and it is duty of style plugin to theme that row in a proper format. So if you are building a style plugin, just make sure you are using a proper row plugin for, you know, styling your data, for styling the row. So if you are not using a proper row plugin to style your row, then you can break that thing for themeers who wants to override, you know, their row theme function or you want to change the markup of the rows. So you have to use that as well. So now let's get to the definition part of style plugins in Drupal 7. So as you can see that we are declaring a big array which is, which is plugins array and we are declaring style plugins and this is a contra module I have created. It's called vertical tabs. I'll show the demo in the end. And I am, you know, adding some metadata about that plugin, that what is the title of the plugin and which handle it's going to use and which options, you know, I'm exposing to the user and which option user can change in the views. Simple enough but it is in a separate file. So in Drupal 8 you don't have to write this thing in a separate file as we talked earlier that you can do that in views annotations and this is same as, same definition as plugins definition in who views plugins but it's now in the class and it's in the comments which are called annotations and it's in a JSON format. So we have ID, title and help text same as before and we have removed these uses and I think that's it. So there are no options in the view style annotations because they are logical things and we are not using view style plugins for logical or, you know, over readable options. So now as you can see through the definition that we are declaring a handler which is actually a class. This is a handler. It's a class name. So in Drupal 7 we are extending that class from the views default, you know, style plugin and we are, this class, the responsibility of this class is to hold all the business logic of that style plugin. It is slightly changed in Drupal 8. In Drupal 8 we are using style plugin, plugin base class and all the logical options which were originally part of, you know, who queues data and removed from annotations are now the properties in this style plugin class. So in Drupal 7 we used to use this snake notation for all the functions and methods and we used the option definition function to define some plugins related option which are configurable by users. And then in option form we can create a proper form for user and present user a proper form so that they can configure and change that option according to their requirements. So in Drupal 8 we are not using that snake notation anymore so the name of the functions are slightly changed and so we are using camel case now and the function name is actually the same but not the snake properties but with the camel case properties and they are doing the same thing as they were doing in Drupal 7. So next thing that I want to talk about is that you have created a style plugin and user has enabled that and now he has chosen the different configuration according to their requirements and now what to do with those requirements. Now what we can do with those requirements. So in D7 we used to have this theme line in who queues data, who queues plugin function and that theme is responsible for styling that bit of the style plugin or the rows and in Drupal 8 that is moved to use annotation, it's simple enough and we can use prepressor function to manipulate all the option and all the requirements, all the things which user has changed and configured in his original views. So Drupal 8 is now using twig templates so all the template thing is done through twig so there are no more PHP templates in Drupal 8 so it's same for views as well and view style plugins. So technically views vertical tab.tpl.php will be converted to vertical tab.html.twig file. So as we talked earlier about prepressor that prepressor functions are there to work on those options which user has selected during the configuration of views so if user has chosen some field for a title of a view or user has added some classes to the views we can change those settings and we can manipulate markup in the views prepressor function. So this will be the prepressor function for the views vertical tab. So other than manipulating the option the main responsibility of prepressor function is to render proper HTML for rows as well as we talked earlier that it's major thing for style plugin and it's the responsibility to use proper rows plugins and proper rows theme function to render output. So if we are talking about this specific module then in this case it's the responsibility of prepressor function to create a renderable array as you know that vertical tab is a form API element and it is created by renderable array and we can configure the title of vertical tabs and how many tabs we are going to have in the vertical tabs and stuff like that so in this case vertical tab has the responsibility to create the renderable array which will be ready for the displays. And vertical tabs also support summary as you know that on node edit form when you are selecting comment on and off options or you know publish option publishing options that somebody get updated so same goes for the vertical tabs as well. So this is the simple TPL file for D7 and it is just rendering vertical tabs and it is because as I said earlier that vertical tab you know variable is a renderable array and we are just rendering that array. So this template file should be there because should have to be there because we are using theme function and it's our responsibility for you know for other users or you know front end developers have that option to overwrite this and change the markup as they want to. So there is not a lot of difference in template wise so we are just rendering the views tab like this in Dupal 7, 8 sorry. Now I can show you all that thing in action and for this you have to go to the module page and download the module file and drop that in your module directory enable that and you can select the styling option there and then you can configure all the configuration you have chosen in the views and you have added in the view your plugin and then you can display that on the output side. So this is a module page as you can see it's a style plugin module so I am going to use this dev version of view style plugins and after downloading this is an add new screen of that views page and you can as you can see that I am creating a content view here and here at display format I have this views vertical tab option available for me. I can create a teaser view but it would make more sense for fields so I am going to create a views for fields and after creating a view as you can see this is the style plugins available to me in views so I have a grid style I have HTML list table these are the default styles from views and this is the content module I have added so I have selected style plugin and now I can go to the settings which I have added using option forms so I can select tab title here tab summary and I can add description to the vertical tabs as well and there are some default options in this form like add row classes this is from the base class of view style plugins so I have chosen some different fields for that so title is hidden tag is hidden and body is only visible and I have created three nodes and each vertical tab is showing the title and you know the tags as summary and I am rendering this text as the main body and I can select any tab so I have created a page view I have also I can also show you the page so we have a title this is actually but title is showing twice so we have an active issue in Drupal A8 to fix that as you can see that bodies the tags are changing here but they have the same body so it is not visible that much so it is changing so if I can show you the back end of this is so this is a module file which has template to the function and as I said that it has the responsibility to manipulate all the options in style plugins and let me show you the main class view style plugins can you see that it's a bit dark but yeah so okay so yeah so the class is originally extending the style plugin class and it has all that options and I am defining some default options like title description and summary which I can you know configure in the option screen and then I am creating a form for user for those fields and as you can see this is a simple Drupal form nothing fancy so on the basis of those options I am looping through all the rows as you can see here sorry so all the rows here and I am you know rendering them using their style plugin and placing their output so this is the so this is the proper form API element which I am creating and then I'm process preprocessing the form API element and and this is the renderable element which I'm going to use to you know render the vertical tabs so I'm also adding summary as a JS element to the views vertical tab and it is and as you can see that these summaries are calculated using the views fields which we have selected in the options so it's not that hard to do and you can avoid all that views PHP and all the fettles so you can use that so thank you for Daniel Wiener because he helped me a lot during figuring this these things out and leave all in for the moral support and previous next for sponsoring my trip to Drupal South and Drupal South for giving me the opportunity to present any questions no it's the it's almost the same thing as Drupal 7 nothing changed during Drupal 7, Drupal 8 in the context of theming of style plugins or any plugins yeah yeah no that's the thing so I'm the owner of this plugin right so it's my responsibility to give a proper templating function to that provide a proper templating function for that plugin so it get called every time so user can you know always rewrite that in template dot PHP of the theme function or which is the theme file now theme not a theme name dot theme file now so actually naming that template underscore pfacer is the reason for they're doing that is that it get called every time yeah yeah but but after calling this so you can override this in your you know custom module or in your theme sorry I didn't get the yeah yeah yeah no because because views you are the total responsibility of youth UI is to provide a proper UI so the actual plan is to create a swapable UI so that a contrib can replace that it's not possible as far as I can tell you but it's a plan to see that they are pretty wide pretty tied together so it's not you know an easy task to do but it's possible I have seen some modules in Drupal 7 which with custom UIs