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/Step4/Step4.html
Eric Espie e307d8d19b Doc Twig UI blocks
2022-11-25 17:32:30 +01:00

191 lines
14 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>4. Adding new operations &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="prev" title="3. Passing variables to templates" href="../Step3/Step3.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"><a class="reference internal" href="../Step3/Step3.html">3. Passing variables to templates</a></li>
<li class="toctree-l2 current"><a class="current reference internal" href="#">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>4. Adding new operations</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="adding-new-operations">
<span id="step4"></span><h1>4. Adding new operations<a class="headerlink" href="#adding-new-operations" title="Permalink to this headline"></a></h1>
<p>We currently have only one operation <code class="docutils literal notranslate"><span class="pre">HelloWorld</span></code>. Generally multiple operations are needed, let’s add a new one.</p>
<p>In the previous part <a class="reference internal" href="../Step3/Step3.html#step3"><span class="std std-ref">3. Passing variables to templates</span></a> we have created a form, it will be used to call the operation <code class="docutils literal notranslate"><span class="pre">SelectMonth</span></code>.</p>
<p>Modify the form to add an hidden input to set the operation and add a submit button:</p>
<div class="literal-block-wrapper docutils container" id="id1">
<div class="code-block-caption"><span class="caption-text">templates/HelloWorld.html.twig</span><a class="headerlink" href="#id1" title="Permalink to this code"></a></div>
<div class="highlight-twig notranslate"><div class="highlight"><pre><span></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;myform&#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="x"> </span><span class="cp">{%</span> <span class="k">UIInput</span> <span class="p">F</span><span class="nv">orHidden</span> <span class="o">{</span><span class="nv">sName</span><span class="s1">:&#39;operation&#39;</span><span class="o">,</span> <span class="nv">sValue</span><span class="s1">:&#39;SelectMonth&#39;</span><span class="o">}</span> <span class="cp">%}</span><span class="x"></span>
<span class="linenos">14</span><span class="x"> </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;actions&#39;</span><span class="o">}}</span> <span class="cp">%}</span><span class="x"></span>
<span class="linenos">15</span><span class="x"> </span><span class="cp">{%</span> <span class="k">UIButton</span> <span class="p">F</span><span class="nv">orPrimaryAction</span> <span class="o">{</span><span class="nv">sLabel</span><span class="s1">:&#39;Ok&#39;</span><span class="o">,</span> <span class="nv">bIsSubmit</span><span class="o">:</span><span class="kp">true</span><span class="o">}</span> <span class="cp">%}</span><span class="x"></span>
<span class="linenos">16</span><span class="x"> </span><span class="cp">{%</span> <span class="k">EndUIContentBlock</span> <span class="cp">%}</span><span class="x"></span>
<span class="linenos">17</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 of this template is:</p>
<img alt="../../_images/form.png" src="../../_images/form.png" />
<p>Now add the operation in the controller:</p>
<div class="literal-block-wrapper docutils container" id="id2">
<div class="code-block-caption"><span class="caption-text">src/Controller/MyModuleController.php</span><a class="headerlink" href="#id2" 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="c1">// ...</span>
<span class="linenos"> 4</span>
<span class="linenos"> 5</span><span class="k">class</span> <span class="nc">MyModuleController</span> <span class="k">extends</span> <span class="nx">Controller</span>
<span class="linenos"> 6</span><span class="p">{</span>
<span class="linenos"> 7</span> <span class="c1">// ...</span>
<span class="linenos"> 8</span>
<span class="linenos"> 9</span> <span class="k">public</span> <span class="k">function</span> <span class="nf">OperationSelectMonth</span><span class="p">()</span>
<span class="linenos">10</span> <span class="p">{</span>
<span class="linenos">11</span> <span class="nv">$aMonths</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">12</span> <span class="nv">$iMonth</span> <span class="o">=</span> <span class="nx">utils</span><span class="o">::</span><span class="na">ReadParam</span><span class="p">(</span><span class="s1">&#39;month&#39;</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
<span class="linenos">13</span> <span class="nv">$aParams</span><span class="p">[</span><span class="s1">&#39;sSelectedMonth&#39;</span><span class="p">]</span> <span class="o">=</span> <span class="nv">$aMonths</span><span class="p">[</span><span class="nv">$iMonth</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><em>Disclaimer: The code is for tutorial only, don’t use it in production as no check is done on the entries</em></p>
<p>The corresponding template must be created <code class="docutils literal notranslate"><span class="pre">templates/SelectMonth.html.twig</span></code></p>
<div class="literal-block-wrapper docutils container" id="id3">
<div class="code-block-caption"><span class="caption-text">templates/SelectMonth.html.twig</span><a class="headerlink" href="#id3" 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;Selected month&#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="linenos">3</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;Information&#39;</span><span class="o">}}</span> <span class="cp">%}</span><span class="x"></span>
<span class="linenos">4</span><span class="x"> The selected month is </span><span class="cp">{{</span> <span class="nv">sSelectedMonth</span> <span class="cp">}}</span><span class="x"></span>
<span class="linenos">5</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 of this operation is:</p>
<img alt="../../_images/SelectMonth.png" src="../../_images/SelectMonth.png" />
</section>
</div>
</div>
<footer><div class="rst-footer-buttons" role="navigation" aria-label="Footer">
<a href="../Step3/Step3.html" class="btn btn-neutral float-left" title="3. Passing variables to templates" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> Previous</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="Step4.html">documentation/3.0</a></dd>
<dd><a href="../../../latest/TwigBaseTuto/Step4/Step4.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