Vtiger CRM Developer Newsletter

Using the App Creator, you can:

Build specialized cloud web applications for clients.
Use rich client-side web applications using any framework.

Please read our article to learn how to use the App Creator.

Would you like to access the App Creator? Please send a request to [email protected].

Sample Application - Flipbook

Here is a sample application that you can try out!

Following is the script for a web application - Flipbook:

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

Save and Publish and launch the application to see it in action.

VTAPIT - Command line tool

VTAPIT - Introduction

VTAPIT is a Command line tool that enables you to develop and manage VTAP Apps created from the App Creator (Platform > Apps). It has sub-commands similar to the GIT tool, which makes it easy to learn and get started.

Get Started

Create a new application (testapp) on Vtiger CRM > Platform > App Creator(Apps)
Download your OS compatible with executable - https://extend.vtiger.com/vtap/vtapit/dist Sub-commands

VTAPIT - Introduction

Get Started

Create a new application (testapp) on Vtiger CRM > Platform > App Creator(Apps)
Download your OS compatible with executable - https://extend.vtiger.com/vtap/vtapit/dist Sub-commands

Clone	Make a copy of the application created in the CRM to your local working directory.
Run	Enables runtime on the local working directory, which uses local files and CRM Apis for data.
Add	Newly created local files can be added to the CRM app.
Push	Uploads all the local changes (add or modify functions) made to the files to the CRM app.
Pull	Downloads all the changes from the CRM app back to a local working directory. If a file has changed in the CRM but not in the local directory, then a conflict marker file is created. You need to use the diff tool to compare changes and then use the Resolve sub-command.
Resolve	Indicates conflict (diff) changes you have managed to review.
Publish	When all local changes are pushed - use this sub-command to make it available.

Clone

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

Run

cd local_dir/testapp

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

Add

cd local_dir/testapp

vtapit add path_to_new_file

Push

cd local_dir/testapp

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

Pull

cd local_dir/testapp

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

Resolve

cd local_dir/testapp

vtapit resolve path_to_file

Publish

cd local_dir/testapp

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

Note: You can set up CRM environment variables to avoid repeating on the command line.

CRM_URL=https://crm.url.tld

[email protected]

CRM_PASSWORD=pass

CRM_APP=appname

Clone

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

Run

cd local_dir/testapp

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

Add

cd local_dir/testapp

vtapit add path_to_new_file

Push

cd local_dir/testapp

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

Pull

cd local_dir/testapp

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

Resolve

cd local_dir/testapp

vtapit resolve path_to_file

Publish

cd local_dir/testapp

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

Note: You can set up CRM environment variables to avoid repeating on the command line.

CRM_URL=https://crm.url.tld

[email protected]

CRM_PASSWORD=pass

CRM_APP=appname

Coming Soon - Module Designer 2.0

Module Designer 2.0 will be coming with a simpler user interface approach. It enables you to add custom buttons and actions using the Designer mode.

The Designer mode, once enabled, will highlight all the placeholders on the pages where custom buttons, icons, and widgets can be added. You only need to click and select the name and write the actionable javascript function.

Module Designer 2.0 will be coming with a simpler user interface approach. It enables you to add custom buttons and actions using the Designer mode.

I provide consent to Vtiger to send updates of what's new and other interesting reads.

I have read the privacy policy of Vtiger.