Vtiger CRM-Entwickler-Newsletter

Mit dem App Creator können Sie:

Erstellen Sie spezielle Cloud-Webanwendungen für Kunden.
Verwenden Sie umfangreiche clientseitige Webanwendungen mit einem beliebigen Framework.

Bitte kontaktieren Sie uns, wenn Sie Probleme im Zusammenhang mit dieser Website haben oder Lesen Sie unseren Artikel um zu erfahren, wie Sie den App Creator verwenden.

Möchten Sie auf den App Creator zugreifen? Bitte senden Sie eine Anfrage an [E-Mail geschützt] .

Beispielanwendung – Daumenkino

Hier ist eine Beispielanwendung, die Sie ausprobieren können!

Es folgt das Skript für eine Webanwendung – Flipbook:

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

Speichern und veröffentlichen und starten Sie die Anwendung, um sie in Aktion zu sehen.

VTAPIT – Befehlszeilentool

VTAPIT – Einführung

VTAPIT ist ein Befehlszeilentool, mit dem Sie VTAP-Apps entwickeln und verwalten können, die mit dem App Creator (Plattform > Apps) erstellt wurden. Es verfügt über ähnliche Unterbefehle wie das GIT-Tool, was das Erlernen und den Einstieg erleichtert.

Loslegen

Erstellen Sie eine neue Anwendung (Testapp) auf Vtiger CRM > Plattform > App Creator (Apps)
Laden Sie Ihr mit der ausführbaren Datei kompatibles Betriebssystem herunter – https://extend.vtiger.com/vtap/vtapit/dist Unterbefehle

VTAPIT – Einführung

Loslegen

Erstellen Sie eine neue Anwendung (Testapp) auf Vtiger CRM > Plattform > App Creator (Apps)
Laden Sie Ihr mit der ausführbaren Datei kompatibles Betriebssystem herunter – https://extend.vtiger.com/vtap/vtapit/dist Unterbefehle

Clone	Erstellen Sie eine Kopie der im CRM erstellten Anwendung in Ihrem lokalen Arbeitsverzeichnis.
Führen Sie	Aktiviert die Laufzeit im lokalen Arbeitsverzeichnis, das lokale Dateien und CRM-APIs für Daten verwendet.
Speichern	Neu erstellte lokale Dateien können zur CRM-App hinzugefügt werden.
Push	Lädt alle lokalen Änderungen (Funktionen hinzufügen oder ändern), die an den Dateien vorgenommen wurden, in die CRM-App hoch.
Pull	Lädt alle Änderungen von der CRM-App zurück in ein lokales Arbeitsverzeichnis herunter. Wenn sich eine Datei im CRM geändert hat, jedoch nicht im lokalen Verzeichnis, wird eine Konfliktmarkierungsdatei erstellt. Sie müssen das Diff-Tool verwenden, um Änderungen zu vergleichen, und dann den Unterbefehl „Resolve“ verwenden.
Lösen	Zeigt Konfliktänderungen (Unterschiede) an, die Sie überprüfen konnten.
Veröffentlichen	Wenn alle lokalen Änderungen übertragen wurden, verwenden Sie diesen Unterbefehl, um sie verfügbar zu machen.

Clone

vtapit-Klon --crmapp=testapp --crmurl=https://your.odx.vtiger.crm --crmuser=[E-Mail geschützt] --crmpass=******** local_dir/testapp

Führen Sie

cd local_dir/testapp

vtapit-Lauf --crmurl=https://your.odx.vtiger.crm --crmuser=[E-Mail geschützt] --crmpass=********

Speichern

cd local_dir/testapp

vtapit hinzufügen path_to_new_file

Push

cd local_dir/testapp

vtapit push --crmurl=https://your.odx.vtiger.crm --crmuser=[E-Mail geschützt] --crmpass=********

Pull

cd local_dir/testapp

vtapit pull --crmurl=https://your.odx.vtiger.crm --crmuser=[E-Mail geschützt] --crmpass=********

Lösen

cd local_dir/testapp

vtapit lösen path_to_file

Veröffentlichen

cd local_dir/testapp

vtapit veröffentlichen --crmurl=https://your.odx.vtiger.crm --crmuser=[E-Mail geschützt] --crmpass=********

Hinweis: Sie können CRM-Umgebungsvariablen einrichten, um Wiederholungen in der Befehlszeile zu vermeiden.

CRM_URL=https://crm.url.tld

[E-Mail geschützt]

CRM_PASSWORD=pass

CRM_APP=Appname

Clone

vtapit-Klon --crmapp=testapp --crmurl=https://your.odx.vtiger.crm --crmuser=[E-Mail geschützt] --crmpass=******** local_dir/testapp

Führen Sie

cd local_dir/testapp

vtapit-Lauf --crmurl=https://your.odx.vtiger.crm --crmuser=[E-Mail geschützt] --crmpass=********

Speichern

cd local_dir/testapp

vtapit hinzufügen path_to_new_file

Push

cd local_dir/testapp

vtapit push --crmurl=https://your.odx.vtiger.crm --crmuser=[E-Mail geschützt] --crmpass=********

Pull

cd local_dir/testapp

vtapit pull --crmurl=https://your.odx.vtiger.crm --crmuser=[E-Mail geschützt] --crmpass=********

Lösen

cd local_dir/testapp

vtapit lösen path_to_file

Veröffentlichen

cd local_dir/testapp

vtapit veröffentlichen --crmurl=https://your.odx.vtiger.crm --crmuser=[E-Mail geschützt] --crmpass=********

Hinweis: Sie können CRM-Umgebungsvariablen einrichten, um Wiederholungen in der Befehlszeile zu vermeiden.

CRM_URL=https://crm.url.tld

[E-Mail geschützt]

CRM_PASSWORD=pass

CRM_APP=Appname

Demnächst erhältlich – Module Designer 2.0

Moduldesigner 2.0 wird mit einer einfacheren Benutzeroberfläche ausgestattet sein. Sie können im Designer-Modus benutzerdefinierte Schaltflächen und Aktionen hinzufügen.

Sobald der Designermodus aktiviert ist, werden alle Platzhalter auf den Seiten hervorgehoben, denen benutzerdefinierte Schaltflächen, Symbole und Widgets hinzugefügt werden können. Sie müssen nur auf den Namen klicken, ihn auswählen und die umsetzbare Javascript-Funktion schreiben.

Moduldesigner 2.0 wird mit einer einfacheren Benutzeroberfläche ausgestattet sein. Sie können im Designer-Modus benutzerdefinierte Schaltflächen und Aktionen hinzufügen.

Melden Sie sich an, um die neuesten Updates zu erhalten!

Ich erkläre mich damit einverstanden, dass Vtiger Updates zu Neuigkeiten und anderen interessanten Lektüren sendet.

Ich habe die Datenschutz von Vtiger.