You're browsing the documentation for an old version of SupportPal. Consider upgrading to the [latest version](https://docs.supportpal.com/current/Plugin+Development+Views). # Plugin Development: Views #### Previous Section: [Languages](Plugin+Development+Languages) --- Create your own templates for viewing pages in the plugin. ## Writing Views Templates are stored in the Views folder. SupportPal uses the [Twig template system](https://twig.symfony.com/) and all templates should have a `.twig` file extension. Templates used to show pages in the operator panel should start by extending the operator index template, and it can also set the page title by using the title block. The content block is where you put what you wish to display. Below is an example template which makes uses of all these components. Views/view.twig ``` {% extends 'operator.' ~ template ~ '.index' %} {% block title %} {{ Lang.get('HelloWorld::lang.hello_world') }} {% endblock %} {% block content %} Your HTML here {% endblock %} ``` Most commonly you will just need the title and content blocks, but other blocks are available to set or fill other parts of the page. A full list of available blocks: Block name Description `title` Sets the page title. `scripts_header` Used to add any additional CSS, JS or other assets that should be loaded in the attribute. `header` Can be used to replace or extend the page header (navigation bar). `sidebar` Lets you add a sidebar, to the left of the content block. `precontent` Inserts data before the main content
attribute. `description` Adds a description below the page title. `content` The page content. `scripts_footer` Used to add any additional CSS, JS or other assets that should be loaded before the attribute. ### Purifying HTML If you need to display any user submitted content, it is best to purify the HTML to remove the risk of XSS. This can be done with the `Purifier.clean` method. ``` {{ Purifier.clean(html_content) }} ``` ### Displaying raw HTML Twig will automatically escape any HTML within a Twig tag. To stop this and display the code as it is, use the `raw` filter. Be careful to only do this on safe HTML that doesn't contain user submitted content. ``` {{ html_content|raw }} ``` ### Authenticated Operator The authenticated operator can be accessed with the `auth_user` function. ``` {{ auth_user().formatted_name }} ``` For more information on Twig and our template syntax, please check our [Templates](Templates) guide. ## View Names Once you've written your views and stored them within the Views folder, you can access them with the plugin namespace. For example the file `app/Plugins/HelloWorld/Views/settings.twig` maps to '`HelloWorld::settings`'. --- #### Next Section: [Registering Settings](Plugin+Development+Registering+Settings)