Bulletin d'information des développeurs Vtiger CRM

À l'aide de l'App Creator, vous pouvez :

Créez des applications Web cloud spécialisées pour les clients.
Utilisez des applications Web riches côté client à l'aide de n'importe quel framework.

Veuillez lire notre article pour apprendre à utiliser App Creator.

Souhaitez-vous accéder à l'App Creator ? Veuillez envoyer une demande à [email protected].

Exemple d'application - Flipbook

Voici un exemple d'application que vous pouvez essayer !

Voici le script d'une application Web - Flipbook :

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

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

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

Enregistrer et publier et lancez l'application pour la voir en action.

VTAPIT - Outil de ligne de commande

VTAPI - Présentation

VTAPIT est un outil de ligne de commande qui vous permet de développer et de gérer des applications VTAP créées à partir du créateur d'applications (Plate-forme > Applications). Il a des sous-commandes similaires à l'outil GIT, ce qui le rend facile à apprendre et à démarrer.

Débuter

Créez une nouvelle application (testapp) sur Vtiger CRM> Plate-forme> App Creator (Apps)
Téléchargez votre système d'exploitation compatible avec l'exécutable - https://extend.vtiger.com/vtap/vtapit/dist Sous-commandes

VTAPI - Présentation

Débuter

Créez une nouvelle application (testapp) sur Vtiger CRM> Plate-forme> App Creator (Apps)
Téléchargez votre système d'exploitation compatible avec l'exécutable - https://extend.vtiger.com/vtap/vtapit/dist Sous-commandes

Cloner	Faites une copie de l'application créée dans le CRM dans votre répertoire de travail local.
Courir	Active l'exécution sur le répertoire de travail local, qui utilise des fichiers locaux et des API CRM pour les données.
Ajouter	Les fichiers locaux nouvellement créés peuvent être ajoutés à l'application CRM.
Push	Télécharge toutes les modifications locales (ajouter ou modifier des fonctions) apportées aux fichiers vers l'application CRM.
Pull	Télécharge toutes les modifications de l'application CRM vers un répertoire de travail local. Si un fichier a changé dans le CRM mais pas dans le répertoire local, alors un fichier marqueur de conflit est créé. Vous devez utiliser l'outil diff pour comparer les modifications, puis utiliser la sous-commande Résoudre.
Résoudre	Indique les modifications conflictuelles (diff) que vous avez réussi à examiner.
Publier	Lorsque toutes les modifications locales sont poussées, utilisez cette sous-commande pour la rendre disponible.

Cloner

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

Courir

cd rép_local/testapp

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

Ajouter

cd rép_local/testapp

vtapit ajouter chemin_vers_nouveau_fichier

Push

cd rép_local/testapp

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

Pull

cd rép_local/testapp

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

Résoudre

cd rép_local/testapp

résoudre vtapit chemin_vers_fichier

Publier

cd rép_local/testapp

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

Remarque: Vous pouvez configurer des variables d'environnement CRM pour éviter les répétitions sur la ligne de commande.

CRM_URL=https://crm.url.tld

[email protected]

CRM_PASSWORD=réussite

CRM_APP=nom de l'application

Cloner

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

Courir

cd rép_local/testapp

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

Ajouter

cd rép_local/testapp

vtapit ajouter chemin_vers_nouveau_fichier

Push

cd rép_local/testapp

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

Pull

cd rép_local/testapp

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

Résoudre

cd rép_local/testapp

résoudre vtapit chemin_vers_fichier

Publier

cd rép_local/testapp

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

Remarque: Vous pouvez configurer des variables d'environnement CRM pour éviter les répétitions sur la ligne de commande.

CRM_URL=https://crm.url.tld

[email protected]

CRM_PASSWORD=réussite

CRM_APP=nom de l'application

Bientôt disponible - Concepteur de module 2.0

Concepteur de modules 2.0 viendra avec une approche d'interface utilisateur plus simple. Il vous permet d'ajouter des boutons et des actions personnalisés à l'aide du mode Designer.

Le mode Designer, une fois activé, mettra en surbrillance tous les espaces réservés sur les pages où des boutons, des icônes et des widgets personnalisés peuvent être ajoutés. Il vous suffit de cliquer et de sélectionner le nom et d'écrire la fonction javascript actionnable.

Concepteur de modules 2.0 viendra avec une approche d'interface utilisateur plus simple. Il vous permet d'ajouter des boutons et des actions personnalisés à l'aide du mode Designer.

Inscrivez-vous pour recevoir les dernières mises à jour!

J'autorise Vtiger à envoyer des mises à jour sur les nouveautés et autres lectures intéressantes.

J'ai lu Politique de confidentialité de Vtiger.