Newsletter per sviluppatori Vtiger CRM

Utilizzando App Creator, puoi:

Crea applicazioni Web cloud specializzate per i clienti.
Utilizza applicazioni Web avanzate lato client utilizzando qualsiasi framework.

Per favore, leggi il nostro articolo per imparare a usare App Creator.

Vuoi accedere all'App Creator? Si prega di inviare una richiesta a [email protected].

Esempio di applicazione - Flipbook

Ecco un'applicazione di esempio che puoi provare!

Di seguito è riportato lo script per un'applicazione web - Flipbook:

viste/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>

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

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

Salva e pubblica e avvia l'applicazione per vederla in azione.

VTAPIT - Strumento a riga di comando

VTAPIT - Introduzione

VTAPIT è uno strumento a riga di comando che consente di sviluppare e gestire app VTAP create da App Creator (Piattaforma > App). Ha sottocomandi simili allo strumento GIT, che lo rende facile da imparare e iniziare.

Inizia Ora

Crea una nuova applicazione (testapp) su Vtiger CRM> Piattaforma> App Creator (App)
Scarica il tuo sistema operativo compatibile con eseguibile - https://extend.vtiger.com/vtap/vtapit/dist Sottocomandi

VTAPIT - Introduzione

Inizia Ora

Crea una nuova applicazione (testapp) su Vtiger CRM> Piattaforma> App Creator (App)
Scarica il tuo sistema operativo compatibile con eseguibile - https://extend.vtiger.com/vtap/vtapit/dist Sottocomandi

clone	Crea una copia dell'applicazione creata nel CRM nella tua directory di lavoro locale.
Correre	Abilita il runtime sulla directory di lavoro locale, che utilizza file locali e API CRM per i dati.
Aggiungi	I file locali appena creati possono essere aggiunti all'app CRM.
Spingi	Carica tutte le modifiche locali (funzioni di aggiunta o modifica) apportate ai file nell'app CRM.
Tirare	Scarica tutte le modifiche dall'app CRM in una directory di lavoro locale. Se un file è stato modificato nel CRM ma non nella directory locale, viene creato un file indicatore di conflitto. È necessario utilizzare lo strumento diff per confrontare le modifiche e quindi utilizzare il sottocomando Resolve.
Risolvere	Indica le modifiche in conflitto (diff) che sei riuscito a rivedere.
Pubblica	Quando vengono inviate tutte le modifiche locali, utilizzare questo sottocomando per renderlo disponibile.

clone

clone di vtapit --crmapp=testapp --crmurl=https://your.odx.vtiger.crm --crmuser=[email protected] --crmpass=********dir_locale/testapp

Correre

cd dir_locale/testapp

corsa vtapit --crmurl=https://your.odx.vtiger.crm --crmuser=[email protected] --crmpass=**********

Aggiungi

cd dir_locale/testapp

vtapit aggiungi percorso_del_nuovo_file

Spingi

cd dir_locale/testapp

spinta vtapit --crmurl=https://your.odx.vtiger.crm --crmuser=[email protected] --crmpass=**********

Tirare

cd dir_locale/testapp

tirare il rubinetto --crmurl=https://your.odx.vtiger.crm --crmuser=[email protected] --crmpass=**********

Risolvere

cd dir_locale/testapp

vtapit risolvere percorso_del_file

Pubblica

cd dir_locale/testapp

vtapit pubblica --crmurl=https://your.odx.vtiger.crm --crmuser=[email protected] --crmpass=**********

Nota: Puoi impostare le variabili di ambiente CRM per evitare di ripeterle sulla riga di comando.

CRM_URL=https://crm.url.tld

[email protected]

CRM_PASSWORD=passa

CRM_APP=nomeapp

clone

clone di vtapit --crmapp=testapp --crmurl=https://your.odx.vtiger.crm --crmuser=[email protected] --crmpass=********dir_locale/testapp

Correre

cd dir_locale/testapp

corsa vtapit --crmurl=https://your.odx.vtiger.crm --crmuser=[email protected] --crmpass=**********

Aggiungi

cd dir_locale/testapp

vtapit aggiungi percorso_del_nuovo_file

Spingi

cd dir_locale/testapp

spinta vtapit --crmurl=https://your.odx.vtiger.crm --crmuser=[email protected] --crmpass=**********

Tirare

cd dir_locale/testapp

tirare il rubinetto --crmurl=https://your.odx.vtiger.crm --crmuser=[email protected] --crmpass=**********

Risolvere

cd dir_locale/testapp

vtapit risolvere percorso_del_file

Pubblica

cd dir_locale/testapp

vtapit pubblica --crmurl=https://your.odx.vtiger.crm --crmuser=[email protected] --crmpass=**********

Nota: Puoi impostare le variabili di ambiente CRM per evitare di ripeterle sulla riga di comando.

CRM_URL=https://crm.url.tld

[email protected]

CRM_PASSWORD=passa

CRM_APP=nomeapp

Prossimamente - Module Designer 2.0

Modulo Designer 2.0 arriverà con un approccio all'interfaccia utente più semplice. Ti consente di aggiungere pulsanti e azioni personalizzati utilizzando la modalità Designer.

La modalità Designer, una volta abilitata, evidenzierà tutti i segnaposto nelle pagine in cui è possibile aggiungere pulsanti, icone e widget personalizzati. Devi solo fare clic e selezionare il nome e scrivere la funzione javascript utilizzabile.

Modulo Designer 2.0 arriverà con un approccio all'interfaccia utente più semplice. Ti consente di aggiungere pulsanti e azioni personalizzati utilizzando la modalità Designer.

Iscriviti per ricevere gli ultimi aggiornamenti!

Fornisco il consenso a Vtiger per inviare aggiornamenti su novità e altre letture interessanti.

Ho letto il politica sulla riservatezza di Vtiger.