Vtiger CRM-ontwikkelaarsnieuwsbrief

Met de App Creator kunt u:

Bouw gespecialiseerde cloud-webapplicaties voor klanten.
Gebruik rijke client-side webapplicaties met elk framework.

Alstublieft lees ons artikel voor meer informatie over het gebruik van de App Creator.

Wilt u toegang krijgen tot de App Creator? Stuur dan een verzoek naar [e-mail beveiligd].

Voorbeeldtoepassing - Flipbook

Hier is een voorbeeldtoepassing die u kunt uitproberen!

Hieronder volgt het script voor een webapplicatie - 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>

bronnen/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
  });
});

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

Opslaan en publiceren en start de applicatie om deze in actie te zien.

VTAPIT - Opdrachtregelprogramma

VTAPIT - Inleiding

VTAPIT is een opdrachtregelprogramma waarmee u VTAP-apps kunt ontwikkelen en beheren die zijn gemaakt met de App Creator (Platform > Apps). Het heeft subcommando's die vergelijkbaar zijn met de GIT-tool, waardoor het gemakkelijk is om te leren en aan de slag te gaan.

Start nu

Maak een nieuwe applicatie (testapp) op Vtiger CRM> Platform> App Creator (Apps)
Download uw besturingssysteem dat compatibel is met uitvoerbaar - https://extend.vtiger.com/vtap/vtapit/dist Subcommando's

VTAPIT - Inleiding

Start nu

Maak een nieuwe applicatie (testapp) op Vtiger CRM> Platform> App Creator (Apps)
Download uw besturingssysteem dat compatibel is met uitvoerbaar - https://extend.vtiger.com/vtap/vtapit/dist Subcommando's

Kloon	Maak een kopie van de applicatie die in het CRM is gemaakt naar uw lokale werkmap.
lopen	Maakt runtime mogelijk op de lokale werkmap, die lokale bestanden en CRM Apis gebruikt voor gegevens.
Toevoegen	Nieuw gemaakte lokale bestanden kunnen worden toegevoegd aan de CRM-app.
Duwen	Uploadt alle lokale wijzigingen (functies toevoegen of wijzigen) die in de bestanden zijn aangebracht naar de CRM-app.
Trekken	Downloadt alle wijzigingen van de CRM-app terug naar een lokale werkmap. Als een bestand is gewijzigd in de CRM maar niet in de lokale directory, wordt er een conflictmarkeringsbestand gemaakt. U moet de diff-tool gebruiken om wijzigingen te vergelijken en vervolgens het subcommando Resolve gebruiken.
Oplossen	Geeft conflicterende (diff) wijzigingen aan die u hebt kunnen beoordelen.
Publiceer	Wanneer alle lokale wijzigingen zijn gepusht, gebruikt u dit subcommando om het beschikbaar te maken.

Kloon

vtapit kloon --crmapp=testapp --crmurl=https://your.odx.vtiger.crm --crmuser=[e-mail beveiligd] --crmpass=******** lokale_dir/testapp

lopen

cd lokale_dir/testapp

vtapit rennen --crmurl=https://your.odx.vtiger.crm --crmuser=[e-mail beveiligd] --crmpass=**********

Toevoegen

cd lokale_dir/testapp

vtapit toevoegen pad_naar_nieuw_bestand

Duwen

cd lokale_dir/testapp

vtapit duwen --crmurl=https://your.odx.vtiger.crm --crmuser=[e-mail beveiligd] --crmpass=**********

Trekken

cd lokale_dir/testapp

vtapit trekken --crmurl=https://your.odx.vtiger.crm --crmuser=[e-mail beveiligd] --crmpass=**********

Oplossen

cd lokale_dir/testapp

vtapit oplossen pad_naar_bestand

Publiceer

cd lokale_dir/testapp

vtapit publiceren --crmurl=https://your.odx.vtiger.crm --crmuser=[e-mail beveiligd] --crmpass=**********

Opmerking: U kunt CRM-omgevingsvariabelen instellen om herhaling op de opdrachtregel te voorkomen.

CRM_URL=https://crm.url.tld

[e-mail beveiligd]

CRM_PASSWORD=geslaagd

CRM_APP=appnaam

Kloon

vtapit kloon --crmapp=testapp --crmurl=https://your.odx.vtiger.crm --crmuser=[e-mail beveiligd] --crmpass=******** lokale_dir/testapp

lopen

cd lokale_dir/testapp

vtapit rennen --crmurl=https://your.odx.vtiger.crm --crmuser=[e-mail beveiligd] --crmpass=**********

Toevoegen

cd lokale_dir/testapp

vtapit toevoegen pad_naar_nieuw_bestand

Duwen

cd lokale_dir/testapp

vtapit duwen --crmurl=https://your.odx.vtiger.crm --crmuser=[e-mail beveiligd] --crmpass=**********

Trekken

cd lokale_dir/testapp

vtapit trekken --crmurl=https://your.odx.vtiger.crm --crmuser=[e-mail beveiligd] --crmpass=**********

Oplossen

cd lokale_dir/testapp

vtapit oplossen pad_naar_bestand

Publiceer

cd lokale_dir/testapp

vtapit publiceren --crmurl=https://your.odx.vtiger.crm --crmuser=[e-mail beveiligd] --crmpass=**********

Opmerking: U kunt CRM-omgevingsvariabelen instellen om herhaling op de opdrachtregel te voorkomen.

CRM_URL=https://crm.url.tld

[e-mail beveiligd]

CRM_PASSWORD=geslaagd

CRM_APP=appnaam

Binnenkort beschikbaar - Moduleontwerper 2.0

Moduleontwerper 2.0 zal komen met een eenvoudigere gebruikersinterfacebenadering. Hiermee kunt u aangepaste knoppen en acties toevoegen met behulp van de Designer-modus.

Zodra de Designer-modus is ingeschakeld, worden alle tijdelijke aanduidingen op de pagina's gemarkeerd waar aangepaste knoppen, pictogrammen en widgets kunnen worden toegevoegd. U hoeft alleen maar op de naam te klikken en deze te selecteren en de bruikbare JavaScript-functie te schrijven.

Moduleontwerper 2.0 zal komen met een eenvoudigere gebruikersinterfacebenadering. Hiermee kunt u aangepaste knoppen en acties toevoegen met behulp van de Designer-modus.

Schrijf je in om de laatste updates te ontvangen!

Ik geef toestemming aan Vtiger om updates te sturen van nieuwe en andere interessante artikelen.

Ik heb de Privacybeleid van Vtiger.