Nyhetsbrev för Vtiger CRM-utvecklare

Med App Creator kan du:

Bygg specialiserade molnwebbapplikationer för kunder.
Använd rika webbapplikationer på klientsidan med vilket ramverk som helst.

Tveka inte, läs vår artikel för att lära dig hur du använder App Creator.

Vill du komma åt App Creator? Skicka gärna en förfrågan till [e-postskyddad].

Exempelapplikation - blädderbok

Här är ett exempel på applikation som du kan prova!

Följande är skriptet för en webbapplikation - 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
  });
});

resources/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;
}

Spara och publicera och starta programmet för att se det i aktion.

VTAPIT - Kommandoradsverktyg

VTAPIT - Introduktion

VTAPIT är ett kommandoradsverktyg som gör att du kan utveckla och hantera VTAP-appar skapade från App Creator (Plattform > Appar). Den har underkommandon som liknar GIT-verktyget, vilket gör det enkelt att lära sig och komma igång.

Kom igång

Skapa en ny applikation (testapp) på Vtiger CRM > Plattform > App Creator (Apps)
Ladda ner ditt operativsystem som är kompatibelt med körbar fil - https://extend.vtiger.com/vtap/vtapit/dist Underkommandon

VTAPIT - Introduktion

Kom igång

Skapa en ny applikation (testapp) på Vtiger CRM > Plattform > App Creator (Apps)
Ladda ner ditt operativsystem som är kompatibelt med körbar fil - https://extend.vtiger.com/vtap/vtapit/dist Underkommandon

klon	Gör en kopia av programmet som skapats i CRM till din lokala arbetskatalog.
Körning	Aktiverar körtid på den lokala arbetskatalogen, som använder lokala filer och CRM Apis för data.
Lägg till	Nyskapade lokala filer kan läggas till i CRM-appen.
Tryck	Laddar upp alla lokala ändringar (lägg till eller ändra funktioner) som gjorts i filerna till CRM-appen.
Dra	Laddar ner alla ändringar från CRM-appen tillbaka till en lokal arbetskatalog. Om en fil har ändrats i CRM men inte i den lokala katalogen, skapas en konfliktmarkörsfil. Du måste använda diff-verktyget för att jämföra ändringar och sedan använda underkommandot Lös.
lösa	Indikerar konflikt (diff) ändringar som du har lyckats granska.
Publicera	När alla lokala ändringar har pushats - använd detta underkommando för att göra det tillgängligt.

klon

vtapit klon --crmapp=testapp --crmurl=https://your.odx.vtiger.crm --crmuser=[e-postskyddad] --crmpass=******** local_dir/testapp

Körning

cd local_dir/testapp

vtapit köra --crmurl=https://your.odx.vtiger.crm --crmuser=[e-postskyddad] --crmpass=********

Lägg till

cd local_dir/testapp

vtapit lägga till sökväg_till_ny_fil

Tryck

cd local_dir/testapp

vtapit tryck --crmurl=https://your.odx.vtiger.crm --crmuser=[e-postskyddad] --crmpass=********

Dra

cd local_dir/testapp

vtapit dra --crmurl=https://your.odx.vtiger.crm --crmuser=[e-postskyddad] --crmpass=********

lösa

cd local_dir/testapp

vtapit-lösning sökväg_till_fil

Publicera

cd local_dir/testapp

vtapit publicera --crmurl=https://your.odx.vtiger.crm --crmuser=[e-postskyddad] --crmpass=********

Notera: Du kan ställa in CRM-miljövariabler för att undvika upprepning på kommandoraden.

CRM_URL=https://crm.url.tld

[e-postskyddad]

CRM_PASSWORD=godkänt

CRM_APP=appnamn

klon

vtapit klon --crmapp=testapp --crmurl=https://your.odx.vtiger.crm --crmuser=[e-postskyddad] --crmpass=******** local_dir/testapp

Körning

cd local_dir/testapp

vtapit köra --crmurl=https://your.odx.vtiger.crm --crmuser=[e-postskyddad] --crmpass=********

Lägg till

cd local_dir/testapp

vtapit lägga till sökväg_till_ny_fil

Tryck

cd local_dir/testapp

vtapit tryck --crmurl=https://your.odx.vtiger.crm --crmuser=[e-postskyddad] --crmpass=********

Dra

cd local_dir/testapp

vtapit dra --crmurl=https://your.odx.vtiger.crm --crmuser=[e-postskyddad] --crmpass=********

lösa

cd local_dir/testapp

vtapit-lösning sökväg_till_fil

Publicera

cd local_dir/testapp

vtapit publicera --crmurl=https://your.odx.vtiger.crm --crmuser=[e-postskyddad] --crmpass=********

Notera: Du kan ställa in CRM-miljövariabler för att undvika upprepning på kommandoraden.

CRM_URL=https://crm.url.tld

[e-postskyddad]

CRM_PASSWORD=godkänt

CRM_APP=appnamn

Kommer snart - Modul Designer 2.0

Moduldesigner 2.0 kommer med ett enklare användargränssnitt. Det låter dig lägga till anpassade knappar och åtgärder med hjälp av designerläget.

Designerläget, när det har aktiverats, kommer att markera alla platshållare på sidorna där anpassade knappar, ikoner och widgetar kan läggas till. Du behöver bara klicka och välja namnet och skriva den handlingsbara javascript-funktionen.

Moduldesigner 2.0 kommer med ett enklare användargränssnitt. Det låter dig lägga till anpassade knappar och åtgärder med hjälp av designerläget.

Registrera dig för att få de senaste uppdateringarna!

Jag ger Vtiger samtycke att skicka uppdateringar om vad som är nytt och andra intressanta läsningar.

Jag har läst integritetspolicy av Vtiger.