Diagramy s toky dokladů

Diagramy jsou k dispozici pouze v obecném klientovi.

Ve vstupních obrazovkách nebo navigačních uživatelských stránkách lze jednoduše zobrazovat i diagramy s toky dokladů s možností prokliku na formuláře jednotlivých typů dokladů. Jedná se o intuitivnější a jednodušší způsob, než je hledání daného formuláře ve stromu činností. Vstupní obrazovky mohou vypadat např. takto:
Diagram 1
Diagram 1
Diagram 1
Celý diagram je samozřejmě dynamický nejen obsahově, ale i graficky. Po obsahové stránce může stejný diagram zobrazovat různé popisy a odkazy podle přihlášeného uživatele a jeho oprávnění, popř. jazykového nastavení. Po stránce grafické reaguje např. na změnu velikosti stránky či na lupu v prohlížeči. Všechny bloky v diagramu se také automaticky zvýrazní po najetí kurzorem myši.

Předloha diagramu - soubor .IDC

Jako předloha stránky s diagramem slouží běžná IDC/HTX sestava, nejedná se tedy o žádné speciální rozšíření technologie ESO9. K tvorbě stránek s diagramy tedy postačí znalosti stávajících implementačních postupů ESO9.
Soubor .IDC obsahuje datový zdroj, v němž jsou uvedeny popisy bloků v diagramu a adresy URL, na něž se má po kliknutí na blok přejít. Pro jednoduchost si ukážeme tvorbu diagramu z prvního obrázku:

Datasource: ESO9
SQLStatement: SELECT 'Prodejní' + CHAR(13)+CHAR(10) + 'objednávka' as ITEM1, 
+'Faktura' + CHAR(13)+CHAR(10) + 'vydaná' as ITEM2, 
+'Skladová' + CHAR(13)+CHAR(10) + 'výdejka' as ITEM3,
+ 'esoform.asp?TPage=PRODEJ/POBJ.HTM&StartFilter=2&HDOKSTYLE=&SDOKSTYLE=&WHERE=WHERE IDTYPDOK=52 AND IDHDOK_VZOR=257&IDTYPDOK_STAVHDOK=52&ORDERBY=ORDER BY CIS_DOK&VZORTEXT=Prodejní objednávka tuzemská&RelType=PARAMETERS&CINNOST=2. 2. 1. 2&DataAction=LAST&Title=Prodejní objednávka tuzemská' as ITEM1URL,
+ 'esoform.asp?TPage=PRODEJ/FAV.HTM&StartFilter=2&HDOKSTYLE=/*Neuhrazené po splatnosti FVU*/  CASE WHEN (not(dbo.fn_NespZavPohlVal(IDHDOK) <= 0)) AND DTSPLATNO < GETDATE() THEN dbo.fnVarchar_Concatenate(CHAR(35), ''FF0000'') ELSE NULL END AS MF_ROWSTYLE,&SDOKSTYLE=&WHERE=WHERE IDTYPDOK=7 AND IDHDOK_VZOR=7&IDTYPDOK_STAVHDOK=7&ORDERBY=ORDER BY CIS_DOK&VZORTEXT=FVU tuzemská&RelType=PARAMETERS&CINNOST=2. 2. 3. 1&DataAction=LAST&Title=FVU tuzemská' as ITEM2URL,
+ 'esoform.asp?Tpage=sklad/vydejkas.htm&StartFilter=2&HDOKSTYLE=/*Záporné výdejky - STORNO*/  CASE WHEN HDKUHRADEVAL < 0 THEN dbo.fnVarchar_Concatenate(CHAR(35), ''FF0000'') ELSE NULL END AS MF_ROWSTYLE,&SDOKSTYLE=&WHERE=WHERE IDTYPDOK = 9 and idhdok_vzor = 3485&ORDERBY=ORDER BY CIS_DOK&IDTYPDOK_STAVHDOK=9&vzortext=SVU - sklad 30 - prodej do tuzemska&RelType=Parameters&CINNOST=2. 3. 2. 1&dataaction=last&title=SVU - sklad 30 - prodej do tuzemska' as ITEM3URL
Template: User1StartPage.htx

Prvky ITEMx obsahují popisy bloků (včetně požadovaného odřádkování textu), prvky ITEMxURL obsahují URL činností/formulářů, na něž uživatel po kliknutí přejde. V uvedeném příkladu jsou adresy zadání napevno z vybraných činností ESO9 Start, vhodnější by samozřejmě bylo použít dynamické načtení typů/vzorů dokladu pro přihlášeného uživatele a to včetně překladů do cizích jazyků.

Předloha diagramu - soubor .HTX

Pro vizuální popis IDC sestav slouží soubory s příponou .HTX. Kromě očekávatelného bloku <%begindetail%> / <%enddetail%> bude v tomto případě obsahovat i několik HTML TAGů. Celý zdrojový kód stránky s jednoduchým diagramem bude vypadat následovně:

<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
  <title>Vstupní stránka uživatele 1</title>
</head>

<body>

<script src="../eso9supp/LIB/script/UserStartPage.js">
//odkaz na skript s obecnými funkcemi pro práci s bloky
</script>

<script>
  function drawArrows(e){
    drawArrowBetweenCanvases('arr1', 'rect1', 'rect2', FROM_BLOCK_RIGHT, TO_BLOCK_LEFT, LINE_TYPE_NORMAL)
    drawArrowBetweenCanvases('arr2', 'rect2', 'rect3', FROM_BLOCK_RIGHT, TO_BLOCK_LEFT, LINE_TYPE_NORMAL)
  };
  
</script>

<style>

  #rect1 { top: 25%; left:10%; }
  #rect2 { top: 25%; left:40%; }
  #rect3 { top: 25%; left:70%; }

  #ESO_BodyRep { background-image: url('./images/eso9_rgb.png'); }

</style>

<div class="ESO_BodyRep" id="ESO_BodyRep">
  <canvas id="arr1"></canvas>
  <canvas id="arr2"></canvas>
  
  <canvas id="rect1"></canvas>
  <canvas id="rect2"></canvas>
  <canvas id="rect3"></canvas>

<%begindetail%>
  <span id="item1"><% ITEM1 %></span>
  <span id="item2"><% ITEM2 %></span>
  <span id="item3"><% ITEM3 %></span>
  <span id="item1url"><% ITEM1URL %></span>
  <span id="item2url"><% ITEM2URL %></span>
  <span id="item3url"><% ITEM3URL %></span>
<%enddetail%>
</div>

</body>
</html>

Projdeme si nyní celý uvedený kód a zmíníme odlišnosti oproti běžným IDC sestavám tak, jak je známe z ESO9. Jednotlivé body nebudou reflektovat pořadí ve zdrojovém kódu, ale logiku tvorby a zpracování těchto sestav.

Předloha složitějšího diagramu - soubor .HTX

Pro lepší představu si ukážeme předlohu mírně složitějšího diagramu z druhého obrázku:

<!DOCTYPE HTML>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Vstupní stránka uživatele 2</title>
</head>

<body>

<script src="../eso9supp/LIB/script/UserStartPage.js">
//odkaz na skript s obecnými funkcemi pro práci s bloky
</script>

<script>

  function drawArrows(e){
    //šipka 1 - mezi bloky 1-2
    drawArrowBetweenCanvases('arr1', 'rect1', 'rect2', FROM_BLOCK_BOTTOM, TO_BLOCK_TOP, LINE_TYPE_NORMAL)
    
    //šipka 2 - mezi  bloky 2-3
    drawArrowBetweenCanvases('arr2', 'rect2', 'rect3', FROM_BLOCK_LEFT, TO_BLOCK_TOP, LINE_TYPE_NORMAL)
    
    //šipka 3 - viz šipka 2 zrcadlově otočená
    drawArrowBetweenCanvases('arr3', 'rect2', 'rect6', FROM_BLOCK_RIGHT, TO_BLOCK_TOP, LINE_TYPE_NORMAL)

    //šipka 4 -  mezi  bloky 3-4 
    drawArrowBetweenCanvases('arr4', 'rect3', 'rect4', FROM_BLOCK_BOTTOM, TO_BLOCK_TOP, LINE_TYPE_NORMAL)

    //šipka 5 - viz šipka 4 zrcadlově otočené 
    drawArrowBetweenCanvases('arr5', 'rect6', 'rect7', FROM_BLOCK_BOTTOM, TO_BLOCK_TOP, LINE_TYPE_NORMAL)
    
    //šipky mezi bloky 4-5 a 7-5
    drawArrowBetweenCanvases('arr6', 'rect4', 'rect5', FROM_BLOCK_BOTTOM, TO_BLOCK_LEFT, LINE_TYPE_NORMAL)
    drawArrowBetweenCanvases('arr7', 'rect7', 'rect5', FROM_BLOCK_BOTTOM, TO_BLOCK_RIGHT, LINE_TYPE_NORMAL)
    
    //šipky mezi bloky 2-5
    drawArrowBetweenCanvases('arr8', 'rect2', 'rect5', FROM_BLOCK_BOTTOM, TO_BLOCK_TOP, LINE_TYPE_DASHED)

    //šipky mezi bloky 2-4
    drawArrowBetweenCanvases('arr9', 'rect2', 'rect4', FROM_BLOCK_BOTTOM, TO_BLOCK_RIGHT, LINE_TYPE_DASHED)

  };

</script>

<style>

  #rect1 { top: 10%; left:40%; }
  #rect2 { top: 25%; left:40%; }
  #rect3 { top: 40%; left:10%; }
  #rect4 { top: 55%; left:10%; }
  #rect5 { top: 70%; left:40%; }
  #rect6 { top: 40%; left:70%; }
  #rect7 { top: 55%; left:70%; }
  
  #ESO_BodyRep { background-image: url('./images/eso9_rgb.png'); }  

</style>

<div class="ESO_BodyRep" id="ESO_BodyRep">

  <canvas id="arr1"></canvas>
  <canvas id="arr2"></canvas>
  <canvas id="arr3"></canvas>
  <canvas id="arr4"></canvas>
  <canvas id="arr5"></canvas>
  <canvas id="arr6"></canvas>
  <canvas id="arr7"></canvas>
  <canvas id="arr8"></canvas>
  <canvas id="arr9"></canvas>

  <canvas id="rect1"></canvas>
  <canvas id="rect2"></canvas>
  <canvas id="rect3"></canvas>
  <canvas id="rect4"></canvas>
  <canvas id="rect5"></canvas>
  <canvas id="rect6"></canvas>
  <canvas id="rect7"></canvas>

<%begindetail%>
  <span id="item1"><% ITEM1 %></span>
  <span id="item2" data-importance="1"><% ITEM2 %></span>
  <span id="item3"><% ITEM3 %></span>
  <span id="item4"><% ITEM4 %></span>
  <span id="item5" data-importance="1"><% ITEM5 %></span>
  <span id="item6"><% ITEM6 %></span>
  <span id="item7"><% ITEM7 %></span>
  <span id="item1url"><% ITEM1URL %></span>
  <span id="item2url"><% ITEM2URL %></span>
  <span id="item3url"><% ITEM3URL %></span>
  <span id="item4url"><% ITEM4URL %></span>
  <span id="item5url"><% ITEM5URL %></span>
  <span id="item6url"><% ITEM6URL %></span>
  <span id="item7url"><% ITEM7URL %></span>
<%enddetail%>
</div>

</body>
</html>
DokuWiki Appliance - Powered by TurnKey Linux