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。