Vtiger CRM 開發人員通訊 | 2023 年 XNUMX 月

使用 App Creator，您可以：

為客戶構建專門的雲 Web 應用程序。
使用任何框架使用豐富的客戶端 Web 應用程序。

如有需求，歡迎閱讀我們的文章了解如何使用 App Creator。

您想訪問 App Creator 嗎？請發送請求至 [email protected].

示例應用程序 - 動畫書

這是您可以試用的示例應用程序！

以下是 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 是一個命令行工具，使您能夠開發和管理從應用程序創建器（平台 > 應用程序）創建的 VTAP 應用程序。它具有類似於GIT工具的子命令，這使得它易於學習和上手。

立即報名

在 Vtiger CRM > 平台 > App Creator(Apps) 上創建一個新應用程序（testapp）
下載與可執行文件兼容的操作系統 - https://extend.vtiger.com/vtap/vtapit/dist 子命令

VTAPIT - 介紹

立即報名

在 Vtiger CRM > 平台 > App Creator(Apps) 上創建一個新應用程序（testapp）
下載與可執行文件兼容的操作系統 - https://extend.vtiger.com/vtap/vtapit/dist 子命令

克隆	將在 CRM 中創建的應用程序複製到您的本地工作目錄。
運行	在本地工作目錄上啟用運行時，它使用本地文件和 CRM Apis 獲取數據。
新增	新創建的本地文件可以添加到 CRM 應用程序。
推	將對文件所做的所有本地更改（添加或修改功能）上傳到 CRM 應用程序。
拉	將 CRM 應用程序中的所有更改下載回本地工作目錄。如果文件在 CRM 中發生更改但在本地目錄中沒有更改，則會創建一個衝突標記文件。您需要使用 diff 工具比較更改，然後使用 Resolve 子命令。
解決	表示您已設法審查的衝突（差異）更改。
發布	推送所有本地更改時 - 使用此子命令使其可用。

克隆

vtapit克隆 --crmapp=測試應用--crmurl=https://your.odx.vtiger.crm --crmuser=[email protected] --crmpass=******** local_dir/testapp

運行

cd 本地目錄/testapp

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

新增

cd 本地目錄/testapp

vtapit 添加 新文件的路徑

推

cd 本地目錄/testapp

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

拉

cd 本地目錄/testapp

虛擬拉動 --crmurl=https://your.odx.vtiger.crm --crmuser=[email protected] --crmpass=********

解決

cd 本地目錄/testapp

vtapit 解析 文件路徑

發布

cd 本地目錄/testapp

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

請注意： 您可以設置 CRM 環境變量以避免在命令行上重複。

CRM_URL=https://crm.url.tld

[email protected]

CRM_PASSWORD=通過

CRM_APP=應用名稱

克隆

vtapit克隆 --crmapp=測試應用--crmurl=https://your.odx.vtiger.crm --crmuser=[email protected] --crmpass=******** local_dir/testapp

運行

cd 本地目錄/testapp

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

新增

cd 本地目錄/testapp

vtapit 添加 新文件的路徑

推

cd 本地目錄/testapp

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

拉

cd 本地目錄/testapp

虛擬拉動 --crmurl=https://your.odx.vtiger.crm --crmuser=[email protected] --crmpass=********

解決

cd 本地目錄/testapp

vtapit 解析 文件路徑

發布

cd 本地目錄/testapp

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

請注意： 您可以設置 CRM 環境變量以避免在命令行上重複。

CRM_URL=https://crm.url.tld

[email protected]

CRM_PASSWORD=通過

CRM_APP=應用名稱

即將推出 - 模塊設計器 2.0

模塊設計器 2.0 將採用更簡單的用戶界面方法。它使您能夠使用設計器模式添加自定義按鈕和操作。

設計器模式一旦啟用，將突出顯示頁面上可以添加自定義按鈕、圖標和小部件的所有佔位符。您只需單擊並選擇名稱並編寫可操作的 javascript 函數。

模塊設計器 2.0 將採用更簡單的用戶界面方法。它使您能夠使用設計器模式添加自定義按鈕和操作。

設計器模式一旦啟用，將突出顯示頁面上可以添加自定義按鈕、圖標和小部件的所有佔位符。您只需單擊並選擇名稱並編寫可操作的 javascript 函數。

註冊以接收最新更新！

我同意 Vtiger 發送新內容和其他有趣讀物的更新。

我看過了如何得知我們？ Vtiger。