Příručka vývojáře

Dokumentace - základní postupy

Obsah

Začínáme se Smartformem - použití v jednoduchém HTML formuláři

Pro základní funkci Smartformu - obohacení vstupních políček adresy ve formuláři o našeptávač jsou nezbytné následující kroky:

  1. Zaregistrovat se v administrační aplikaci (pokud jste nový uživatel). Tím získáte své clientId, které později vložíte do zdrojového kódu pro přihlášení k Smartformu.
  2. V administrační aplikaci přidat všechny domény, na kterých hodláte Smartform provozovat. Zaregistruje si i domény, na kterých budete Smartform testovat. Registrovat nemusíte domény typu 
    file://
    a 
    http://localhost
    - tam funguje Smartform vždy.
  3. A teď už se vrhneme na úpravu HTML stránky s formulářem. Do hlavičky (head) je potřeba přidat pár řádků s Javascriptem.
    • odkaz na Javascript kód Smartformu 
        <script type="text/javascript" src="http://smartform.cz/api/v1/smartform.js">
  </script>
    • a inicializační skript - zde jako parametr funkce smartform.setClientId doplňte clientId, které máte přiděleno v administrační aplikaci 
        <script type="text/javascript">
  smartform.beforeInit = function initialize() {
        smartform.setClientId('[zde doplňte klientské ID]');
  }
  </script>
  4. Potom už stačí jenom správně označit zadávací pole ve formuláři pro adresu. Pro jednotlivé části adresy jsou definované identifikátory:
    • smartform-street (ulice)
    • smartform-number (číslo domu)
    • smartform-street-and-number (ulice a číslo domu)
    • smartform-city (obec)
    • smartform-zip (PSČ)
    Vstupní <input> elementy označíte tak, že do atributu class přidáte příslušný identifikátor - tedy např.: 
      <input type="text" class="smartform-street" />
  <input type="text" class="smartform-number" />
  <input type="text" class="smartform-city" />
  <input type="text" class="smartform-zip" />

    Je možné použít libovolnou kombinaci zadávacích polí.

V praxi můžete vidět jednoduchý formulář v ukázce.

Více poštovních adres v jednom HTML formuláři

Pokud potřebujete zadat víc než jednu adresu na jedné stránce, je pořeba vstupní políčka jednotlivých adres odlišit, aby je mohl Smartform seskupit. K tomu slouží další identifikátor, který se přidá do atributu class elementů <input>. Tento identifikátor musí začínat řetězcem "smartform-instance" a jeho uvedením se políčko začlení do tzv. instance Smartformu, která je z API dostupná právě přes svůj identifikátor.

Pokud je na stránce jen jeden formulář, není vůbec potřeba identifikátor zadávat. Použije se totiž implicitní identifikátor instance (což je prázdný řetězec).

Následuje příklad formuláře se dvěma vstupními adresami: 

  <form>
    <div>
        <input id="ulice_zakaznik" type="text" class="smartform-instance-zakaznik smartform-street-and-number" />
        <input id="obec_zakaznik" type="text" class="smartform-instance-zakaznik smartform-city" />
        <input id="psc_zakaznik" type="text" class="smartform-instance-zakaznik smartform-zip" />
    </div>

    <div >
        <input id="ulice_dodaci" type="text" class="smartform-instance-dodaci smartform-street" />
        <input id="ulice_dodaci" type="text" class="smartform-instance-dodaci smartform-number" />
        <input id="obec_dodaci" type="text" class="smartform-instance-dodaci smartform-city" />
        <input id="psc_dodaci" type="text" class="smartform-instance-dodaci smartform-zip" />
    </div>
  </form>

Praktický příklad s demostrací dalších možností Smartformu najdete v ukázce.

Zabezpečená komunikace (SSL) se serverem Smartformu

Pro uživatele Business verze je k dispozici šifrovaný přístup ke službám Smartformu pomocí protokolu SSL. Stačí změnit zdrojovou adresu skriptu Smartformu a nastavit atribut smartform.ssl na true. Výsledek vypadá takto: 

  <script type="text/javascript" src="https://secure.smartform.cz/api/v1/smartform.js">
  </script>
  <script type="text/javascript">
  smartform.beforeInit = function initialize() {
        smartform.ssl = true;
        smartform.setClientId('[zde doplňte klientské ID]');
  }
  </script>

Hlavní navigace: