https://www.open-emr.org/wiki/index.php?title=Twig_Development&feed=atom&action=historyTwig Development - Revision history2024-03-29T15:12:30ZRevision history for this page on the wikiMediaWiki 1.36.1https://www.open-emr.org/wiki/index.php?title=Twig_Development&diff=31182&oldid=prevRobert Down: Created page with "Twig is the preferred templating method for OpenEMR. While legacy code is still found throughout the codebase, new pages and large refactoring efforts should use Twig. = The..."2021-11-11T23:11:44Z<p>Created page with "Twig is the preferred templating method for OpenEMR. While legacy code is still found throughout the codebase, new pages and large refactoring efforts should use Twig. = The..."</p>
<p><b>New page</b></p><div>Twig is the preferred templating method for OpenEMR. While legacy code is still found throughout the codebase, new pages and large refactoring efforts should use Twig.<br />
<br />
= The TwigContainer =<br />
<br />
A custome TwigContainer exists to make working with Twig easier. To get started include the following in your page:<br />
<br />
<pre><br />
<br />
use OpenEMR\Common\Twig\TwigContainer<br />
<br />
$path = "/the/path/to/your/templates"; // can be null to default to $GLOBALS['fileroot']/templates<br />
$twigContainer = new TwigContainer($path, $GLOBALS['kernel']);<br />
$twig = $twigContainer->getTwig();<br />
<br />
$viewVars = [<br />
'yourVariable' => 'someValue',<br />
'var2' => 'anotherValue'<br />
];<br />
<br />
echo $twig->render("name_of_your_template.html.twig", $viewVars);<br />
</pre><br />
<br />
You can set <code>$path</code> to null if you are working on core templates. $kernel is optional, although highly recommended for leveraging debugging. The twig container contains one method, <code>getTwig()</code> which accepts no parameters and returns a <code>Twig\Environment</code> object. Create an array of variables passed to the Twig template, pass that array to the <code>render()</code> along with the name of your template to render the template. You must <code>echo</code> this command.<br />
<br />
= Debugging =<br />
<br />
Assuming <code>Kernel</code> was passed to the TwigContainer you can leverage debugging inside of the Twig template. Your environment must be setup for development. The quickest way to do this is:<br />
<br />
# Copy .env.example to .env (Found in the root directory)<br />
# Edit .env and set the variable to dev<br />
# Call <pre>{{ dump() }}</pre> from your Twig template for functionality similar to <code>print_r()</code><br />
<br />
= Filters =<br />
<br />
Several translation extensions are available within your Twig template. Some of these include:<br />
<br />
* text<br />
* attr<br />
* js_escape<br />
* attr_js<br />
* attr_url<br />
* xla<br />
* xlt<br />
* xlj<br />
* xl<br />
<br />
See <code>src/Common/Twig/TwigExtension</code> for a complete list of filters.<br />
<br />
Use these filters like any other Twig filter: <code>&lt;div&gt;{{ &quot;Text to Translate&quot;|xl&lt;/div&gt;</code><br />
<br />
= Functions =<br />
<br />
Several helper functions also exist. Examples include:<br />
<br />
* setupHeader<br />
* generateFormField<br />
* tabRow<br />
* tabData<br />
* imageWidget<br />
<br />
Use these functions like any other Twig function<br />
<br />
= Global Variables =<br />
<br />
A few global variables are injected into every Twig render. These variables are highly repetitive and often include file system paths (for use in links). The global variables list should be kept thin as we strive to avoid global bloat. Current global variables are:<br />
<br />
* assets_dir = $GLOBALS[‘assets_static_relative’]<br />
* srcdir = $GLOBALS[‘srcdir’]<br />
* rootdir = $GLOBALS[‘rootdir’]<br />
* webroot = $GLOBALS[‘webroot’]<br />
* assetVersion = $GLOBALS[‘v_js_includes’]<br />
<br />
Access these variables like any other top-level variables in your template.<br />
<br />
== Note ==<br />
<br />
To better manage the variable space, these global variables may be moved into a <code>global</code> array, so instead of simply calling <pre>{{ webroot }}</pre> you would call <pre>{{ global.webroot }}</pre> .<br />
<br />
= More Resources =<br />
<br />
To learn more about Twig please see https://twig.symfony.com/</div>Robert Down