Custom Twig functions for Zed

Last updated:
Edit on GitHub

To improve developer experience, Twig functionality has been extended with new Twig functions. All the Twig extension implementations are located in the Gui module and can be found in Pyz\Zed\Twig\TwigDependencyProvider.

Pyz\Zed\Twig\TwigDependencyProvider 
namespace Pyz\Zed\Twig;

...

use Spryker\Zed\Gui\Communication\Plugin\Twig\AssetsPathTwigPlugin;
use Spryker\Zed\Gui\Communication\Plugin\Twig\Buttons\Action\BackActionButtonTwigPlugin;
use Spryker\Zed\Gui\Communication\Plugin\Twig\Buttons\Action\CreateActionButtonTwigPlugin;
use Spryker\Zed\Gui\Communication\Plugin\Twig\Buttons\Action\EditActionButtonTwigPlugin;
use Spryker\Zed\Gui\Communication\Plugin\Twig\Buttons\Action\RemoveActionButtonTwigPlugin;
use Spryker\Zed\Gui\Communication\Plugin\Twig\Buttons\Action\ViewActionButtonTwigPlugin;
use Spryker\Zed\Gui\Communication\Plugin\Twig\Buttons\ButtonGroupTwigPlugin;
use Spryker\Zed\Gui\Communication\Plugin\Twig\Buttons\Form\SubmitButtonTwigPlugin;
use Spryker\Zed\Gui\Communication\Plugin\Twig\Buttons\Table\BackTableButtonTwigPlugin;
use Spryker\Zed\Gui\Communication\Plugin\Twig\Buttons\Table\CreateTableButtonTwigPlugin;
use Spryker\Zed\Gui\Communication\Plugin\Twig\Buttons\Table\EditTableButtonTwigPlugin;
use Spryker\Zed\Gui\Communication\Plugin\Twig\Buttons\Table\RemoveTableButtonTwigPlugin;
use Spryker\Zed\Gui\Communication\Plugin\Twig\Buttons\Table\ViewTableButtonTwigPlugin;
use Spryker\Zed\Gui\Communication\Plugin\Twig\FormRuntimeLoaderTwigPlugin;
use Spryker\Zed\Gui\Communication\Plugin\Twig\GuiFilterTwigPlugin;
use Spryker\Zed\Gui\Communication\Plugin\Twig\GuiTwigLoaderPlugin;
use Spryker\Zed\Gui\Communication\Plugin\Twig\TabsTwigPlugin;
use Spryker\Zed\Gui\Communication\Plugin\Twig\UrlDecodeTwigPlugin;
use Spryker\Zed\Gui\Communication\Plugin\Twig\UrlTwigPlugin;

...

class TwigDependencyProvider extends SprykerTwigDependencyProvider
{
    /**
     * @return \Spryker\Shared\TwigExtension\Dependency\Plugin\TwigPluginInterface[]
     */
    protected function getTwigPlugins(): array
    {
        return [

            ...

            new AssetsPathTwigPlugin(),
            new TabsTwigPlugin(),
            new UrlTwigPlugin(),
            new UrlDecodeTwigPlugin(),
            new PanelTwigPlugin(),
            new ModalTwigPlugin(),
            // navigation buttons
            new ButtonGroupTwigPlugin(),
            new BackActionButtonTwigPlugin(),
            new CreateActionButtonTwigPlugin(),
            new ViewActionButtonTwigPlugin(),
            new EditActionButtonTwigPlugin(),
            new RemoveActionButtonTwigPlugin(),
            // table row buttons
            new EditTableButtonTwigPlugin(),
            new BackTableButtonTwigPlugin(),
            new CreateTableButtonTwigPlugin(),
            new ViewTableButtonTwigPlugin(),
            new RemoveTableButtonTwigPlugin(),
            // Form buttons
            new SubmitButtonTwigPlugin(),
        ];
    }
  }
FUNCTION NAME DESCRIPTION METHOD SIGNATURE USAGE EXAMPLE
assetsPath
  • Provides a safe way to access the public folder where compiled assets are located. Returns a string in the following format:
    {publicAssetsPath}{namespaceName}{themeName}{relativeAssetPath}. For example, /assets/css/spryker-zed-gui-main.js.
    /assets/css/spryker-zed-gui-main.css.
    The string is used internally to resolve a component/resource location within a provided module.
  • Provides a safe way to access a remote folder where compiled assets are located—for example, a Content Delivery Network (CDN) resource. For more details, see Custom Location for Static Assets f.
 function assetsPath($relativePath: string): string
  • $relativePath - relative asset path (required).
 {{ assetsPath('js/spryker-zed-gui-main.js') }}
{{ assetsPath('css/spryker-zed-gui-main.css') }}
url Generates an internal URL from a path string and converts special characters into HTML entities. function url($url: string, $query: array, $options: array): string
  • $url - relative URL (required).
  • $query - query string (optional). The default value is [].
  • $options - additional options (optinal). The default value is [].
 {{ url('{url}', {'id': id}) }}
urldecode Encodes the URL. function urldecode($url: string): string
  • $url- URL string to be decoded (required).
 {{ urldecode('{url}') }}
tabs Renders tabs upon navs and cards internally by the defined template - @Gui/Tabs/tabs.twig. function tabs($tabsViewTransfer: TabsViewTransfer, $context: array): string
  • $tabsViewTransfer - data transfer object that contains the tabs to be rendered (required).
  • $context - array of parameters to pass to the template (optional). The default value is [].
 {{ tabs(contentTabs, {'contentForm' : contentForm}) }}
panel Renders basic panel box by the defined template: @Gui/Panel/panel.twig. function panel($title: string, $content: string, $options: array, $footer string): string
  • $title - panel title (required).
  • $content - panel content (required).
  • $options - panel additional options (optional), e.g noWrap. The default value is null.
  • $footer - panel footer (optional). The default value is null.
 `{{ panel(‘key.to.translate’
modal Renders dialog to your site for lightboxes, user notifications, or completely custom content by defined template: @Gui/Modal/modal.twig. function modal($title: string, $content: string, $footer: string, $extraData: string): string
  • $title - modal window title (required).
  • $content - modal window content (required).
  • $footerModal window footer (optional). The default value is null.
  • $extraData - sets additional options:
    • class
    • id
    • noWrap
    • collapsable
    • collapsed
 `{{ modal(’key.to.translate
listGroup Renders a custom list group to display a series of content: @Gui/ListGroup/list-group.twig. function listGroup($items: array): string
  • $items - array of items to render (required).
 {{ listGroup(items) }}
backActionButton Generates a custom action button. function ($url: string, $title: string, $options: array): string
  • $url - relative URL (required).
  • $title - name (required).
  • $options - sets additional options (optional). The default value is []. The options are:
    • id
    • class
    • default_css_classes
    • button_class
    • icon
 `{{ backActionButton(’/user’, ‘key.to.translate’
createActionButton Generates a custom action button. function ($url: string, $title: string, $options: array): string
  • $url - relative URL (required).
  • $title - name (required).
  • $options - sets additional options (optional). The default value is []. The options are:
    • id
    • class
    • default_css_classes
    • button_class
    • icon
 `{{ createActionButton(’/user/create’, ‘key.to.translate’
editActionButton Generates a custom action button. function ($url: string, $title: string, $options: array): string
  • $url - relative URL (required).
  • $title - name (required).
  • $options - sets additional options (optional). The default value is []. The options are:
    • id
    • class
    • default_css_classes
    • button_class
    • icon
 `{{ editActionButton(url(’/user/edit’, {‘id-user’: idUser}), ‘key.to.translate’
removeActionButton Generates a custom action button. function ($url: string, $title: string, $options: array): string
  • $url - relative URL (required).
  • $title - name (required).
  • $options - sets additional options (optional). The default value is []. The options are:
    • id
    • class
    • default_css_classes
    • button_class
    • icon
 `{{ removeActionButton(url(’/user/delete’, {‘id-user’: userId}), ‘key.to.translate’
viewActionButton Generates a custom action button. function ($url: string, $title: string, $options: array): string
  • $url - relative URL (required).
  • $title - name (required).
  • $options - sets additional options (optional). The default value is []. The options are:
    • id
    • class
    • default_css_classes
    • button_class
    • icon
 `{{ viewActionButton(’/user/view’, ‘key.to.translate’
submit_button Renders a custom submit button by the defined template: @Gui/Form/button/submit_button.twig. function ($value: string, $attr: array): string
  • $value - defines the initial button value (required).
  • $attr - defines button attributes (optional). The default value is [].
 `{{ submit_button(’key.to.transfer
groupActionButtons Generates a group of action buttons. function ($buttons: array, $title: string, $options: array): string {% set linksData = {
`{‘url’ : ‘/gui/create’, ‘title’ : ’key.to.trans