# 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. For guidance on functions available within templates, please refer to the [Templates](Templates#Helpers) documentation.

## Creating Operator Views

 Templates used to show pages in the operator panel should start by extending the operator index template (`parent_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/settings.twig

```

    {% extends parent_template %}

    {% block title %}
        {{ Lang.get('Plugins#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   `meta` Additional `<meta>` tags for the page.   `title` Sets the page title.   `scripts_header` Used to add any additional CSS or other assets that should be loaded in the `<head>` attribute. JS and jQuery should be loaded in the `scripts_footer` block.   `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 `<div>` attribute.   `description` Adds a description below the page title.   `content` The page content.   `scripts_footer` Used to add any additional CSS, JS, jQuery or other assets that should be loaded before the `</body>` attribute.  The template can be returned from a controller method using:

```
\TemplateView::operator('Plugins#HelloWorld::settings');
```

---

## Creating Frontend Views

 Templates used to show pages in the frontend should start by extending the frontend index template (`parent_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/frontend.twig

```

    {% extends parent_template %}

    {% block title %}
        {{ Lang.get('Plugins#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.   `meta` Additional `<meta>` tags for the page.   `scripts_header` Used to add any additional CSS or other assets that should be loaded in the `<head>` attribute. JS and jQuery should be loaded in the `scripts_footer` block.   `header` Can be used to replace or extend the page header (navigation bar).   `precontent` Inserts data before the main content `<div>` attribute.   `breadcrumb`  Add additional items to the breadcrumb list. For example: ```
{% block breadcrumb %}{{ parent() }}{{ 'Foo' }}{% endblock %}
```

    `subtitle` Insert data at the start of main content inner area.   `sidebar` Lets you add a sidebar, to the left of the content block.   `content` The page content.   `scripts_footer` Used to add any additional JavaScript / assets that should be loaded before the `</body>` attribute.  The template can be returned from a controller method using:

```
\TemplateView::frontend('Plugins#HelloWorld::frontend');
```

---

## Creating Other Views

 To create any other view, which doesn't extend one of our existing templates, there are no restrictions on file structure. These views can be returned from a controller method using:

```
\TemplateView::make('Plugins#HelloWorld::some_random_view');
```

---

## Asset Files

 You may need to include images, CSS or JavaScript files in your views. The browser will cache these files even if you later change them, meaning changes may not be visible until the user has cleared their browser cache. To get around that, you can use [cache busting](https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching#cache_busting).

 To automate that, you can use the the `asset` function in your views. The function will append a query string to the file path with the version of the plugin.

In the controller, you must add the plugin instance to the view to have access to the function:

```
\TemplateView::operator('Plugins#HelloWorld::settings')
    ->with('plugin', \PluginFactory::getInstance('HelloWorld'));
```

Then in your view you would use the asset function like below, with a path relative to the plugin folder:

```
<link href="{{ plugin.asset('Views/assets/css/main.min.css') }}" rel="stylesheet" />
```

---

#### Next Section: [Registering Settings](Plugin+Development+Registering+Settings)