composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-03-06 17:44:12 +01:00
Code Issues Packages Projects Releases Wiki Activity
Files
e307d8d19bbb7c04716a89d12dae662903c2d62e
iTop/docs/UI/html/documentation/3.0/TwigBaseTuto/Step3/Step3.html
Eric Espie e307d8d19b Doc Twig UI blocks
2022-11-25 17:32:30 +01:00

212 lines
17 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html class="writer-html5" lang="en" >
<head>
<meta charset="utf-8" /><meta name="generator" content="Docutils 0.17.1: http://docutils.sourceforge.net/" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>3. Passing variables to templates &mdash; iTop UI iTop 3.1.0 documentation</title>
<link rel="stylesheet" href="../../_static/pygments.css" type="text/css" />
<link rel="stylesheet" href="../../_static/css/theme.css" type="text/css" />
<link rel="stylesheet" href="../../_static/css/ui-doc.css" type="text/css" />
<!--[if lt IE 9]>
<script src="../../_static/js/html5shiv.min.js"></script>
<![endif]-->
<script data-url_root="../../" id="documentation_options" src="../../_static/documentation_options.js"></script>
<script src="../../_static/jquery.js"></script>
<script src="../../_static/underscore.js"></script>
<script src="../../_static/doctools.js"></script>
<script src="../../_static/js/theme.js"></script>
<link rel="index" title="Index" href="../../genindex.html" />
<link rel="search" title="Search" href="../../search.html" />
<link rel="next" title="4. Adding new operations" href="../Step4/Step4.html" />
<link rel="prev" title="2. Hello World!" href="../Step2/Step2.html" />
</head>
<body class="wy-body-for-nav">
<div class="wy-grid-for-nav">
<nav data-toggle="wy-nav-shift" class="wy-nav-side">
<div class="wy-side-scroll">
<div class="wy-side-nav-search" >
<a href="../../index.html" class="icon icon-home"> iTop UI
<img src="../../_static/itop-logo.png" class="logo" alt="Logo"/>
</a>
<div role="search">
<form id="rtd-search-form" class="wy-form" action="../../search.html" method="get">
<input type="text" name="q" placeholder="Search docs" />
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
</div>
</div><div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="Navigation menu">
<p class="caption" role="heading"><span class="caption-text">Twig Base:</span></p>
<ul class="current">
<li class="toctree-l1"><a class="reference internal" href="../../TwigBase/TwigBase.html">Twig Base Presentation</a></li>
<li class="toctree-l1 current"><a class="reference internal" href="../TwigBaseTuto.html">Twig Base Tutorial</a><ul class="current">
<li class="toctree-l2"><a class="reference internal" href="../Step1/Step1.html">1. Creating the structure</a></li>
<li class="toctree-l2"><a class="reference internal" href="../Step2/Step2.html">2. Hello World!</a></li>
<li class="toctree-l2 current"><a class="current reference internal" href="#">3. Passing variables to templates</a></li>
<li class="toctree-l2"><a class="reference internal" href="../Step4/Step4.html">4. Adding new operations</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<section data-toggle="wy-nav-shift" class="wy-nav-content-wrap"><nav class="wy-nav-top" aria-label="Mobile navigation menu" >
<i data-toggle="wy-nav-top" class="fa fa-bars"></i>
<a href="../../index.html">iTop UI</a>
</nav>
<div class="wy-nav-content">
<div class="rst-content">
<div role="navigation" aria-label="Page navigation">
<ul class="wy-breadcrumbs">
<li><a href="../../index.html" class="icon icon-home"></a> &raquo;</li>
<li><a href="../TwigBaseTuto.html">Twig Base Tutorial</a> &raquo;</li>
<li>3. Passing variables to templates</li>
<li class="wy-breadcrumbs-aside">
</li>
</ul>
<hr/>
</div>
<div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article">
<div itemprop="articleBody">
<section id="passing-variables-to-templates">
<span id="step3"></span><h1>3. Passing variables to templates<a class="headerlink" href="#passing-variables-to-templates" title="Permalink to this headline"></a></h1>
<p>We have seen in <a class="reference internal" href="../Step2/Step2.html#step2"><span class="std std-ref">2. Hello World!</span></a> how to create a static template. Let’s send some variables to have a more dynamic display.</p>
<div class="literal-block-wrapper docutils container" id="id1">
<div class="code-block-caption"><span class="caption-text">src/Controller/MyModuleController.php</span><a class="headerlink" href="#id1" title="Permalink to this code"></a></div>
<div class="highlight-php notranslate"><div class="highlight"><pre><span></span><span class="linenos"> 1</span><span class="o">&lt;?</span><span class="nx">php</span>
<span class="linenos"> 2</span>
<span class="linenos"> 3</span><span class="k">namespace</span> <span class="nx">MyCompany\iTop\MyModule\Controller</span><span class="p">;</span>
<span class="linenos"> 4</span><span class="k">use</span> <span class="nx">Combodo\iTop\Application\TwigBase\Controller\Controller</span><span class="p">;</span>
<span class="linenos"> 5</span><span class="k">use</span> <span class="nx">UserRights</span><span class="p">;</span>
<span class="linenos"> 6</span>
<span class="linenos"> 7</span><span class="k">class</span> <span class="nc">MyModuleController</span> <span class="k">extends</span> <span class="nx">Controller</span>
<span class="linenos"> 8</span><span class="p">{</span>
<span class="linenos"> 9</span> <span class="k">public</span> <span class="k">function</span> <span class="nf">OperationHelloWorld</span><span class="p">()</span>
<span class="linenos">10</span> <span class="p">{</span>
<span class="linenos">11</span> <span class="nv">$aParams</span><span class="p">[</span><span class="s1">&#39;sName&#39;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">UserRights</span><span class="o">::</span><span class="na">GetUser</span><span class="p">();</span>
<span class="linenos">12</span> <span class="nv">$aParams</span><span class="p">[</span><span class="s1">&#39;sDate&#39;</span><span class="p">]</span> <span class="o">=</span> <span class="nb">date</span><span class="p">(</span><span class="s2">&quot;r&quot;</span><span class="p">);</span>
<span class="linenos">13</span> <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">DisplayPage</span><span class="p">(</span><span class="nv">$aParams</span><span class="p">);</span>
<span class="linenos">14</span> <span class="p">}</span>
<span class="linenos">15</span><span class="p">}</span>
</pre></div>
</div>
</div>
<p>The <code class="docutils literal notranslate"><span class="pre">DisplayPage()</span></code> method accept an array of parameters. This array is transformed into variables for the Twig template.</p>
<p>Here two variables are created: <code class="docutils literal notranslate"><span class="pre">sName</span></code> and <code class="docutils literal notranslate"><span class="pre">sDate</span></code>, we can use them in the template.</p>
<div class="literal-block-wrapper docutils container" id="id2">
<div class="code-block-caption"><span class="caption-text">templates/HelloWorld.html.twig</span><a class="headerlink" href="#id2" title="Permalink to this code"></a></div>
<div class="highlight-twig notranslate"><div class="highlight"><pre><span></span><span class="linenos">1</span><span class="cp">{%</span> <span class="k">UITitle</span> <span class="p">F</span><span class="nv">orPage</span> <span class="o">{</span><span class="nv">sTitle</span><span class="s1">:&#39;Hello &#39;</span> <span class="o">~</span> <span class="nv">sName</span> <span class="o">~</span> <span class="s1">&#39;!&#39;</span><span class="o">}</span> <span class="cp">%}{%</span> <span class="k">EndUITitle</span> <span class="cp">%}</span><span class="x"></span>
<span class="linenos">2</span><span class="cp">{%</span> <span class="k">UIContentBlock</span> <span class="p">S</span><span class="nv">tandard</span> <span class="o">{</span><span class="p">D</span><span class="nv">ataAttributes</span><span class="o">:</span> <span class="o">{</span><span class="nv">role</span><span class="o">:</span> <span class="s1">&#39;date&#39;</span><span class="o">}}</span> <span class="cp">%}</span><span class="x"></span>
<span class="linenos">3</span><span class="x"> We are currently </span><span class="cp">{{</span> <span class="nv">sDate</span> <span class="cp">}}</span><span class="x"></span>
<span class="linenos">4</span><span class="cp">{%</span> <span class="k">EndUIContentBlock</span> <span class="cp">%}</span><span class="x"></span>
</pre></div>
</div>
</div>
<p>The output is then</p>
<img alt="../../_images/Hello2.png" src="../../_images/Hello2.png" />
<p>The variables can be of any type, for example you can give an array as a variable:</p>
<div class="literal-block-wrapper docutils container" id="id3">
<div class="code-block-caption"><span class="caption-text">src/Controller/MyModuleController.php</span><a class="headerlink" href="#id3" title="Permalink to this code"></a></div>
<div class="highlight-php notranslate"><div class="highlight"><pre><span></span><span class="linenos"> 1</span><span class="o">&lt;?</span><span class="nx">php</span>
<span class="linenos"> 2</span>
<span class="linenos"> 3</span><span class="k">namespace</span> <span class="nx">MyCompany\iTop\MyModule\Controller</span><span class="p">;</span>
<span class="linenos"> 4</span><span class="k">use</span> <span class="nx">Combodo\iTop\Application\TwigBase\Controller\Controller</span><span class="p">;</span>
<span class="linenos"> 5</span><span class="k">use</span> <span class="nx">UserRights</span><span class="p">;</span>
<span class="linenos"> 6</span>
<span class="linenos"> 7</span><span class="k">class</span> <span class="nc">MyModuleController</span> <span class="k">extends</span> <span class="nx">Controller</span>
<span class="linenos"> 8</span><span class="p">{</span>
<span class="linenos"> 9</span> <span class="k">public</span> <span class="k">function</span> <span class="nf">OperationHelloWorld</span><span class="p">()</span>
<span class="linenos">10</span> <span class="p">{</span>
<span class="linenos">11</span> <span class="nv">$aParams</span><span class="p">[</span><span class="s1">&#39;sName&#39;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">UserRights</span><span class="o">::</span><span class="na">GetUser</span><span class="p">();</span>
<span class="linenos">12</span> <span class="nv">$aParams</span><span class="p">[</span><span class="s1">&#39;sDate&#39;</span><span class="p">]</span> <span class="o">=</span> <span class="nb">date</span><span class="p">(</span><span class="s2">&quot;r&quot;</span><span class="p">);</span>
<span class="linenos">13</span> <span class="nv">$aParams</span><span class="p">[</span><span class="s1">&#39;aQuarter&#39;</span><span class="p">]</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;January&#39;</span><span class="p">,</span> <span class="s1">&#39;February&#39;</span><span class="p">,</span> <span class="s1">&#39;March&#39;</span><span class="p">];</span>
<span class="linenos">14</span> <span class="nv">$this</span><span class="o">-&gt;</span><span class="na">DisplayPage</span><span class="p">(</span><span class="nv">$aParams</span><span class="p">);</span>
<span class="linenos">15</span> <span class="p">}</span>
<span class="linenos">16</span><span class="p">}</span>
</pre></div>
</div>
</div>
<p>Here <code class="docutils literal notranslate"><span class="pre">aQuarter</span></code> is an array containing some months, we can use it in a selector:</p>
<div class="literal-block-wrapper docutils container" id="id4">
<div class="code-block-caption"><span class="caption-text">templates/HelloWorld.html.twig</span><a class="headerlink" href="#id4" title="Permalink to this code"></a></div>
<div class="highlight-twig notranslate"><div class="highlight"><pre><span></span><span class="linenos"> 1</span><span class="cp">{%</span> <span class="k">UITitle</span> <span class="p">F</span><span class="nv">orPage</span> <span class="o">{</span><span class="nv">sTitle</span><span class="s1">:&#39;Hello &#39;</span> <span class="o">~</span> <span class="nv">sName</span> <span class="o">~</span> <span class="s1">&#39;!&#39;</span><span class="o">}</span> <span class="cp">%}{%</span> <span class="k">EndUITitle</span> <span class="cp">%}</span><span class="x"></span>
<span class="linenos"> 2</span><span class="cp">{%</span> <span class="k">UIContentBlock</span> <span class="p">S</span><span class="nv">tandard</span> <span class="o">{</span><span class="p">D</span><span class="nv">ataAttributes</span><span class="o">:</span> <span class="o">{</span><span class="nv">role</span><span class="o">:</span> <span class="s1">&#39;date&#39;</span><span class="o">}}</span> <span class="cp">%}</span><span class="x"></span>
<span class="linenos"> 3</span><span class="x"> We are currently </span><span class="cp">{{</span> <span class="nv">sDate</span> <span class="cp">}}</span><span class="x"></span>
<span class="linenos"> 4</span><span class="cp">{%</span> <span class="k">EndUIContentBlock</span> <span class="cp">%}</span><span class="x"></span>
<span class="linenos"> 5</span>
<span class="linenos"> 6</span><span class="cp">{%</span> <span class="k">UIForm</span> <span class="p">S</span><span class="nv">tandard</span> <span class="o">{</span><span class="nv">sId</span><span class="s1">:&#39;my-form&#39;</span><span class="o">}</span> <span class="cp">%}</span><span class="x"></span>
<span class="linenos"> 7</span><span class="x"> Select Month:</span>
<span class="linenos"> 8</span><span class="x"> </span><span class="cp">{%</span> <span class="k">UISelect</span> <span class="p">F</span><span class="nv">orSelect</span> <span class="o">{</span><span class="nv">sName</span><span class="s1">:&#39;month&#39;</span><span class="o">}</span> <span class="cp">%}</span><span class="x"></span>
<span class="linenos"> 9</span><span class="x"> </span><span class="cp">{%</span> <span class="k">for</span> <span class="nv">index</span><span class="o">,</span><span class="nv">sMonth</span> <span class="k">in</span> <span class="nv">aQuarter</span> <span class="cp">%}</span><span class="x"></span>
<span class="linenos">10</span><span class="x"> </span><span class="cp">{%</span> <span class="k">UISelectOption</span> <span class="p">F</span><span class="nv">orSelectOption</span> <span class="o">{</span><span class="nv">sValue</span><span class="o">:</span> <span class="nv">index</span><span class="o">,</span> <span class="nv">sLabel</span><span class="o">:</span> <span class="nv">sMonth</span><span class="o">,</span> <span class="nv">bSelected</span><span class="o">:</span><span class="kp">false</span><span class="o">}</span> <span class="cp">%}</span><span class="x"></span>
<span class="linenos">11</span><span class="x"> </span><span class="cp">{%</span> <span class="k">endfor</span> <span class="cp">%}</span><span class="x"></span>
<span class="linenos">12</span><span class="x"> </span><span class="cp">{%</span> <span class="k">EndUISelect</span> <span class="cp">%}</span><span class="x"></span>
<span class="linenos">13</span><span class="cp">{%</span> <span class="k">EndUIForm</span> <span class="cp">%}</span><span class="x"></span>
</pre></div>
</div>
</div>
<p>The output is:</p>
<img alt="../../_images/Hello3.png" src="../../_images/Hello3.png" />
</section>
</div>
</div>
<footer><div class="rst-footer-buttons" role="navigation" aria-label="Footer">
<a href="../Step2/Step2.html" class="btn btn-neutral float-left" title="2. Hello World!" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> Previous</a>
<a href="../Step4/Step4.html" class="btn btn-neutral float-right" title="4. Adding new operations" accesskey="n" rel="next">Next <span class="fa fa-arrow-circle-right" aria-hidden="true"></span></a>
</div>
<hr/>
<div role="contentinfo">
<p>&#169; Copyright 2022, Combodo.</p>
</div>
Built with <a href="https://www.sphinx-doc.org/">Sphinx</a> using a
<a href="https://github.com/readthedocs/sphinx_rtd_theme">theme</a>
provided by <a href="https://readthedocs.org">Read the Docs</a>.
</footer>
</div>
</div>
</section>
</div>
<!--
~ @copyright Copyright (C) 2010-2022 Combodo SARL
~ @license http://opensource.org/licenses/AGPL-3.0
-->
<div class="rst-versions" data-toggle="rst-versions" role="note" aria-label="versions">
<span class="rst-current-version" data-toggle="rst-current-version">
<span class="fa fa-book"> Other Versions</span>
v: documentation/3.0
<span class="fa fa-caret-down"></span>
</span>
<div class="rst-other-versions">
<dl>
<dt>Branches</dt>
<dd><a href="Step3.html">documentation/3.0</a></dd>
<dd><a href="../../../latest/TwigBaseTuto/Step3/Step3.html">documentation/latest</a></dd>
</dl>
</div>
</div><script>
jQuery(function () {
SphinxRtdTheme.Navigation.enable(true);
});
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink