Vtiger CRM 開発者ニュースレター

App Creator を使用すると、次のことが可能になります。

クライアント向けに特化したクラウド Web アプリケーションを構築します。
任意のフレームワークを使用して、リッチなクライアント側 Web アプリケーションを使用します。

お困りの方は私たちの記事を読む App Creator の使用方法を学習します。

App Creator にアクセスしますか? リクエストを送信してください [メール保護].

サンプルアプリケーション - フリップブック

サンプルアプリケーションをご紹介しますので、ぜひお試しください。

以下は、Web アプリケーション - フリップブックのスクリプトです。

ビュー/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>

リソース/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
  });
});

リソース/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;
}

保存して公開 アプリケーションを起動して動作を確認します。

VTAPIT - コマンドラインツール

VTAPIT - はじめに

VTAPIT は、App Creator (プラットフォーム > アプリケーション) から作成された VTAP アプリケーションの開発と管理を可能にするコマンドラインツールです。 GIT ツールに似たサブコマンドがあるため、簡単に学習して開始できます。

始める

Vtiger CRM > プラットフォーム > アプリクリエイター(アプリ)で新しいアプリケーション(testapp)を作成します。
実行可能ファイルと互換性のある OS をダウンロードします - https://extend.vtiger.com/vtap/vtapit/dist サブコマンド

VTAPIT - はじめに

始める

Vtiger CRM > プラットフォーム > アプリクリエイター(アプリ)で新しいアプリケーション(testapp)を作成します。
実行可能ファイルと互換性のある OS をダウンロードします - https://extend.vtiger.com/vtap/vtapit/dist サブコマンド

クローン	CRM で作成したアプリケーションのコピーをローカルの作業ディレクトリに作成します。
ラン	ローカル作業ディレクトリでのランタイムを有効にし、データにローカルファイルと CRM API を使用します。
Add	新しく作成したローカルファイルを CRM アプリに追加できます。
プッシュ	ファイルに加えられたすべてのローカル変更 (関数の追加または変更) を CRM アプリにアップロードします。
プル	CRM アプリからすべての変更をローカルの作業ディレクトリにダウンロードして戻します。ファイルが CRM で変更されたが、ローカルディレクトリでは変更されなかった場合、競合マーカーファイルが作成されます。 diff ツールを使用して変更を比較してから、Resolve サブコマンドを使用する必要があります。
解決する	確認できた競合 (diff) 変更を示します。
パブリッシュ	すべてのローカル変更がプッシュされたら、このサブコマンドを使用して利用可能にします。

クローン

vtapit クローン --crmapp=testapp --crmurl=https://your.odx.vtiger.crm --crmuser=[メール保護] --crmpass=******** local_dir/testapp

ラン

cd local_dir/testapp

vtapit実行 --crmurl=https://your.odx.vtiger.crm --crmuser=[メール保護] -crmpass = ********

Add

cd local_dir/testapp

vtapit追加 新しいファイルへのパス

プッシュ

cd local_dir/testapp

vtapitプッシュ --crmurl=https://your.odx.vtiger.crm --crmuser=[メール保護] -crmpass = ********

プル

cd local_dir/testapp

vtapitプル --crmurl=https://your.odx.vtiger.crm --crmuser=[メール保護] -crmpass = ********

解決する

cd local_dir/testapp

vtapit解決 ファイルへのパス

パブリッシュ

cd local_dir/testapp

vtapit公開 --crmurl=https://your.odx.vtiger.crm --crmuser=[メール保護] -crmpass = ********

注： CRM 環境変数を設定して、コマンドラインでの繰り返しを避けることができます。

CRM_URL=https://crm.url.tld

[メール保護]

CRM_PASSWORD=パス

CRM_APP=アプリ名

クローン

vtapit クローン --crmapp=testapp --crmurl=https://your.odx.vtiger.crm --crmuser=[メール保護] --crmpass=******** local_dir/testapp

ラン

cd local_dir/testapp

vtapit実行 --crmurl=https://your.odx.vtiger.crm --crmuser=[メール保護] -crmpass = ********

Add

cd local_dir/testapp

vtapit追加 新しいファイルへのパス

プッシュ

cd local_dir/testapp

vtapitプッシュ --crmurl=https://your.odx.vtiger.crm --crmuser=[メール保護] -crmpass = ********

プル

cd local_dir/testapp

vtapitプル --crmurl=https://your.odx.vtiger.crm --crmuser=[メール保護] -crmpass = ********

解決する

cd local_dir/testapp

vtapit解決 ファイルへのパス

パブリッシュ

cd local_dir/testapp

vtapit公開 --crmurl=https://your.odx.vtiger.crm --crmuser=[メール保護] -crmpass = ********

注： CRM 環境変数を設定して、コマンドラインでの繰り返しを避けることができます。

CRM_URL=https://crm.url.tld

[メール保護]

CRM_PASSWORD=パス

CRM_APP=アプリ名

近日公開 - モジュールデザイナー 2.0

モジュールデザイナー 2.0 よりシンプルなユーザーインターフェイスアプローチが採用される予定です。デザイナーモードを使用してカスタムボタンとアクションを追加できます。

デザイナーモードを有効にすると、カスタムボタン、アイコン、ウィジェットを追加できるページ上のすべてのプレースホルダーが強調表示されます。名前をクリックして選択し、実行可能な JavaScript 関数を記述するだけです。

サインアップして最新のアップデートを受け取りましょう!

私はVtigerに同意し、最新情報やその他の興味深い記事の更新を送信します。

私はプライバシーポリシーをご覧ください。 Vtigerの。