Vtiger CRM Developer Newsletter

Pomocou aplikácie App Creator môžete:

Vytvárajte špecializované cloudové webové aplikácie pre klientov.
Používajte bohaté webové aplikácie na strane klienta pomocou ľubovoľného rámca.

Prosím prečítajte si náš článok sa dozviete, ako používať aplikáciu App Creator.

Chcete získať prístup k aplikácii App Creator? Pošlite žiadosť na [chránené e-mailom].

Vzorová aplikácia - Flipbook

Tu je vzorová aplikácia, ktorú si môžete vyskúšať!

Nasleduje skript pre webovú aplikáciu - Flipbook:

views/index.html


  <!DOCTYPE html>
<html>
    <head>
        <title>VTAP Flipbook</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="resources/index.css">
        <script 
        src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js">
        </script>
        <script
        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9729/turn.min.js">
        </script>
    </head>
    <body>
        <div id="flipbook" class="sample-flipbook">
            <div class="hard"> Vtiger Platform </div>
            <div class="hard"></div>
            <div> Build creative apps </div>
            <div> to business much easily </div>
            <div> than ever before. </div>
            <div> Thank you! </div>
            <div class="hard"></div>
            <div class="hard"></div>
        </div>
        <script src="resources/vcap.js"></script>
        <script src="resources/index.js"></script>
    </body>
</html>


  <!DOCTYPE html>
<html>
    <head>
        <title>VTAP Flipbook</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="resources/index.css">
        <script 
        src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js">
        </script>
        <script
        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9729/turn.min.js">
        </script>
    </head>
    <body>
        <div id="flipbook" class="sample-flipbook">
            <div class="hard"> Vtiger Platform </div>
            <div class="hard"></div>
            <div> Build creative apps </div>
            <div> to business much easily </div>
            <div> than ever before. </div>
            <div> Thank you! </div>
            <div class="hard"></div>
            <div class="hard"></div>
        </div>
        <script src="resources/vcap.js"></script>
        <script src="resources/index.js"></script>
    </body>
</html>

resources/index.js


  CAP.event.on('app.loaded', function(){
    $("#flipbook").turn({
    width: 400,
    height: 300,
    autoCenter: true
  });
});


  CAP.event.on('app.loaded', function(){
    $("#flipbook").turn({
    width: 400,
    height: 300,
    autoCenter: true
  });
});

zdroje/index.css


  .sample-flipbook{
      width:400px;
      height:200px;
      -webkit-transition:margin-left 0.2s;
      -moz-transition:margin-left 0.2s;
      -ms-transition:margin-left 0.2s;
      -o-transition:margin-left 0.2s;
      transition:margin-left 0.2s;
}
.sample-flipbook .page{
      width:200px;
      height:200px;
      background-color:white;
      line-height:300px;
      font-size:20px;
}
.sample-flipbook .page-wrapper{
      -webkit-perspective:2000px; 
      -moz-perspective:2000px;
      -ms-perspective:2000px;
      -o-perspective:2000px;
      perspective:2000px;
}
.sample-flipbook .hard{
      background:#ccc !important;
      color:#333;
      -webkit-box-shadow:inset 0 0 5px #666;
      -moz-box-shadow:inset 0 0 5px #666;
      -o-box-shadow:inset 0 0 5px #666;
      -ms-box-shadow:inset 0 0 5px #666;
      box-shadow:inset 0 0 5px #666;
      font-weight:bold;
}
.sample-flipbook.odd{
        background:-webkit-gradient(linear, right top, left top,
        color-stop(0.95, #FFF), color-stop(1, #DADADA));
        background-image:-webkit-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
        background-image:-moz-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
        background-image:-ms-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
        background-image:-o-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
        background-image:linear-gradient(right, #FFF 95%, #C4C4C4 100%);
        -webkit-box-shadow:inset 005px#666;
        -moz-box-shadow:inset 005px#666;
        -o-box-shadow:inset 005px#666;
        -ms-box-shadow:inset 005px#666;
        box-shadow:inset 005px#666;
}
.sample-flipbook.even{
        background:-webkit-gradient(linear, left top, right top,
        color-stop(0.95, #fff), color-stop(1, #dadada));
        background-image:-webkit-linear-gradient(left, #fff 95%, #dadada 100%);
        background-image:-moz-linear-gradient(left, #fff 95%, #dadada 100%);
        background-image:-ms-linear-gradient(left, #fff 95%, #dadada 100%);
        background-image:-o-linear-gradient(left, #fff 95%, #dadada 100%);
        background-image:linear-gradient(left, #fff 95%, #dadada 100%);
        -webkit-box-shadow:inset 005px#666;
        -moz-box-shadow:inset 005px#666;
        -o-box-shadow:inset 005px#666;
        -ms-box-shadow:inset 005px#666;
        box-shadow:inset 005px#666;
}


  .sample-flipbook{
      width:400px;
      height:200px;
      -webkit-transition:margin-left 0.2s;
      -moz-transition:margin-left 0.2s;
      -ms-transition:margin-left 0.2s;
      -o-transition:margin-left 0.2s;
      transition:margin-left 0.2s;
}
.sample-flipbook .page{
      width:200px;
      height:200px;
      background-color:white;
      line-height:300px;
      font-size:20px;
}
.sample-flipbook .page-wrapper{
      -webkit-perspective:2000px; 
      -moz-perspective:2000px;
      -ms-perspective:2000px;
      -o-perspective:2000px;
      perspective:2000px;
}
.sample-flipbook .hard{
      background:#ccc !important;
      color:#333;
      -webkit-box-shadow:inset 0 0 5px #666;
      -moz-box-shadow:inset 0 0 5px #666;
      -o-box-shadow:inset 0 0 5px #666;
      -ms-box-shadow:inset 0 0 5px #666;
      box-shadow:inset 0 0 5px #666;
      font-weight:bold;
}
.sample-flipbook.odd{
        background:-webkit-gradient(linear, right top, left top,
        color-stop(0.95, #FFF), color-stop(1, #DADADA));
        background-image:-webkit-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
        background-image:-moz-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
        background-image:-ms-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
        background-image:-o-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
        background-image:linear-gradient(right, #FFF 95%, #C4C4C4 100%);
        -webkit-box-shadow:inset 005px#666;
        -moz-box-shadow:inset 005px#666;
        -o-box-shadow:inset 005px#666;
        -ms-box-shadow:inset 005px#666;
        box-shadow:inset 005px#666;
}
.sample-flipbook.even{
        background:-webkit-gradient(linear, left top, right top,
        color-stop(0.95, #fff), color-stop(1, #dadada));
        background-image:-webkit-linear-gradient(left, #fff 95%, #dadada 100%);
        background-image:-moz-linear-gradient(left, #fff 95%, #dadada 100%);
        background-image:-ms-linear-gradient(left, #fff 95%, #dadada 100%);
        background-image:-o-linear-gradient(left, #fff 95%, #dadada 100%);
        background-image:linear-gradient(left, #fff 95%, #dadada 100%);
        -webkit-box-shadow:inset 005px#666;
        -moz-box-shadow:inset 005px#666;
        -o-box-shadow:inset 005px#666;
        -ms-box-shadow:inset 005px#666;
        box-shadow:inset 005px#666;
}

Uložiť a zverejniť a spustite aplikáciu, aby ste ju videli v akcii.

VTAPIT - Nástroj príkazového riadka

VTAPIT - Úvod

VTAPIT je nástroj príkazového riadka, ktorý vám umožňuje vyvíjať a spravovať aplikácie VTAP vytvorené v aplikácii App Creator (Platforma > Aplikácie). Má podpríkazy podobné nástroju GIT, čo uľahčuje učenie a začiatok.

Začíname

Vytvorte novú aplikáciu (testapp) na Vtiger CRM > Platforma > App Creator (Apps)
Stiahnite si svoj operačný systém kompatibilný so spustiteľným súborom - https://extend.vtiger.com/vtap/vtapit/dist Čiastkové príkazy

VTAPIT - Úvod

Začíname

Vytvorte novú aplikáciu (testapp) na Vtiger CRM > Platforma > App Creator (Apps)
Stiahnite si svoj operačný systém kompatibilný so spustiteľným súborom - https://extend.vtiger.com/vtap/vtapit/dist Čiastkové príkazy

Clone	Vytvorte kópiu aplikácie vytvorenej v CRM do vášho lokálneho pracovného adresára.
beh	Povolí runtime v lokálnom pracovnom adresári, ktorý používa lokálne súbory a CRM Apis pre dáta.
pridať	Novo vytvorené lokálne súbory je možné pridať do aplikácie CRM.
Tlačiť	Nahrá všetky miestne zmeny (pridanie alebo úprava funkcií) vykonané v súboroch do aplikácie CRM.
Ťahať	Stiahne všetky zmeny z aplikácie CRM späť do miestneho pracovného adresára. Ak sa súbor zmenil v CRM, ale nie v lokálnom adresári, potom sa vytvorí súbor značky konfliktu. Na porovnanie zmien musíte použiť nástroj diff a potom použiť podpríkaz Vyriešiť.
vyriešiť	Označuje konfliktné (rozdielne) zmeny, ktoré sa vám podarilo skontrolovať.
Publikovať	Keď sú odoslané všetky lokálne zmeny - použite tento podpríkaz na ich sprístupnenie.

Clone

klon vtapit --crmapp=testapp --crmurl=https://your.odx.vtiger.crm --crmuser=[chránené e-mailom] --crmpass=******** local_dir/testapp

beh

cd local_dir/testapp

vtapit beh --crmurl=https://your.odx.vtiger.crm --crmuser=[chránené e-mailom] --crmpass=********

pridať

cd local_dir/testapp

vtapit pridať cesta_k_novemu_suboru

Tlačiť

cd local_dir/testapp

vtapit tlačiť --crmurl=https://your.odx.vtiger.crm --crmuser=[chránené e-mailom] --crmpass=********

Ťahať

cd local_dir/testapp

vtapit ťahať --crmurl=https://your.odx.vtiger.crm --crmuser=[chránené e-mailom] --crmpass=********

vyriešiť

cd local_dir/testapp

vtapit vyriešiť cesta_k_suboru

Publikovať

cd local_dir/testapp

vtapit zverejniť --crmurl=https://your.odx.vtiger.crm --crmuser=[chránené e-mailom] --crmpass=********

Poznámka: Môžete nastaviť premenné prostredia CRM, aby ste sa vyhli opakovaniu na príkazovom riadku.

CRM_URL=https://crm.url.tld

[chránené e-mailom]

CRM_PASSWORD=prejde

CRM_APP=názov aplikácie

Clone

klon vtapit --crmapp=testapp --crmurl=https://your.odx.vtiger.crm --crmuser=[chránené e-mailom] --crmpass=******** local_dir/testapp

beh

cd local_dir/testapp

vtapit beh --crmurl=https://your.odx.vtiger.crm --crmuser=[chránené e-mailom] --crmpass=********

pridať

cd local_dir/testapp

vtapit pridať cesta_k_novemu_suboru

Tlačiť

cd local_dir/testapp

vtapit tlačiť --crmurl=https://your.odx.vtiger.crm --crmuser=[chránené e-mailom] --crmpass=********

Ťahať

cd local_dir/testapp

vtapit ťahať --crmurl=https://your.odx.vtiger.crm --crmuser=[chránené e-mailom] --crmpass=********

vyriešiť

cd local_dir/testapp

vtapit vyriešiť cesta_k_suboru

Publikovať

cd local_dir/testapp

vtapit zverejniť --crmurl=https://your.odx.vtiger.crm --crmuser=[chránené e-mailom] --crmpass=********

Poznámka: Môžete nastaviť premenné prostredia CRM, aby ste sa vyhli opakovaniu na príkazovom riadku.

CRM_URL=https://crm.url.tld

[chránené e-mailom]

CRM_PASSWORD=prejde

CRM_APP=názov aplikácie

Už čoskoro - Module Designer 2.0

Modul Designer 2.0 bude prichádzať s jednoduchším prístupom k používateľskému rozhraniu. Umožňuje vám pridávať vlastné tlačidlá a akcie pomocou režimu návrhára.

Po aktivovaní režimu návrhára sa zvýraznia všetky zástupné symboly na stránkach, na ktoré možno pridať vlastné tlačidlá, ikony a miniaplikácie. Stačí kliknúť a vybrať názov a napísať funkčnú funkciu javascript.

Modul Designer 2.0 bude prichádzať s jednoduchším prístupom k používateľskému rozhraniu. Umožňuje vám pridávať vlastné tlačidlá a akcie pomocou režimu návrhára.

Prihláste sa a získajte najnovšie aktualizácie!

Poskytujem spoločnosti Vtiger súhlas so zasielaním aktualizácií noviniek a iných zaujímavých informácií.

Prečítal som si zásady ochrany osobných údajov Vtigera.

Autorské práva 2024 Vtiger. Všetky práva vyhradené. Rôzne ochranné známky vlastnené ich príslušnými vlastníkmi.