Tvorba aplikací pro mobilní zařízení (tablet, mobil, skladový terminál)

1. Mobilní aplikace ESO9

Je aplikace provozovaná na mobilním zařízení. Typickým příkladem může být tablet nebo mobilní telefon. Vlastnost, že se jedná o mobilní aplikaci, se nastavuje u aplikace ve správci ESO9. Aplikační server při generování stránky přilinkuje skripty a styly uvedené v sekci „Mobile“ souboru Eso9.ver.xml. V aplikaci je využit Framework jQuery mobile, který sám o sobě optimalizuje stránky k zobrazení na mobilním zařízení. Dále pak vlastní skript a styl eso9-mobile.js a eso9-mobile.css.

2. Dostupné prvky mobilní aplikace

2.1 Záhlaví

Generuje se automaticky a do textu přebírá tag title z hlavičky html. Přes záhlaví je možné vyvolat menu, které se definuje za pomoci stránky Esomenu.htm. Vyvolat se dá v desktopové aplikaci pravým tlačítkem myši a v mobilním zařízení dvojitým tapnutím prstem.

2.2 Navštívené

V mobilní aplikaci je možné přidat do menu odkaz na navštívené, které jsou upraveny pro zobrazení na mobilním zařízení. Stránka ve webu „Nastaveni/Navstivene.htm“. Volá se pomocí url „esoform.asp?TUrl=nastaveni/navstivene.htm“. Pro správnou funkci uzlu ESO9 je zapotřebí upravit soubor NavigOK.json nebo NavigOK6.0.json (podle toho, který vaše aplikace využívá) a přidat do něj paramer „homePage“. Př.

{
  "enableGeolocation": true,
  "homePage": "esoform.asp?Tpage=esoframe.htm&formType=DASHOK"
}

2.3 Vysouvací panel

Vysouvací panel slouží k sestavení menu akcí pro formulář. Máme dva panely Levý a pravý. Na stránce se otevírají tažením prstu vlevo nebo vpravo. Indikátorem, že stránka obsahuje panel je ikona se šipkou v záhlaví stránky. Do stránky se vloží div s id „left-panel“ nebo „right-panel“. Hyperlinky uvnitř tohoto divu jsou automaticky transformovány na tlačítka. Div může být ve stránce statický, nebo dynamicky načítaný.

2.3.1 Příklad

2.3.1.1 Statický

Hyperlinky jsou v divu tak jak jsou zapsány

<div id="left-panel">
  <a href="javascript:history.back()" class="success" data-role="button">Zpět</a>
  <br>
  <a href="esoform.asp?Tpage=esoframe.htm&formType=DASHOK&Requery=1" class="warning">Úvod</a>
  <a href="esoform.asp?FormType=ModuleInfo">Navštívené</a>
  <a href="esoform.asp?TURL=Default.htm&FormType=UnLogUser" class="danger">Odhlásit</a>
</div>

2.3.1.2 Dynamický

Obsah divu se načítá dynamicky. To je zajištěno parametrem data-ajax="true" a následným hyperlinkem uvnitř divu. V příkladu „esoform.asp?turl=leftpanel-uvod.htm“. Do hyperlinku je možné předávat i parametry závislé formy, ale celý div musí být ve stránce vložený uvnitř formy.

<div id="left-panel" data-ajax="true">
  <a href="esoform.asp?turl=leftpanel-uvod.htm">panel</a>
</div>

2.4 Tlačítko

Tlačítko jde do stránky vložit dvěma způsoby:

1. Tagem input typu button. Formátuje se automaticky.

2. Hyperlink. Z hyperlinku se button vytvoří vlastností data-role="button"

Tlačítko se dá obarvovat vlastností class, která může nabývat hodnot“ success, warning, danger, primary, info a inverse

2.4.1 Příklad

2.4.1.1 Hyperlink

<form method="post" name="HDOK">
  <input type="hidden" name="Navbar" value="None">
  <input type="hidden" name="View" value="select convert(varchar(40),'') as MF_FINDTEXT">
  <div id="left-panel" data-ajax="true">
    <a href="esoform.asp?turl=leftpanel.htm">Úvod</a>
  </div>
  <table>
    <tr align="center"><td><span>zadejte hledaný text: </span></td></tr>
    <tr align="center"><td><input name="MF_FINDTEXT" size="40" maxlength="20" type="text"
      autocomplete="off" tabindex="0" /></td></tr>
    <tr align="center"><td><a
      href="esoform.asp?Tpage=subjekt/VyberSubjektGrid.htm&RelType=Parameters&FormType=DASHOK&Requery=1" class="success" data-role="button">Hledej</a></td></tr>
  </table>
</form>

2.4.1.2 Obarvení

2.5 Akce na „Enter“

V mobilní aplikaci je pro první formu ve formuláři implementována funkce, která se spouští na poslední editovatelné položce ve formuláři po stisknutí klávesy enter. Ve stránce se vyhledá první hyperlink a na ten se provede klik. Je to pomůcka pro obsluhu aby nemusela po vyplnění formuláře klikat na tlačítko s akcí pro přechod na následující stránku.

2.5.1 Příklad

V následujícím příkladu po vyplnění pole název subjektu a zadáním Enter se přejde na sestavu, která vypíše vyhledané subjekty v komponentě DASHOK/GRID

<form method="post" name="HDOK">
  <input type="hidden" name="Navbar" value="None">
  <input type="hidden" name="View" value="select convert(varchar(40),'') as MF_FINDTEXT">
  <table>
    <tr align="center"><td><span>zadejte hledaný text: </span></td></tr>
    <tr align="center">
      <td>
        <input name="MF_FINDTEXT" size="40" maxlength="20" type="text" autocomplete="off" tabindex="0"
          />
      </td>
    </tr>
    <tr align="center">
      <td>
        <a
          href="esoform.asp?Tpage=subjekt/VyberSubjektGrid.htm&RelType=Parameters&FormType=DASHOK&Requery=1" class="success" data-role="button">Hledej</a>
      </td>
    </tr>
  </table>
</form>

2.6 Zákaz akce na „Enter“

V případě že je třeba z nějakého důvodu zakázat předchozí funkčnost, kdy se po enteru spustí první URL je třeba do stránky vložit JS parametr eso9_mobile.enterRedirectEnable a nastavit jej na false

2.6.1 Příklad

<body>
  <script>
    eso9_mobile.enterRedirectEnable = false;
  <script>
  .
  .
</body>

2.7 Redirect

V mobilní aplikaci pro sklady se využívá funkčnosti, při které se po zadání dat ve formuláři přechází na sestavu idc/htx, která vypisuje vyhledaná data, nebo se využívá jen pro zapsání údajů do databáze. Např. založení dokladu a následné zobrazení formuláře dokladu. Pro tento případ je vhodné nevypisovat do stránky data, ale rovnou přejít na další stránku s využitím dat vrácených z IDC. K tomuto se používá funkce eso9_mobile.redirect.

2.7.1 Příklad

2.7.2 Přesměrování po založení dokladu.

Předpokládáme, že v IDC je zapsaný kód pro založení dokladu a ve výstupním resultsetu je vráceno IDHDOK_NEW založeného dokladu. Tělo v HTX předloze bude obsahovat funkci pro přechod na další stránku.

<%begindetail%>
<script type="text/javascript">
eso9_mobile.redirect('esoform.asp?Tpage=doklad/zalozenyDoklad.htm&Reltype=Parameters&IDHDOK=<%IDHDOK_NEW%>');
</script>
<%enddetail%>

2.8 Automatické ukončení navštívených

V aplikacích, kde dochází k otvírání mnoha stránek v první úrovni, kde se nezavírají navštívené automaticky po přechodu na vrcholovou činnost, je nutné navigaci ukončovat ručně. Je to proto, že mnoho otevřených datových zdrojů zatěžuje aplikační server. V aplikaci k tomu můžete použít funkci eso9_mobile.closenavig. Tato funkce se musí používat s rozumem a na místech, která to umožňují. Nelze volat na formulářích s formou, protože se z navigace zavře i tento formulář a tím se stane neaktivním. Jde tedy použít na stránce volané s parametrem TURL nebo v sestavě IDC/HTX. Vhodným místem je třeba úvodní stránka esoframe.htm.

2.8.1 Příklad

Do stránky stačí vložit následující script

<script>
eso9_mobile.closenavig();
</script>

2.9 Hyperlinky s dodatečným ověřením

Pro případ kdy je potřeba pro přechod na stránku nebo sestavu vyžadovat po uživateli zadání hesla je možné využít následující konstrukci. Jedná se o funkci eso9_mobile.redirectPass('url1','url2'), která provede volání první url1. Pokud je v návratové stránce Typicky sestava IDC/HTX div <div id="Eso9_INFO"> </div> přechází se rovnou na url2. Pokud je návratová stránka s div <div id="Eso9_ERROR"></div> Zobrazí se dialog se zadáním hesla. Po zadání hesla se volá opět url1 kde je do url přidán parametr &UZIV_HESLO=zadaneheslo. S tímto parametrem se následně může pracovat ve stránce volané na url1. Dále se postupuje stejně s návratovou hodnotou Eso9_INFO nebo Eso9_ERROR.

2.9.1 Příklad

Zadání modelového příkladu: Pro zobrazení tiskového formuláře faktury je třeba zadat heslo uživatele. Pokud uživatel heslo zadá správně, nemusí následně po dobu 5 minut zadávat toho heslo znovu, jestliže si chce zobrazit další fakturu. Hyperlink na formuláři

<a href=""
  onclick="eso9_mobile.redirectPass('esoform.asp?tpage=nastaveni/uzivkontrola.idc&RelType=Parameters&Requery=1','esoform.asp?FormType=GenRep&kod_sestavy=favform.idc&RelType=Parameters');"
  data-role="button">tisk faktura</a>

uzivkontrola.idc – Volá se 2x. poprvé se provede verifikace, jestli je třeba zadávat heslo. Pokud je error, zobrazí se dialog pro zadání hesla. Po zadání hesla se volá znovu, ale s parametrem UZIV_HESLO. Provede verifikaci uživatele a zadaného hesla. Tato kontrola může být uživatelsky upravena. Uživatel nemusí nezbytně zadávat heslo, které má pro přístup do aplikace. Může to být třeba pin vygenerovaný a poslaný na mobil. Fantazii se zde meze nekladou. Výstupem musí být resultset s polem err kde 0 znamená že je akce ověřena a 1, že došlo k chybě. Následně se vypíše do htx

DECLARE @IDUZIVATEL INT,
        @UZIV_HESLO VARCHAR(100),
        @KOD_UZIV   VARCHAR(100)
        DECLARE @STATUS INT = 0
SELECT @IDUZIVATEL = %IDLOGUSER%,
       @UZIV_HESLO = '%UZIV_HESLO%'
IF NOT EXISTS (SELECT * FROM SYSOBJECTS WHERE ID = OBJECT_ID('DBO.XXUZIVKONTRHESLO') AND
SYSSTAT & 0XF = 3)
BEGIN
    CREATE TABLE DBO.XXUZIVKONTRHESLO
    (
      IDUZIVATEL INT,
      DTDATUM    DATETIME,
      VLCHYBA    SMALLINT /*0- BEZ CHYBY, 1-CHYBNE HESLO*/
    )
END
/*ZRUSIM STARE*/
DELETE XXUZIVKONTRHESLO
WHERE IDUZIVATEL = @IDUZIVATEL
      AND
      DTDATUM <= DATEADD(MINUTE,-5, GETDATE())
      AND
      VLCHYBA = 0
SELECT @KOD_UZIV = KOD_UZIV
       FROM UZIVATEL
       WHERE IDUZIVATEL = @IDUZIVATEL
IF EXISTS (SELECT * FROM XXUZIVKONTRHESLO WHERE IDUZIVATEL = @IDUZIVATEL AND VLCHYBA = 0)
BEGIN
  GOTO OK
END
IF (ISNULL(@UZIV_HESLO,'') <> '')
BEGIN
  EXEC @STATUS = SPAUTENTICATEUSER @KOD_UZIV   = @KOD_UZIV,
                                   @UZIV_HESLO = @UZIV_HESLO
END ELSE
BEGIN
  SELECT @STATUS = 50000
END
IF @STATUS = 0
BEGIN
    INSERT XXUZIVKONTRHESLO
    SELECT @IDUZIVATEL, GETDATE(), 0
END ELSE IF (ISNULL(@UZIV_HESLO,'') <> '')
BEGIN
    INSERT XXUZIVKONTRHESLO
    SELECT @IDUZIVATEL, GETDATE(), 1
END
OK:
SELECT CASE WHEN @STATUS = 0 THEN 0 ELSE 1 END AS err

uzivkontrola.htx – výstupem HTX musí být div s ID Eso9_INFO nebo Eso9_ERROR

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
  <title>Kontrola hesla</title>
</head>
<body>
  <%begindetail%>
    <%if err = 0%>
      <div id="Eso9_INFO">Přihlášení OK</div>
    <%endif%>
    <%if err = 1%>
      <div id="Eso9_ERROR">Chyba při přihlášení"</div>
    <%endif%>
  <%enddetail%>
  </div>
</body>
</html>

2.10 Mobilní Browse

V mobilní aplikaci lze ve formuláři zobrazit browse, který lze ovládat dotykem prstu. Obdoba widgetu grid z Dashboardu. Ovládání je omezeno na výběr řádku, posun a označení. Lze využít například při volání akcí pro označené řádky z master formy.

2.10.1 Příklad

V příkladu jsou barevně označeny přidané údaje. Jedná se o div, do kterého je uzavřena forma. Určuje výšku browse ve formě a barevný vzhled atributem class (stejně jako dassbord/grid). Dále je ve formě uveden druhý div, který má id=browsemobile. Přítomnost tohoto divu zajistí přepnutí do mobilní verze. Následně mají položky definovánu šířku parametrem BRWSIZE. Toto není povinné, ale u browse se nedá nastavovat šířka ve formuláři, tak se to provede za pomoci tohoto atributu.

<div style="height: 150px;" class="success">
  <form method="post" name="sdok">
    <input type="hidden" name="Navbar" value="None">
    <input type="hidden" name="FormType" value="Browse">
    <input type="hidden" name="RelType" value="Parametrs">
    <input type="hidden" name="SForm" value="HDOK">
    <input type="hidden" name="View" value="select * from QSDOK where idhdok = %idhdok%">
    <div id="browsemobile"></div>
    <table>
      <tr><td><label for="SLOZKA_IDENT">Kód</label><input name="SLOZKA_IDENT" id="SLOZKA_IDENT"
        readonly type="text" size="8" mask="BRWSIZE=5"/></td></tr>
      <tr><td><label for="TEXT_SLOZ">Název</label><input name="TEXT_SLOZ" id="TEXT_SLOZ" readonly
        type="text" size="42" mask="BRWSIZE=20"/></td></tr>
      <tr><td><label for="MNPOCETMJ">Počet</label><input name="MNPOCETMJ" id="MNPOCETMJ" type="text"
        size="10" mask="BRWSIZE=5"/></td></tr>
    </table>
  </form>
</div>

2.11 Sada tlačítek

Slouží k vytvoření sady tlačítek z odkazů. Dále se pro skupinu dá definovat, že se přejde dále na první odkaz, pokud je počet odkazů konkrétní číslo (parametr data-gonext). Např. vypisujeme seznam subjektů, a pokud je jen jeden, tak na něj rovnou přejdeme.

2.11.1 Příklad výpis subjetů

Prijemsubjekt.idc vrací seznam vyhledaných subjektů a vypisuje je v Prijemsubjekt.htx pokud je jen jeden subjekt, tak se na něj přejde.

<body>
  <div id="buttongroup" data-gonext="1">
    <%begindetail%>
    <a
      href="esoform.asp?Tpage=Sklad/spu/PrijemDL.htm&RelType=Parameters&idsklad=<%IDSKLAD%>&idsubjekt=<%idsubjekt%>&IDVZORSPU=<%IDVZORSPU%>&SUBJ_NAZEV=<%SUBJ_NAZEV%>&SFORMID=<%SFORMID%>&Requery=1" style="font-size: 16px;" class="info" data-role="button"><%SUBJ_NAZEV%></a>
    <%enddetail%>
  </div>
  <a
    href="esoform.asp?Tpage=Sklad/spu/PrijemSubjektF.htm&RelType=Parameters&IDSKLAD=<%IDSKLAD%>&IDVZORSPU=<%IDVZORSPU%>&Requery=1" data-role="button">Zpět</a>
  <a href="esoform.asp?TURL=esoframe.htm" class="success" data-role="button">Menu</a>
</body>

2.11.2 Příklad výpis subjektů s chybou

V mobilní aplikaci je možné přehrát na stránce zvuk a jde to např. tímto způsobem. Pokud Prijemsubjekt.idc vrátí pole ERR s hodnotou 1 tak se přehraje pípnutí které je uloženo v aplikačním webu „sound/beep-1.wav“ a zobrazí se text z položky ERRTXT.

<body>
  <div id="buttongroup" data-gonext="1">
    <%begindetail%>
    <%if ERR EQ "0"%>
      <a
        href="esoform.asp?Tpage=Sklad/spu/PrijemDL.htm&RelType=Parameters&idsklad=<%IDSKLAD%>&idsubjekt=<%idsubjekt%>&IDVZORSPU=<%IDVZORSPU%>&SUBJ_NAZEV=<%SUBJ_NAZEV%>&SFORMID=<%SFORMID%>&Requery=1" style="font-size: 16px;" class="info" data-role="button"><%SUBJ_NAZEV%></a>
    <%else%>
      <script type="text/javascript">
        var Sound = new Audio('sound/beep-1.wav');
        Sound.loop = false;
        Sound.play();
      </script>
      <p><%ERRTXT%></p>
    <%endif%>
    <%enddetail%>
  </div>
  <a
    href="esoform.asp?Tpage=Sklad/spu/PrijemSubjektF.htm&RelType=Parameters&IDSKLAD=<%IDSKLAD%>&IDVZORSPU=<%IDVZORSPU%>&Requery=1" data-role="button">Zpět</a>
  <a href="esoform.asp?TURL=esoframe.htm" class="success" data-role="button">Menu</a>
</body>

2.12 Include

V některých případech je potřeba vkládat do formy dynamická data. To se dá provést přes includ. Include je div ve kterém je třeba dodržet následující parametry:

1. Div obsahuje atribut data-eso9-include="eso9"

2. Uvnitř divu je hyperlink, který definuje URL ke vkládané stránce.

3. Div se dá refrešovat po vykonání akce na tlačítko, k tomu slouží atribut data-eso9-includerefresh="idbutt", ve kterém se jako hodnota použije id tlačítka, na který bude navázán refresh. Lze přiřadit k více buttonům, id se v tomto případě oddělí středníkem (;). V případě, že je ve stránce více includů, stačí nastavit u jednoho a refrešují se všechny.

2.12.1 Příklad

V tomto příkladu je za pomoci includu vložen seznam osob s telefonními čísly. To zajištuje setsava subjektTel_inc.idc/htx, která je patřičně formátovaná.

<form method="post" name="subjekt">
  <input type="hidden" name="Navbar" value="None">
  <input type="hidden" name="View" value="select IDSUBJEKT, KOD_SUBJEKTU, SUBJ_NAZEV,
    ICO, DIC, ULICE, MESTO, PSC, ULICE + ', ' + MESTO + ', ' + MESTO as GMAPS
    from qsubjekt where idsubjekt = %idsubjekt%">
  <div class="ui-grid-a ui-responsive">
    <div class="ui-block-a">
      <table width="100%">
        <tr>
          <td>
            <label for="KOD_SUBJEKTU">Kód subjektu</label>
            <input name="KOD_SUBJEKTU" type="text" readonly
              mask="ReadOnlyAsInput" />
          </td>
        </tr>
        <tr>
          <td>
            <label for="SUBJ_NAZEV">Název subjektu</label>
            <input name="SUBJ_NAZEV" type="text" readonly
              mask="ReadOnlyAsInput" />
          </td>
        </tr>
        <tr>
          <td>
            <label for="ICO">IČ</label>
            <input name="ICO" type="text" readonly mask="ReadOnlyAsInput" />
          </td>
        </tr>
        <tr>
          <td>
            <label for="DIC">DIČ</label>
            <input name="DIC" type="text" readonly mask="ReadOnlyAsInput" />
          </td>
        </tr>
        <tr>
          <td>
            <label for="ULICE">Ulice</label>
            <input name="ULICE" type="text" readonly mask="ReadOnlyAsInput" />
          </td>
        </tr>
        <tr>
          <td>
            <label for="MESTO">Město</label>
            <input name="MESTO" type="text" readonly mask="ReadOnlyAsInput" />
          </td>
        </tr>
      </table>
    </div>
    <div class="ui-block-b">
      <input id="fpGMaps" name="GMAPS" type="text"
        style="width:100%;height:500px;" mask="GMaps">
    </div>
  </div>
  <hr />
  <div data-eso9-include="eso9" id="inc1" data-eso9-includerefresh="">
    <a href="esoform.asp?Tpage=subjekt/subjektTel_inc.idc&RelType=Parameters"></a>
  </div>
  <div id="left-panel" data-ajax="true">
    <a href="esoform.asp?turl=leftpanel.htm">Úvod</a>
  </div>
  <div id="right-panel">
    <a href="esoform.asp?Tpage=saldo/AdrDok_S.idc&RelType=Parameters"
      class="danger">Závazky a pohledávky</a>
    <a
      href="esoform.asp?Tpage=Subjekt/SubjektZavGrid.htm&RelType=Parameters&IDSUBJEKT=%25IDSUBJEKT%25&FormType=DASHOK" class="warning">Závazky</a>
    <a
      href="esoform.asp?Tpage=Subjekt/SubjektPohlGrid.htm&RelType=Parameters&IDSUBJEKT=%25IDSUBJEKT%25&FormType=DASHOK" class="info">Pohledávky</a>
    <a href="esoform.asp?Tpage=crm/AktivitaNew.htm&RelType=Parameters"
      class="success">Nová aktivita</a>
  </div>
</form>

2.13 Navbar

Mobilní aplikaci se nepoužívá aktivních editačních formulářů. Práce je omezena na jednoduchý formulář s jedním nebo dvěma poli, která se ukládají do databáze za pomoci sestav IDC/HTX, nebo zavoláním procedury na tlačítko. V případě, že je třeba povolit editaci, je možné do stránky vložit div s id=“navbarmobile“. Tento div zajistí zobrazení navigačního panelu uzpůsobeného pro práci na mobilních zařízeních. Pokud je třeba zakázat některá tlačítka, provede se doplněním atributu mask s vyjmenovanými tlačítky, která zakazuji. Názby tlačítek jsou následující: Insert;Update;Delete;Cancel;First;Prev;PrevPg;NextPg;Next;Last

2.13.1 Příklad

Formulář pro evidenci dokumentů u subjektu. Dá se použít třeba pro focení v telefonu, kde se po stisknutí tlačítka uložit dokument, zobrazí nativní dialog Android, pro focení nebo výběr souboru.

<form method="POST" name="Dokument">
  <input type="hidden" name="FormType" value="Editor">
  <input type="hidden" name="RowsCount" value="3">
  <input type="hidden" name="STARTFILTER" value="0">
  <input type="hidden" name="Refresh_All_Forms" value="2"><input type="hidden" name="DropTarget"
    value="doc">
  <input type="hidden" name="hiddenfields"
    value="mf_OpType;MF_SENDMAILTO;MF_SENDMAILSUBJECT;MF_SENDMAILBODY;MF_SHOWMAIL;MF_SCANNAME">
  <input type="hidden" name="VIEWNAME" value="QDOKUMENT;QDOKUMENT_OPNAVSTEVY">
  <input type="hidden" name="VIEW" value="select *,
                  'SUBJEKT' as PAR_TABLENAME,
    convert(int,nullif('%IDSUBJEKT%','')) as PAR_IDTABLE,
                  1 as mf_OpType,
                  '' as MF_SENDMAILTO,
                  'Předmět e-mailu' as MF_SENDMAILSUBJECT,
                  'Tělo e-mailu' as MF_SENDMAILBODY,
                  '1' as MF_SHOWMAIL,
                  'Foto' as MF_SCANNAME
             from qdokument
             where (dbo.fnPravoNaDokument(IDDokument,%idLogUser%) != 1)
               and (qdokument.IDDOKUMENT in (select IDDOKUMENT from DOKUMENT_VAZBA where
                 (TABLENAME = 'SUBJEKT') and (IDTABLE = convert(int,nullif('%IDOPNAVSTEVY%','')))))
             order by FILENAME">
  <%$INCLUDE:INCLUDE\Dokument_Inc.htm%>
  <!--timto tagem se zobrazi navbar ve formulari optimalizovany po mobilni zařizeni-->
  <div id="navbarmobile" mask=""></div>
</form>

2.14 Alert

Umožňuje ve stránce s formou zobrazit readonly pole jako informační hlášku. Dá se využít při zobrazení informačního hlášení na button, kdy dojde k naplnění proměnné MF_.. z procedury. Div může nabývat několika barev a tyto se nastavují atributem class.

class="alert alert-success"
class="alert alert-info"
class="alert alert-warning"
class="alert alert-danger"

2.14.1 Příklady

<div class="alert alert-success">
  <input type="text" name="MF_KOMENTAR" id="MF_KOMENTAR" width="10%" readonly>
</div>

<div class="alert alert-info">
  <input type="text" name="MF_KOMENTAR" id="MF_KOMENTAR" width="10%" readonly>
</div>

<div class="alert alert-warning">
  <input type="text" name="MF_KOMENTAR" id="MF_KOMENTAR" width="10%" readonly>
</div>

<div class="alert alert-danger">
  <input type="text" name="MF_KOMENTAR" id="MF_KOMENTAR" width="10%" readonly>
</div>

2.15 QR čtečka

Přidává možnost skenovat QR kódy za pomoci kamery nebo fotoaparátu. Parametr data-qrreader="true" udává zobrazení čtečky a data-qrreader-input="EAN" udává id input pole ve kterém se bude skenovat.

2.15.1 Příklady

Zapojí se jednoduše vložením div za input, ve kterém se bude skenovat.

<form method="post" name="HDOK">
  <input type="hidden" name="Navbar" value="None">
  <input type="hidden" name="View" value="select convert(varchar(50),'') AS EAN">
  <table>
    <tr><td><label for="EAN">EAN: </label></td></tr>
    <tr><td>
      <input name="EAN" id="EAN" type="text" size="500" maxlength="500"
        autocomplete="off" tabindex="0">
      <div id="qrreader" data-qrreader="true" data-qrreader-input="EAN">
    </td></tr>
    <tr><td><a
      href="esoform.asp?Tpage=sklad/evidence/VyberZboziGridQR.htm&RelType=Parameters&FormType=DASHOK&Requery=1" data-role="button">Hledej</a></td></tr>
  </table>
</form>

V input poli se zobrazí ikona readeru. Kliknutím na ikonu se vyvolá dialog skenování a po naskenování kódu se text přenese do input pole. Po zapsání se provede enter. V případě, že je potřeba reader zavřít, stačí do něj kliknout.

2.16 QR/Barcode čtečka

Přidává možnost skenovat QR kódy a čárkové kódy za pomoci kamery nebo fotoaparátu. Nahrazuje předchozí skener, který umí jen QR kódy. Parametr data-qrreader2="true" udává zobrazení čtečky a data-qrreader-input="EAN" udává id input pole ve kterém se bude skenovat.

2.16.1 Příklady

Zapojí se jednoduše vložením div za input, ve kterém se bude skenovat.

<form method="post" name="HDOK">
  <input type="hidden" name="Navbar" value="None">
  <input type="hidden" name="View" value="select convert(varchar(50),'') AS EAN">
  <table>
    <tr><td><label for="EAN">EAN: </label></td></tr>
    <tr><td>
      <input name="EAN" id="EAN" type="text" size="500" maxlength="500"
        autocomplete="off" tabindex="0">
      <div id="qrreader" data-qrreader2="true" data-qrreader-input="EAN">
    </td></tr>
    <tr><td><a
      href="esoform.asp?Tpage=sklad/evidence/VyberZboziGridQR.htm&RelType=Parameters&FormType=DASHOK&Requery=1" data-role="button">Hledej</a></td></tr>
  </table>
</form>

V input poli se zobrazí ikona readeru. Kliknutím na ikonu se vyvolá dialog skenování a po naskenování kódu se text přenese do input pole. Po zapsání se provede enter. V případě, že je potřeba reader zavřít, stačí do něj kliknout.

2.17 Podpisové pole

Přidává možnost uložit do dokumentové databáze podpis uživatele ve formě obrázku. Ve stránce musí být forma s dokumenty a přidá se do ní tlačítko s name="~CMD:ESO9_SignatureToDMS". To zajistí zobrazení dialogu s podpisovým polem a je možné na něm na dotykové obrazovce psát a následně uložit.

2.17.1 Příklad

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
    <title>Podpis do dms</title>
  </head>
  <body>
    <style>
      /*aby fungovalo ulozeni do DMS musi byt ve forme tlacitko vlozit, ale nepotrebuji ho videt
      tak ho stylem zakazu*/
      form[name="DOKUMENT"] .btnDoc.Upload{
        display: none;
      }
    </style>
    <div data-role="page" id="page">
      <form method="POST" name="Dokument">
        <input type="hidden" name="FormType" value="Editor">
        <input type="hidden" name="RowsCount" value="3">
        <input type="hidden" name="STARTFILTER" value="0">
        <input type="hidden" name="Refresh_All_Forms" value="2">
        <input type="hidden" name="DropTarget" value="doc">
        <input type="hidden" name="hiddenfields"
          value="mf_OpType;MF_SENDMAILTO;MF_SENDMAILSUBJECT;MF_SENDMAILBODY;MF_SHOWMAIL;MF_SCANNAME">
        <input type="hidden" name="VIEWNAME" value="QDOKUMENT">
        <input type="hidden" name="VIEW" value="select *,
        1 as mf_OpType,
        '' as MF_SENDMAILTO,
        'Předmět e-mailu' as MF_SENDMAILSUBJECT,
        'Tělo e-mailu' as MF_SENDMAILBODY,
        '1' as MF_SHOWMAIL
        from qdokument
        order by FILENAME">
        <div style="height:21px;">
          <input type="text" name="FILENAME" size="60" DOC="DOKUMENTFILEGUID"
            MASK="1;0;0;0;OP=INSERT" id="fpFILENAME" readonly>
        </div>
        <input type="button" value="Podpis" name="~CMD:ESO9_SignatureToDMS">
        <center>
          <div style="height:250px;">
            <img datafld="1_DOKUMENTFILEGUID" name="DOKUMENTFILEGUID" datasrc="#ESOPAGECTL"
              alt="Obrázek" mask="IMGFROMDMS" height="250"/>
          </div>
        </center>
        <!-- Zobrai navbar ve formulari optimalizovany po mobilni zarizeni-->
        <div id="navbarmobile" mask="Insert;Update;Cancel;First;Last;NextPg;PrevPg"/>
        <div id="left-panel" data-ajax="true">
          <a href="esoform.asp?turl=leftpanel.htm">Úvod</a>
        </div>
      </form>
      <a href="javascript:history.go(-1)" class="warning" data-role="button">Zpět</a>
    </div>
  </body>
</html>