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

700 lines
31 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>Alert &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" />
</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>
<li class="toctree-l1"><a class="reference internal" href="../../../TwigBase/TwigBase.html">Twig Base Presentation</a></li>
<li class="toctree-l1"><a class="reference internal" href="../../../TwigBaseTuto/TwigBaseTuto.html">Twig Base Tutorial</a></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>Alert</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="alert">
<span id="id1"></span><h1>Alert<a class="headerlink" href="#alert" title="Permalink to this headline"></a></h1>
<p>Alerts are the main component to give feedback to the user or communicate page specific to system wide messages.
Alerts are a rectangular component displaying a title and a message.</p>
<hr class="docutils" />
<section id="output">
<h2>Output<a class="headerlink" href="#output" title="Permalink to this headline"></a></h2>
<dl class="field-list simple">
<dt class="field-odd">Success Alert</dt>
<dd class="field-odd"><p></p></dd>
</dl>
<img alt="../../../_images/AlertSuccess.png" src="../../../_images/AlertSuccess.png" />
<dl class="field-list simple">
<dt class="field-odd">Failure Alert</dt>
<dd class="field-odd"><p></p></dd>
</dl>
<img alt="../../../_images/AlertFailure.png" src="../../../_images/AlertFailure.png" />
<dl class="field-list simple">
<dt class="field-odd">Information Alert</dt>
<dd class="field-odd"><p></p></dd>
</dl>
<img alt="../../../_images/AlertInformation.png" src="../../../_images/AlertInformation.png" />
<dl class="field-list simple">
<dt class="field-odd">Warning Alert</dt>
<dd class="field-odd"><p></p></dd>
</dl>
<img alt="../../../_images/AlertWarning.png" src="../../../_images/AlertWarning.png" />
</section>
<hr class="docutils" />
<section id="twig-tag">
<h2>Twig Tag<a class="headerlink" href="#twig-tag" title="Permalink to this headline"></a></h2>
<dl class="field-list simple">
<dt class="field-odd">Tag</dt>
<dd class="field-odd"><p><strong>UIAlert</strong></p>
</dd>
<dt class="field-even">Syntax</dt>
<dd class="field-even"><p></p></dd>
</dl>
<div class="highlight-twig notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">UIAlert</span> <span class="p">T</span><span class="nv">ype</span> <span class="o">{</span><span class="p">P</span><span class="nv">arameters</span><span class="o">}</span> <span class="cp">%}</span><span class="x"></span>
<span class="x"> Content Goes Here</span>
<span class="cp">{%</span> <span class="k">EndUIAlert</span> <span class="cp">%}</span><span class="x"></span>
</pre></div>
</div>
<dl class="field-list simple">
<dt class="field-odd">Type</dt>
<dd class="field-odd"><p></p></dd>
</dl>
<table class="docutils align-default">
<colgroup>
<col style="width: 57%" />
<col style="width: 43%" />
</colgroup>
<tbody>
<tr class="row-odd"><td><p><a class="reference internal" href="#alertneutral"><span class="std std-ref">Neutral</span></a></p></td>
<td><p>Make a basis Alert component</p></td>
</tr>
<tr class="row-even"><td><p><a class="reference internal" href="#alertforinformation"><span class="std std-ref">ForInformation</span></a></p></td>
<td><p>Make an Alert component for informational messages</p></td>
</tr>
<tr class="row-odd"><td><p><a class="reference internal" href="#alertforsuccess"><span class="std std-ref">ForSuccess</span></a></p></td>
<td><p>Make an Alert component for successful messages</p></td>
</tr>
<tr class="row-even"><td><p><a class="reference internal" href="#alertforwarning"><span class="std std-ref">ForWarning</span></a></p></td>
<td><p>Make an Alert component for warning messages</p></td>
</tr>
<tr class="row-odd"><td><p><a class="reference internal" href="#alertfordanger"><span class="std std-ref">ForDanger</span></a></p></td>
<td><p>Make an Alert component for danger messages</p></td>
</tr>
<tr class="row-even"><td><p><a class="reference internal" href="#alertforfailure"><span class="std std-ref">ForFailure</span></a></p></td>
<td><p>Make an Alert component for failure messages</p></td>
</tr>
<tr class="row-odd"><td><p><a class="reference internal" href="#alertwithbrandingprimarycolor"><span class="std std-ref">WithBrandingPrimaryColor</span></a></p></td>
<td><p>Make an Alert component with primary color scheme</p></td>
</tr>
<tr class="row-even"><td><p><a class="reference internal" href="#alertwithbrandingsecondarycolor"><span class="std std-ref">WithBrandingSecondaryColor</span></a></p></td>
<td><p>Make an Alert component with secondary color scheme</p></td>
</tr>
</tbody>
</table>
<section id="alert-neutral">
<span id="alertneutral"></span><h3>Alert Neutral<a class="headerlink" href="#alert-neutral" title="Permalink to this headline"></a></h3>
<dl class="field-list simple">
<dt class="field-odd">syntax</dt>
<dd class="field-odd"><p></p></dd>
</dl>
<div class="highlight-twig notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">UIAlert</span> <span class="p">N</span><span class="nv">eutral</span> <span class="o">{</span><span class="nv">sTitle</span><span class="s1">:&#39;value&#39;</span><span class="o">,</span> <span class="nv">sContent</span><span class="s1">:&#39;value&#39;</span><span class="o">,</span> <span class="nv">sId</span><span class="s1">:&#39;value&#39;</span><span class="o">}</span> <span class="cp">%}</span><span class="x"></span>
<span class="x"> Content Goes Here</span>
<span class="cp">{%</span> <span class="k">EndUIAlert</span> <span class="cp">%}</span><span class="x"></span>
</pre></div>
</div>
<dl class="field-list simple">
<dt class="field-odd">parameters</dt>
<dd class="field-odd"><p></p></dd>
</dl>
<table class="docutils align-default">
<colgroup>
<col style="width: 12%" />
<col style="width: 10%" />
<col style="width: 12%" />
<col style="width: 7%" />
<col style="width: 59%" />
</colgroup>
<tbody>
<tr class="row-odd"><td><p>sTitle</p></td>
<td><p>string</p></td>
<td><p>optional</p></td>
<td><p>‘’</p></td>
<td><p>Title of the alert</p></td>
</tr>
<tr class="row-even"><td><p>sContent</p></td>
<td><p>string</p></td>
<td><p>optional</p></td>
<td><p>‘’</p></td>
<td><p>The raw HTML content, must be already sanitized</p></td>
</tr>
<tr class="row-odd"><td><p>sId</p></td>
<td><p>string</p></td>
<td><p>optional</p></td>
<td><p>NULL</p></td>
<td><p>id of the html block</p></td>
</tr>
</tbody>
</table>
</section>
<section id="alert-forinformation">
<span id="alertforinformation"></span><h3>Alert ForInformation<a class="headerlink" href="#alert-forinformation" title="Permalink to this headline"></a></h3>
<dl class="field-list simple">
<dt class="field-odd">syntax</dt>
<dd class="field-odd"><p></p></dd>
</dl>
<div class="highlight-twig notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">UIAlert</span> <span class="p">F</span><span class="nv">orInformation</span> <span class="o">{</span><span class="nv">sTitle</span><span class="s1">:&#39;value&#39;</span><span class="o">,</span> <span class="nv">sContent</span><span class="s1">:&#39;value&#39;</span><span class="o">,</span> <span class="nv">sId</span><span class="s1">:&#39;value&#39;</span><span class="o">}</span> <span class="cp">%}</span><span class="x"></span>
<span class="x"> Content Goes Here</span>
<span class="cp">{%</span> <span class="k">EndUIAlert</span> <span class="cp">%}</span><span class="x"></span>
</pre></div>
</div>
<dl class="field-list simple">
<dt class="field-odd">parameters</dt>
<dd class="field-odd"><p></p></dd>
</dl>
<table class="docutils align-default">
<colgroup>
<col style="width: 12%" />
<col style="width: 10%" />
<col style="width: 12%" />
<col style="width: 7%" />
<col style="width: 59%" />
</colgroup>
<tbody>
<tr class="row-odd"><td><p>sTitle</p></td>
<td><p>string</p></td>
<td><p>optional</p></td>
<td><p>‘’</p></td>
<td><p>Title of the alert</p></td>
</tr>
<tr class="row-even"><td><p>sContent</p></td>
<td><p>string</p></td>
<td><p>optional</p></td>
<td><p>‘’</p></td>
<td><p>The raw HTML content, must be already sanitized</p></td>
</tr>
<tr class="row-odd"><td><p>sId</p></td>
<td><p>string</p></td>
<td><p>optional</p></td>
<td><p>NULL</p></td>
<td><p>id of the html block</p></td>
</tr>
</tbody>
</table>
</section>
<section id="alert-forsuccess">
<span id="alertforsuccess"></span><h3>Alert ForSuccess<a class="headerlink" href="#alert-forsuccess" title="Permalink to this headline"></a></h3>
<dl class="field-list simple">
<dt class="field-odd">syntax</dt>
<dd class="field-odd"><p></p></dd>
</dl>
<div class="highlight-twig notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">UIAlert</span> <span class="p">F</span><span class="nv">orSuccess</span> <span class="o">{</span><span class="nv">sTitle</span><span class="s1">:&#39;value&#39;</span><span class="o">,</span> <span class="nv">sContent</span><span class="s1">:&#39;value&#39;</span><span class="o">,</span> <span class="nv">sId</span><span class="s1">:&#39;value&#39;</span><span class="o">}</span> <span class="cp">%}</span><span class="x"></span>
<span class="x"> Content Goes Here</span>
<span class="cp">{%</span> <span class="k">EndUIAlert</span> <span class="cp">%}</span><span class="x"></span>
</pre></div>
</div>
<dl class="field-list simple">
<dt class="field-odd">parameters</dt>
<dd class="field-odd"><p></p></dd>
</dl>
<table class="docutils align-default">
<colgroup>
<col style="width: 12%" />
<col style="width: 10%" />
<col style="width: 12%" />
<col style="width: 7%" />
<col style="width: 59%" />
</colgroup>
<tbody>
<tr class="row-odd"><td><p>sTitle</p></td>
<td><p>string</p></td>
<td><p>optional</p></td>
<td><p>‘’</p></td>
<td><p>Title of the alert</p></td>
</tr>
<tr class="row-even"><td><p>sContent</p></td>
<td><p>string</p></td>
<td><p>optional</p></td>
<td><p>‘’</p></td>
<td><p>The raw HTML content, must be already sanitized</p></td>
</tr>
<tr class="row-odd"><td><p>sId</p></td>
<td><p>string</p></td>
<td><p>optional</p></td>
<td><p>NULL</p></td>
<td></td>
</tr>
</tbody>
</table>
</section>
<section id="alert-forwarning">
<span id="alertforwarning"></span><h3>Alert ForWarning<a class="headerlink" href="#alert-forwarning" title="Permalink to this headline"></a></h3>
<dl class="field-list simple">
<dt class="field-odd">syntax</dt>
<dd class="field-odd"><p></p></dd>
</dl>
<div class="highlight-twig notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">UIAlert</span> <span class="p">F</span><span class="nv">orWarning</span> <span class="o">{</span><span class="nv">sTitle</span><span class="s1">:&#39;value&#39;</span><span class="o">,</span> <span class="nv">sContent</span><span class="s1">:&#39;value&#39;</span><span class="o">,</span> <span class="nv">sId</span><span class="s1">:&#39;value&#39;</span><span class="o">}</span> <span class="cp">%}</span><span class="x"></span>
<span class="x"> Content Goes Here</span>
<span class="cp">{%</span> <span class="k">EndUIAlert</span> <span class="cp">%}</span><span class="x"></span>
</pre></div>
</div>
<dl class="field-list simple">
<dt class="field-odd">parameters</dt>
<dd class="field-odd"><p></p></dd>
</dl>
<table class="docutils align-default">
<colgroup>
<col style="width: 12%" />
<col style="width: 10%" />
<col style="width: 12%" />
<col style="width: 7%" />
<col style="width: 59%" />
</colgroup>
<tbody>
<tr class="row-odd"><td><p>sTitle</p></td>
<td><p>string</p></td>
<td><p>optional</p></td>
<td><p>‘’</p></td>
<td><p>Title of the alert</p></td>
</tr>
<tr class="row-even"><td><p>sContent</p></td>
<td><p>string</p></td>
<td><p>optional</p></td>
<td><p>‘’</p></td>
<td><p>The raw HTML content, must be already sanitized</p></td>
</tr>
<tr class="row-odd"><td><p>sId</p></td>
<td><p>string</p></td>
<td><p>optional</p></td>
<td><p>NULL</p></td>
<td><p>id of the html block</p></td>
</tr>
</tbody>
</table>
</section>
<section id="alert-fordanger">
<span id="alertfordanger"></span><h3>Alert ForDanger<a class="headerlink" href="#alert-fordanger" title="Permalink to this headline"></a></h3>
<dl class="field-list simple">
<dt class="field-odd">syntax</dt>
<dd class="field-odd"><p></p></dd>
</dl>
<div class="highlight-twig notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">UIAlert</span> <span class="p">F</span><span class="nv">orDanger</span> <span class="o">{</span><span class="nv">sTitle</span><span class="s1">:&#39;value&#39;</span><span class="o">,</span> <span class="nv">sContent</span><span class="s1">:&#39;value&#39;</span><span class="o">,</span> <span class="nv">sId</span><span class="s1">:&#39;value&#39;</span><span class="o">}</span> <span class="cp">%}</span><span class="x"></span>
<span class="x"> Content Goes Here</span>
<span class="cp">{%</span> <span class="k">EndUIAlert</span> <span class="cp">%}</span><span class="x"></span>
</pre></div>
</div>
<dl class="field-list simple">
<dt class="field-odd">parameters</dt>
<dd class="field-odd"><p></p></dd>
</dl>
<table class="docutils align-default">
<colgroup>
<col style="width: 12%" />
<col style="width: 10%" />
<col style="width: 12%" />
<col style="width: 7%" />
<col style="width: 59%" />
</colgroup>
<tbody>
<tr class="row-odd"><td><p>sTitle</p></td>
<td><p>string</p></td>
<td><p>optional</p></td>
<td><p>‘’</p></td>
<td><p>Title of the alert</p></td>
</tr>
<tr class="row-even"><td><p>sContent</p></td>
<td><p>string</p></td>
<td><p>optional</p></td>
<td><p>‘’</p></td>
<td><p>The raw HTML content, must be already sanitized</p></td>
</tr>
<tr class="row-odd"><td><p>sId</p></td>
<td><p>string</p></td>
<td><p>optional</p></td>
<td><p>NULL</p></td>
<td><p>id of the html block</p></td>
</tr>
</tbody>
</table>
</section>
<section id="alert-forfailure">
<span id="alertforfailure"></span><h3>Alert ForFailure<a class="headerlink" href="#alert-forfailure" title="Permalink to this headline"></a></h3>
<dl class="field-list simple">
<dt class="field-odd">syntax</dt>
<dd class="field-odd"><p></p></dd>
</dl>
<div class="highlight-twig notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">UIAlert</span> <span class="p">F</span><span class="nv">orFailure</span> <span class="o">{</span><span class="nv">sTitle</span><span class="s1">:&#39;value&#39;</span><span class="o">,</span> <span class="nv">sContent</span><span class="s1">:&#39;value&#39;</span><span class="o">,</span> <span class="nv">sId</span><span class="s1">:&#39;value&#39;</span><span class="o">}</span> <span class="cp">%}</span><span class="x"></span>
<span class="x"> Content Goes Here</span>
<span class="cp">{%</span> <span class="k">EndUIAlert</span> <span class="cp">%}</span><span class="x"></span>
</pre></div>
</div>
<dl class="field-list simple">
<dt class="field-odd">parameters</dt>
<dd class="field-odd"><p></p></dd>
</dl>
<table class="docutils align-default">
<colgroup>
<col style="width: 12%" />
<col style="width: 10%" />
<col style="width: 12%" />
<col style="width: 7%" />
<col style="width: 59%" />
</colgroup>
<tbody>
<tr class="row-odd"><td><p>sTitle</p></td>
<td><p>string</p></td>
<td><p>optional</p></td>
<td><p>‘’</p></td>
<td><p>Title of the alert</p></td>
</tr>
<tr class="row-even"><td><p>sContent</p></td>
<td><p>string</p></td>
<td><p>optional</p></td>
<td><p>‘’</p></td>
<td><p>The raw HTML content, must be already sanitized</p></td>
</tr>
<tr class="row-odd"><td><p>sId</p></td>
<td><p>string</p></td>
<td><p>optional</p></td>
<td><p>NULL</p></td>
<td><p>id of the html block</p></td>
</tr>
</tbody>
</table>
</section>
<section id="alert-withbrandingprimarycolor">
<span id="alertwithbrandingprimarycolor"></span><h3>Alert WithBrandingPrimaryColor<a class="headerlink" href="#alert-withbrandingprimarycolor" title="Permalink to this headline"></a></h3>
<dl class="field-list simple">
<dt class="field-odd">syntax</dt>
<dd class="field-odd"><p></p></dd>
</dl>
<div class="highlight-twig notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">UIAlert</span> <span class="p">W</span><span class="nv">ithBrandingPrimaryColor</span> <span class="o">{</span><span class="nv">sTitle</span><span class="s1">:&#39;value&#39;</span><span class="o">,</span> <span class="nv">sContent</span><span class="s1">:&#39;value&#39;</span><span class="o">,</span> <span class="nv">sId</span><span class="s1">:&#39;value&#39;</span><span class="o">}</span> <span class="cp">%}</span><span class="x"></span>
<span class="x"> Content Goes Here</span>
<span class="cp">{%</span> <span class="k">EndUIAlert</span> <span class="cp">%}</span><span class="x"></span>
</pre></div>
</div>
<dl class="field-list simple">
<dt class="field-odd">parameters</dt>
<dd class="field-odd"><p></p></dd>
</dl>
<table class="docutils align-default">
<colgroup>
<col style="width: 12%" />
<col style="width: 10%" />
<col style="width: 12%" />
<col style="width: 7%" />
<col style="width: 59%" />
</colgroup>
<tbody>
<tr class="row-odd"><td><p>sTitle</p></td>
<td><p>string</p></td>
<td><p>optional</p></td>
<td><p>‘’</p></td>
<td><p>Title of the alert</p></td>
</tr>
<tr class="row-even"><td><p>sContent</p></td>
<td><p>string</p></td>
<td><p>optional</p></td>
<td><p>‘’</p></td>
<td><p>The raw HTML content, must be already sanitized</p></td>
</tr>
<tr class="row-odd"><td><p>sId</p></td>
<td><p>string</p></td>
<td><p>optional</p></td>
<td><p>NULL</p></td>
<td><p>id of the html block</p></td>
</tr>
</tbody>
</table>
</section>
<section id="alert-withbrandingsecondarycolor">
<span id="alertwithbrandingsecondarycolor"></span><h3>Alert WithBrandingSecondaryColor<a class="headerlink" href="#alert-withbrandingsecondarycolor" title="Permalink to this headline"></a></h3>
<dl class="field-list simple">
<dt class="field-odd">syntax</dt>
<dd class="field-odd"><p></p></dd>
</dl>
<div class="highlight-twig notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">UIAlert</span> <span class="p">W</span><span class="nv">ithBrandingSecondaryColor</span> <span class="o">{</span><span class="nv">sTitle</span><span class="s1">:&#39;value&#39;</span><span class="o">,</span> <span class="nv">sContent</span><span class="s1">:&#39;value&#39;</span><span class="o">,</span> <span class="nv">sId</span><span class="s1">:&#39;value&#39;</span><span class="o">}</span> <span class="cp">%}</span><span class="x"></span>
<span class="x"> Content Goes Here</span>
<span class="cp">{%</span> <span class="k">EndUIAlert</span> <span class="cp">%}</span><span class="x"></span>
</pre></div>
</div>
<dl class="field-list simple">
<dt class="field-odd">parameters</dt>
<dd class="field-odd"><p></p></dd>
</dl>
<table class="docutils align-default">
<colgroup>
<col style="width: 12%" />
<col style="width: 10%" />
<col style="width: 12%" />
<col style="width: 7%" />
<col style="width: 59%" />
</colgroup>
<tbody>
<tr class="row-odd"><td><p>sTitle</p></td>
<td><p>string</p></td>
<td><p>optional</p></td>
<td><p>‘’</p></td>
<td><p>Title of the alert</p></td>
</tr>
<tr class="row-even"><td><p>sContent</p></td>
<td><p>string</p></td>
<td><p>optional</p></td>
<td><p>‘’</p></td>
<td><p>The raw HTML content, must be already sanitized</p></td>
</tr>
<tr class="row-odd"><td><p>sId</p></td>
<td><p>string</p></td>
<td><p>optional</p></td>
<td><p>NULL</p></td>
<td><p>id of the html block</p></td>
</tr>
</tbody>
</table>
</section>
<section id="alert-common-parameters">
<h3>Alert common parameters<a class="headerlink" href="#alert-common-parameters" title="Permalink to this headline"></a></h3>
<table class="docutils align-default">
<colgroup>
<col style="width: 26%" />
<col style="width: 9%" />
<col style="width: 65%" />
</colgroup>
<tbody>
<tr class="row-odd"><td><p>AddCSSClass</p></td>
<td><p>string</p></td>
<td><p>CSS class to add to the generated html block</p></td>
</tr>
<tr class="row-even"><td><p>AddCSSClasses</p></td>
<td><p>array</p></td>
<td><p>like &lt;code&gt;[‘ibo-is-hidden’, ‘ibo-alert–body’]&lt;/code&gt;</p></td>
</tr>
<tr class="row-odd"><td><p>AddCssFileRelPath</p></td>
<td><p>string</p></td>
<td></td>
</tr>
<tr class="row-even"><td><p>AddDeferredBlock</p></td>
<td><p>iUIBlock</p></td>
<td></td>
</tr>
<tr class="row-odd"><td><p>AddHtml</p></td>
<td><p>string</p></td>
<td></td>
</tr>
<tr class="row-even"><td><p>AddJsFileRelPath</p></td>
<td><p>string</p></td>
<td></td>
</tr>
<tr class="row-odd"><td><p>AddMultipleCssFilesRelPaths</p></td>
<td><p>array</p></td>
<td></td>
</tr>
<tr class="row-even"><td><p>AddMultipleJsFilesRelPaths</p></td>
<td><p>array</p></td>
<td></td>
</tr>
<tr class="row-odd"><td><p>AddSubBlock</p></td>
<td><p>iUIBlock</p></td>
<td></td>
</tr>
<tr class="row-even"><td><p>CSSClasses</p></td>
<td><p>array</p></td>
<td><p>like &lt;code&gt;[‘ibo-is-hidden’, ‘ibo-alert–body’]&lt;/code&gt;</p></td>
</tr>
<tr class="row-odd"><td><p>Color</p></td>
<td><p>string</p></td>
<td><p>Color of the alert (check CSS classes ibo-is-&lt;color&gt; for colors)</p></td>
</tr>
<tr class="row-even"><td><p>Content</p></td>
<td><p>string</p></td>
<td><p>The raw HTML content, must be already sanitized</p></td>
</tr>
<tr class="row-odd"><td><p>DataAttributes</p></td>
<td><p>array</p></td>
<td><p>Array of data attributes in the format [‘name’ =&gt; ‘value’]</p></td>
</tr>
<tr class="row-even"><td><p>DeferredBlocks</p></td>
<td><p>array</p></td>
<td></td>
</tr>
<tr class="row-odd"><td><p>HasForcedDiv</p></td>
<td><p>bool</p></td>
<td></td>
</tr>
<tr class="row-even"><td><p>IsClosable</p></td>
<td><p>bool</p></td>
<td><p>Indicates if the user can remove the alert from the screen</p></td>
</tr>
<tr class="row-odd"><td><p>IsCollapsible</p></td>
<td><p>bool</p></td>
<td><p>Indicates if the user can collapse the alert to display only the title</p></td>
</tr>
<tr class="row-even"><td><p>IsHidden</p></td>
<td><p>bool</p></td>
<td></td>
</tr>
<tr class="row-odd"><td><p>OpenedByDefault</p></td>
<td><p>bool</p></td>
<td><p>Indicates if the alert is collapsed or not by default</p></td>
</tr>
<tr class="row-even"><td><p>SubBlocks</p></td>
<td><p>array</p></td>
<td></td>
</tr>
<tr class="row-odd"><td><p>Title</p></td>
<td><p>string</p></td>
<td><p>Title of the alert</p></td>
</tr>
</tbody>
</table>
<hr class="docutils" />
</section>
</section>
<section id="examples">
<h2>Examples<a class="headerlink" href="#examples" title="Permalink to this headline"></a></h2>
<p>Example to generate an temporary information with a spinner (on the real display the spinner is animated)</p>
<div class="highlight-twig notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">UIAlert</span> <span class="p">F</span><span class="nv">orInformation</span> <span class="o">{</span><span class="s1">&#39;sId&#39;:&#39;header-requirements&#39;</span><span class="o">,</span> <span class="s1">&#39;IsCollapsible&#39;</span><span class="o">:</span><span class="kp">false</span><span class="o">,</span> <span class="s1">&#39;IsClosable&#39;</span><span class="o">:</span><span class="kp">false</span><span class="o">}</span> <span class="cp">%}</span><span class="x"></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="s1">&#39;aContainerClasses&#39;</span><span class="o">:[</span><span class="s1">&#39;ibo-update-core-header-requirements&#39;</span><span class="o">],</span>
<span class="s1">&#39;sId&#39;:&#39;can-core-update&#39;</span><span class="o">}</span> <span class="cp">%}</span><span class="x"></span>
<span class="x"> </span><span class="cp">{{</span> <span class="s1">&#39;iTopUpdate:UI:CanCoreUpdate:Loading&#39;</span><span class="o">|</span><span class="nf">dict_s</span> <span class="cp">}}</span><span class="x"></span>
<span class="x"> </span><span class="cp">{%</span> <span class="k">UISpinner</span> <span class="p">S</span><span class="nv">tandard</span> <span class="o">{}</span> <span class="cp">%}</span><span class="x"></span>
<span class="x"> </span><span class="cp">{%</span> <span class="k">EndUIContentBlock</span> <span class="cp">%}</span><span class="x"></span>
<span class="cp">{%</span> <span class="k">EndUIAlert</span> <span class="cp">%}</span><span class="x"></span>
</pre></div>
</div>
<p>The information displayed:</p>
<img alt="../../../_images/AlertInformationExample.png" src="../../../_images/AlertInformationExample.png" />
<p>The javascript to set a success or a failure in return of an ajax call</p>
<div class="highlight-js notranslate"><div class="highlight"><pre><span></span><span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">oRequirements</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#header-requirements&quot;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">oCanCoreUpdate</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#can-core-update&quot;</span><span class="p">);</span>
<span class="nx">oCanCoreUpdate</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">sMessage</span><span class="p">);</span>
<span class="nx">oRequirements</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&quot;ibo-is-information&quot;</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">bStatus</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">oRequirements</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&quot;ibo-is-success&quot;</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">oRequirements</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&quot;ibo-is-failure&quot;</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
</pre></div>
</div>
<hr class="docutils" />
<p>Example to generate a hidden alert to display using javascript in case of error</p>
<div class="highlight-twig notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">UIAlert</span> <span class="p">F</span><span class="nv">orFailure</span> <span class="o">{</span><span class="nv">sId</span><span class="s2">:&quot;dir_error_outer&quot;</span><span class="o">,</span> <span class="p">I</span><span class="nv">sCollapsible</span><span class="o">:</span><span class="kp">false</span><span class="o">,</span> <span class="p">I</span><span class="nv">sClosable</span><span class="o">:</span><span class="kp">false</span><span class="o">,</span> <span class="p">I</span><span class="nv">sHidden</span><span class="o">:</span><span class="kp">true</span><span class="o">}</span> <span class="cp">%}</span><span class="x"></span>
<span class="x"> *The content goes here*</span>
<span class="cp">{%</span> <span class="k">EndUIAlert</span> <span class="cp">%}</span><span class="x"></span>
</pre></div>
</div>
<p>The javascript to show the alert</p>
<div class="highlight-js notranslate"><div class="highlight"><pre><span></span><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#dir_error_outer&quot;</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&quot;ibo-is-hidden&quot;</span><span class="p">);</span>
</pre></div>
</div>
<p>The error displayed:</p>
<img alt="../../../_images/AlertFailureExample.png" src="../../../_images/AlertFailureExample.png" />
</section>
</section>
</div>
</div>
<footer>
<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/latest
<span class="fa fa-caret-down"></span>
</span>
<div class="rst-other-versions">
<dl>
<dt>Branches</dt>
<dd><a href="../../../../3.0/generated/Component/Alert/Alert.html">documentation/3.0</a></dd>
<dd><a href="Alert.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