SupportPal Docs

Plugin Development: Views

Previous Section: Languages

Create your own templates for viewing pages in the plugin.

Contents

Writing Views

Templates are stored in the Views folder. SupportPal uses the Twig template system and all templates should have a .twig file extension. For guidance on functions available within templates, please refer to the Templates 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.

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