title | last_updated | template | originalLink | originalArticleId | redirect_from | ||
---|---|---|---|---|---|---|---|
Custom Twig functions for Zed |
Jun 16, 2021 |
howto-guide-template |
573c0374-a901-44e1-8996-348f40292e5c |
|
To improve developer experience, Twig functionality is extended with custom 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 |
|
function assetsPath($relativePath: string): string
|
{% raw %}{{{% endraw %} assetsPath('js/spryker-zed-gui-main.js') {% raw %}}}{% endraw %} {% raw %}{{{% endraw %} assetsPath('css/spryker-zed-gui-main.css') {% raw %}}}{% endraw %} |
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
|
{% raw %}{{{% endraw %} url('{url}', {'id': id}) {% raw %}}}{% endraw %} |
urldecode |
Encodes the URL. | function urldecode($url: string): string
|
{% raw %}{{{% endraw %} urldecode('{url}') {% raw %}}}{% endraw %} |
tabs |
Renders tabs upon navs and cards internally by the defined template - @Gui/Tabs/tabs.twig . |
function tabs($tabsViewTransfer: TabsViewTransfer, $context: array): string
|
{% raw %}{{{% endraw %} tabs(contentTabs, {'contentForm' : contentForm}) {% raw %}}}{% endraw %} |
panel |
Renders basic panel box by the defined template: @Gui/Panel/panel.twig . |
function panel($title: string, $content: string, $options: array, $footer string): string
|
`{% raw %}{{{% endraw %} 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
|
`{% raw %}{{{% endraw %} 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
|
{% raw %}{{{% endraw %} listGroup(items) {% raw %}}}{% endraw %} |
backActionButton |
Generates a custom action button. | function ($url: string, $title: string, $options: array): string
|
`{% raw %}{{ backActionButton('/user', 'key.to.translate' |
createActionButton |
Generates a custom action button. | function ($url: string, $title: string, $options: array): string
|
`{% raw %}{{ createActionButton('/user/create', 'key.to.translate' |
editActionButton |
Generates a custom action button. | function ($url: string, $title: string, $options: array): string
|
`{% raw %}{{ editActionButton(url('/user/edit', {'id-user': idUser}), 'key.to.translate' |
removeActionButton |
Generates a custom action button. | function ($url: string, $title: string, $options: array): string
|
`{% raw %}{{ removeActionButton(url('/user/delete', {'id-user': userId}), 'key.to.translate' |
viewActionButton |
Generates a custom action button. | function ($url: string, $title: string, $options: array): string
|
`{% raw %}{{ 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
|
`{% raw %}{{ submit_button('key.to.transfer |
groupActionButtons |
Generates a group of action buttons. | function ($buttons: array, $title: string, $options: array): string |
{% raw %}{%{% endraw %} set linksData = { `{'url' : '/gui/create', 'title' : 'key.to.trans |