Beta verze nové dokumentace.

Netgrif – konektor tiskových sestav

CDESK obsahuje několik předvolených tiskových sestav, které se používají v různých modulech. Díky NETGRIF konektoru se však již nemusíte omezovat na předvolené formuláře, ale pro požadavky, plnění a nabídky si můžete vytvořit vlastní tiskové sestavy. Díky vysoké modularitě nástroje NETGRIF si navrhnete tiskovou sestavu, která bude splňovat i velmi specifické požadavky, protože může obsahovat pole z požadavků, plnění a konfiguračních položek. Díky NETGRIF konektoru tyto formuláře dostanete do CDESKu.

Konfigurace vlastní tiskové sestavy začíná na straně NETGRIFu, kde se nakonfiguruje vzhled samotné tiskové sestavy. Následně je nutné nakonfigurovat workflow pro danou sestavu. Nakonec se přímo v NETGRIF konektoru párují pole tiskové sestavy s poli vybraného CDESK modulu tak, aby se v polích tiskové sestavy zobrazovaly požadované informace. Přesné postupy k jednotlivým krokům jsou popsány v tomto manuálu.

Nastavení podkladu pro tiskový report na straně NETGRIFu

Přístup k šabloně tiskového sestavení 

Při vytváření vlastního tiskového sestavení je třeba začít s jeho návrhem v NETGRIFu. Za tímto účelem přejděte na následující odkaz. Po otevření odkazu se zobrazí nástroj NETGRIF pro konfiguraci formuláře.

Obrázek: Nástroj NETGRIF před zahájením konfigurace tiskového sestavení

Na této stránce je možné vytvořit tiskový report zcela od začátku nebo vycházet z předem připravených šablon. Pro zjednodušení práce jsme pro vás připravili šablony, které si můžete stáhnout na následujícím odkazu.

Poté, co si soubory stáhnete, nahrajte je do nástroje NETGRIF pomocí ikony pro nahrávání XML souborů. Po kliknutí na ikonu se zobrazí průzkumník pro výběr souboru z počítače.

Obrázek: Ikona pro nahrání souborů XML do NETGRIFu

Po nahrání souboru se ve formuláři zobrazí dvě ikony čtverců představující obrazovku formuláře. Pod těmito ikonami se zobrazí formulář, který bude navržen. V prvním kroku nejprve klikněte pravým tlačítkem myši na ikonu s názvem t1 a vyberte možnost + Create new form.

Obrázek: Možnost „Vytvořit formulář“ pod ikonou označenou jako t1

Po kliknutí se zobrazí mapa s mřížkou. Počet sloupců v této mřížce definuje množství polí, která lze umístit vedle sebe. Ve výchozím nastavení je nastavena hodnota 8, takže v takovém případě lze vedle sebe umístit 8 různých polí. Jednotlivá pole však mohou procházet přes více sloupců. Počet sloupců lze změnit pomocí pole Number of Columns. Počet sloupců v mřížce však neurčuje konečnou šířku tiskové sestavy. Ta bude ve výsledku vždy stejná, což je šířka stránky A4. Množství sloupců pouze určuje, kolik polí bude možné v tiskové sestavě umístit vedle sebe.

Obrázek: Základní mřížka tiskového sestavení a pole pro změnu počtu sloupců

Přidání polí do tiskového sestavení

Chcete-li přidat libovolný typ pole, klikněte na možnost Create new fields, která se nachází na levé straně. Následně se zobrazí nabídky pro různé typy polí. Chcete-li přidat textové pole, klikněte na možnost Text a následně vyberte Simple, což označuje jednoduché textové pole. Po kliknutí se textové pole automaticky umístí do levého horního rohu mřížky, odkud jej můžete přesunout na libovolné místo v mřížce. Případně je možné pole umístit přímo na požadované místo tak, že jej uchopíte v nabídce na levé straně a pomocí Drag&Drop přesunete na požadované místo.

Obrázek: Vložení jednoduchého textového pole do mřížky

Rozměry přidaného pole lze měnit tažením za jeho okraje. Rozměry lze měnit jak ve vodorovném, tak ve svislém směru. Maximální šířka pole je dána počtem sloupců v mřížce. Maximální výška pole není omezena. Pole lze po mřížce přesouvat pomocí ikony , která se zobrazuje v pravém horním rohu pole. Pro smazání pole klikněte na ikonu .

Obrázek: Ikony pro smazání a přesunutí pole

Konfigurace vlastností polí v tiskovém sestavení

Po kliknutí na pole, které je umístěno v mřížce, se v pravé části okna zobrazí parametry daného pole. Jedná se o následující nastavení:

  • Id – Doporučujeme změnit výchozí hodnotu, abyste pole později mohli identifikovat při párování s CDESK poli a také aby se pole odlišilo od ostatních polí v mřížce. Název doporučujeme zadat malými písmeny.
  • Behavior – pro potřeby CDESK tiskové sestavy budou důležité tyto možnosti:
    • Editable – používá se pro pole, které se bude vyplňovat parametrem z CDESKu.
    • Visible – do pole se nebude předvyplňovat žádná hodnota. Toto nastavení se použije, pokud se v daném poli má zobrazovat například logo nebo neměnný text.
  • Title – popis pole, který se zobrazí v tiskové sestavě
  • Description – popis pole, který se zobrazuje v mřížce při konfiguraci tiskové sestavy. Popis slouží k identifikaci pole v rámci mřížky.
  • Initial value – zadá se text, který se má zobrazovat v daném poli trvale. Používá se pokud je pole nastaveno jako Editable.
Obrázek: Nastavení vlastností polí

Přidání podformuláře

V případě, že má tiskový report obsahovat více záznamů o modulech navázaných na původní modul, ze kterého se tiskový report vytváří, použije se podformulář. Jedná se například o případy, kdy má tiskový report obsahovat výpis všech položek CI navázaných na požadavek nebo výpis všech plnění k požadavku. Podformulář se konfiguruje stejným způsobem jako hlavní formulář pro tiskový report. Následně je v tomto formuláři nutné přidat Task ref → Simple, na místo, kde se mají zobrazovat pole podformuláře.

Obrázek: Přidání podformuláře do hlavního formuláře

Vložení obrázku

Pokud chceme do formuláře vložit vlastní logo/obrázek, postupujeme následovně:

  • Do formuláře přidáme pole HTML Editor a nastavíme jej na visible
Obrázek: Vložení komponenty HTML Text Area

Dále vyhledáme požadovaný obrázek a zakódujeme jej do formátu base64; k tomuto kroku lze například použít webovou stránku base64-image.de.

Jakmile máme zkopírovaný text v kódování base64 (formát by měl být data:image/png;base64…), vrátíme se zpět do nástroje NetGrif Builder. V poli HTML editoru nastavíme pole Initial value následovně:

  • <img src=“BASE64″> kde base64 jsou zkopírovaná data obrázku, který jsme v předchozím kroku zakódovali
Obrázek: Přiřazení počáteční hodnoty pro vložení obrázku

Nastavení zaškrtávacího políčka (Checkbox)

Pro nastavení zaškrtávacího políčka vytvoříme ve formuláři jednoduché textové pole. Následně v CDESK při párování polí formuláře odešleme do jednoduchého textového pole hodnotu uživatelského pole, které je v CDESK ve formě zaškrtávacího políčka.

Pokud chceme, aby se zobrazovaly i prázdné zaškrtávací políčka, musíme v konfiguraci konektoru zaškrtnout políčko „Zobrazit i prázdná zaškrtávací políčka“.

Obrázek: Nastavení zobrazení prázdných zaškrtávacích políček

Nastavení související s generováním formuláře

Po nastavení jednotlivých polí v hlavním formuláři i podformuláři přejděte do formuláře pro hlavní tiskový report a klikněte na tlačítko Back. Následně klikněte pravým tlačítkem myši na tlačítko Generate a vyberte možnost Edit action. Následně je nutné upravit následující nastavení:

Dataref button_html

Pod možností Post by se mělo nacházet nastavení:

textField: f.text_html_output,

style: f.text_style;

def transitionId = „t1“;

formToHtmlTable(textField, transitionId, style)

Obrázek: Nastavení pro HTML

Dataref tlačítko_pdf

Pod možností Post by se mělo nacházet nastavení:

html_text_output: f.text_html_output,

file_pdf_output: f.file_pdf_output;

dynamicHtmlToPdf(html_text_output, „t1“, file_pdf_output)

Obrázek: Nastavení pro PDF

Dataref button_add_subform_1

Pod možností Post by se mělo nacházet nastavení:

taskRef_subform: f.taskRef_subform;

def cnt = findCases({it.processIdentifier.eq(„FULLFILMENT_SUBFORM“)}).size();

def newCase = createCase(„FULLFILMENT_SUBFORM“, „Subform“ + cnt.toString());

def newTask = findTask{(it.caseId.eq( newCase.stringId)).and(it.transitionId.eq(„t1“))};

def taskList = taskRef_subform.value + newTask.stringId;

change taskRef_subform value { taskList }

Obrázek: Nastavení pro generování podformuláře

Po provedení těchto změn exportujte XML soubor formuláře i podformuláře.

Obrázek: Export souboru XML

Konfigurace pracovního postupu

Na stránkách autoforms.cdesk.io daný soubor nahrajete. Pokud je součástí podformulář, je nutné nahrát i ten.

Obrázek: Nahrání souboru XML

Následně v sekci Všechny příklady a úkoly přidejte nahraný soubor XML.

Obrázek: Přidání souboru XML

Po přidání souboru je třeba k formuláři přiřadit soubory ve formátu PDF a HTML a podformulář.

Obrázek: Přiřazení souborů PDF, HTML a podformuláře k formuláři

Po jejich přiřazení je možné zkontrolovat náhled formuláře. Pokud je formulář správně nastaven, lze jej propojit se systémem CDESK.

Obrázek: Ukázka nakonfigurovaného formuláře, který obsahuje parametry položky CI, která je přiřazena k požadavku, a také parametry přiřazeného plnění

Změna vizuální části formuláře

Celý vytvořený formulář je sestaven z HTML kódu, který se generuje na základě .xml dokumentu. K úpravě stylu dokumentu a jeho konkrétních prvků proto můžeme použít CSS.

Změna stylu na autoforms.cdesk.io

Jelikož je celý formulář HTML tabulkou, můžeme změnit její styl použitím CSS na její určité prvky. Nejprve doporučujeme vyzkoušet nastavení požadovaného stylu na stránce autoforms.cdesk.io, kde k tomu můžete použít příslušné textové pole (spodní). Po přepsání CSS je nutné ještě jednou stisknout tlačítka HTML a PDF.

Pro inspiraci si můžete prohlédnout další návod: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Styling_tables

Obrázek níže obsahuje předvyplněný příklad použití CSS na HTML tabulku a její obsah.

Obrázek: Oblast pro zadání CSS stylu tabulky formuláře

Statické změny stylu prvků formuláře

Určité změny stylu konkrétního prvku lze provést přímo při jeho vytváření v Netgrifu tak, že jeho obsah zabalíte do příslušné HTML značky. Například můžeme zabalit text do <b><\b> což bude odpovídat tučnému textu. Zároveň zde lze definovat i jeho styl, například <p style=“color:red;“>Červený text<\p> by měl změnit barvu textu na červenou.

Takto aplikované styly konkrétních prvků není nutné opakovaně definovat nikde jinde.

Důležitá poznámka: statické změny stylu se týkají POUZE prvků, jejichž hodnota se nebude měnit, tedy „visible“ prvků formuláře. Pokud se předpokládá, že místo prvku bude načtena hodnota z CDESK, pak se hodnota tohoto pole přepíše spolu s předdefinovaným stylem!

Obrázek: Příklad zabalení textu do HTML tagu „b“ v Netgrifu

Uložení stylu CSS pro generované formuláře

Konečnou verzi CSS stylu formuláře je nutné uložit do Generate → Edit form → oblast pro CSS. Pokud sem CSS nevložíte, nebude ani ve výsledném souboru .xml, a proto se neuplatní na formuláře generované v CDESK a autoforms!

Obrázek: Postup pro uložení stylu CSS
Obrázek: Oblast pro zadání stylu CSS

Přidání konektoru Netgrif do CDESK

Chcete-li do systému CDESK přidat konektor Netgrif, přejděte na Globální nastavení → Konektory, API a klikněte na tlačítko +Přidat konektor. Po kliknutí se zobrazí okno s výběrem typu konektoru. Zvolte možnost NETGRIF. Pro pokračování klikněte na tlačítko Pokračovat.

Obrázek: Výběr konektoru Netgrif ze seznamu dostupných konektorů

Následně se zobrazí formulář pro konfiguraci konektoru, který obsahuje tato pole:

Obrázek: Konfigurace polí konektoru Netgrif
  • Typ konektoru – pole je read only
  • Název – zadejte název, pod kterým se tento konektor bude zobrazovat v seznamu konektorů. Kromě identifikace v seznamu bude název použit také k pojmenování tlačítka, které se zobrazí v detailu Požadavku nebo Plnění (závisí na nastavení konektoru) a slouží přímo k vytvoření konkrétní tiskové sestavy.
  • Zapnuté – konektor je aktivní, pouze pokud je zapnutý
  • Místo použití – určuje, ve kterém modulu se bude zobrazovat tlačítko pro vytvoření tiskové sestavy. CDESK v aktuální verzi nabízí na výběr tyto možnosti.
    • Požadavky
    • Požadavky vytvořené ze zvolené šablony
    • Plnění
    • Požadavky a plnění
  • URL – URL stránky, kde bylo nakonfigurováno workflow tiskové sestavy. V tomto případě se jedná o autoforms.cdesk.io
  • Přihlašovací jméno – přihlašovací jméno používané k přihlášení do autoforms.cdesk.io
  • Heslo – heslo používané k přihlášení do autoforms.cdesk.io
  • Identifikace sítě – v builder.netgrif.com klikněte pravým tlačítkem myši mimo čtverečky t1 a Generate a vyberte možnost Configurate Model. Na pravé liště se zobrazí okno, ve kterém se nachází možnost Identifier. V poli Identifikace sítě zadejte hodnotu z pole Identifier.
  • Místo uložení pdf – místo, kde bude uložena vygenerovaná výsledná tisková sestava.

Po konfiguraci těchto vlastností klikněte na tlačítko Znovu načíst pole reportu, aby se napárovala pole z Ntgrif s poli CDESK.

Obrázek: Propojení polí formuláře Netgrif s poli CDESK

Do tiskového sestavení lze vložit následující pole CDESK:

  • Dodavatel – Název a adresa společnosti
  • Číslo požadavku
  • Číslo zakázky
  • Datum vytvoření požadavku
  • Číslo požadavku
  • Typ požadavku
  • Oblast služby požadavku
  • Popis požadavku
  • Společnost
  • Adresa společnosti
  • Text prvního plnění
  • Použitý materiál
  • První plnění – Řešitel
  • Řešitel plnění
  • Poslední plnění – Řešitel
  • Datum plnění
  • Začátek plnění
  • Konec plnění
  • První plnění – Doprava
  • Plnění – Doprava
  • Poslední plnění – Doprava
  • Plnění – podpis Řešitele
  • CI – název hlavní skupiny
  • CI – název typu
  • CI – Provozovna
  • CI – Místo
  • CI – název
  • CI – popis
  • CI – Stav
  • CI – vlastník
  • Doplňkové vlastnosti nakonfigurované pro požadavky
  • Doplňkové vlastnosti nakonfigurované pro plnění
  • Doplňkové vlastnosti nakonfigurované pro položky CI

Po napárování všech polí uložte nastavení pomocí tlačítka Uložit. Po uložení bude možné danou tiskovou sestavu vyvolat v modulu, který je vybrán v poli Místo použití. Pokud je vybráno místo použití například Požadavky, pod tlačítkem Akce se zobrazí tlačítko s názvem, který je nastaven v konektoru v poli Název.

Obrázek: Tlačítko pro vytvoření tiskového sestavení, které bylo nakonfigurováno pomocí konektoru Netgrif