Articles in this section
Insights Designer API Designer in Vtiger CRM Vtiger Module Designer Vtiger Process Designer Data Source Designer Vtiger Add-ons Publisher VTAP Release Notes VTAPIT - Command line tool VTAP Tables

VTAP - App Creator

This article guides you through the process of using the Vtiger Application Platform to create small applications.
A
Abdul Sameer
20 Feb, 2026 - Updated  8 hours ago

VTAP - App Creator

Feature Availability

Vtiger Editions: One Enterprise | One Professional | One AI

Introduction

Are you a web designer or a front-end developer with a business around CRM solutions?

The VTAP platform offers an App Creator toolkit to develop innovative applications that address business needs beyond CRM configuration. 

The App Creator runtime provides developers with the capabilities to extend CRM functionality, strengthen business integration, or meet custom needs, requiring limited coding knowledge.

Using the App Creator, you can:

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

Benefits of App Creator

  • Develop with just HTML, CSS, and JavaScript knowledge.
  • Deliver advanced business UX flow using the CRM platform without reinventing the wheel.
  • Distribute the built applications so other users can use them to expand the CRM capabilities.

In this article, you will learn how to develop an application using VTAP App Creator.

Key Terminology

Web Application

It is an application program that is stored on a remote server and delivered over the internet through a browser interface.

Framework

A framework in programming is a tool that provides ready-made components or solutions that are customized in order to speed up development.

Runtime

It is a stage of the programming lifecycle. It is the time that a program is running alongside all the external instructions needed for proper execution.

Creating an Application

Follow these steps to create an application using App Creator:

  1. Log in to your CRM account.

  1. Click the Main Menu.

  1. Click Platform.
  2. Click Apps under Designers. 

  1. Click +Add App.

  1. Enter or select the information for the following:
    1. Name: Enter a name for the application.
    2. Icon: Browse and choose an icon for the application.
    3. Description: Enter a brief description of the application.
    4. Status: Click the checkbox to set the application status to active.
    5. Owner: Select the owner of the application from the drop-down.
  2. Click Save. A new application is created and is available in the List View.

Editing an Application

As soon as you click Save, the application editor window opens. You can design the application as per the requirement in the editor.

The application is structured into two main directories.

  • views - HTML files that handle the representation of the data are organized here.
  • resources - JS and CSS files that handle the transformation of data or the styling of HTML are organized in this folder. 

You will be able to create a new sub-folder or file under these as per your convention.

To help you get started quickly, default files are used as a template. 

  • index.html: In this section, you can edit the text you want to display on your application.
  • index.js: In this section, you can add and edit the dynamics of your application. 
  • index.css: In this section, you can add and edit the application's style, color, size, and format.
  • vcap.js: In this section, you can edit your application's runtime. 

Follow these steps to edit the application:

  1. Click index.html. Edit the HTML components in the text editor as per your requirement. Click Ctrl+S to save the file.

 

  1. Click index.js. Add the JavaScript code in the text editor as per the requirement. Click Ctrl+S to save the file.

  1. Click index.css. Add CSS rules in the text editor as per the requirement. Click Ctrl+S to save the file.
  2. Click Save and Publish to publish the application.

To launch the published application, use the following URL:

https://INSTANCE.od1.vtiger.ws/myapps/APPLICATION_NAME
 

Note: The above URL is a sample. Make sure to add your Instance address and Application name to run the application.
 

Now, let us consider a sample web application. 

Sample Application - Flipbook

Following is the script for a web application - Flipbook:

  • views/index.html 

       

        

        

     "

    

    

        

Vtiger Platform

Build creative apps

to business much easily

than ever before.

Thank you!

        

    

 
  • resources/index.js

VCAP.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 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;

}

 

.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 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;

}
 

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

Sample Application - Traffic Clock

Here is a prototype to represent time in a traffic signal theme. We will implement this in VTAP using a step-by-step process to understand the design of components and reuse the same.

 

 

Before implementing the application, identifying the data and visual scope makes it easy to structure the application. We have time (hour, minute, second) to be displayed as text (left side) and boxes (right side).

 

The boxes should further highlight the elapsed value and the remaining value.

 

Elapsed hour

Remaining hour
 

So our data structure would be like

 

elapsed: {

    hour: A,

    minute: B,

    second: C,

}
 

Box UI can be created using a span element:

 

.box {

    display: inline-block; /* to make it work without content */

    width: 16px;

    height: 16px;

    margin: 2px;

    border: 1px solid black;

}
 

We will be using VueJS to enable binding the Visual and Data rendering.

 

Now let's create the traffic_clock application in VTAP

 

Iteration - 1

Let us first get the timer display on HTML that changes every second.

 

views/index.html

< !DOCTYPE html>

< html>

    < head>

        < title>Traffic Clock< /title>

        < meta charset="UTF-8">

        < meta name="viewport" content="width=device-width, initial-scale=1.0">

        < link rel="stylesheet" href="resources/index.css">

    < /head>

    < body>

        < div id="app" v-cloak>

            < div class="hour">{{elapsed.hour}}< /div>

            < div class="minute">{{elapsed.minute}}< /div>

            < div class="second">{{elapsed.second}}< /div>

        < /div>

        < script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js">< /script>

         < script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.14/vue.min.js">< /script>

        < script src="resources/index.js">< /script>

    < /body>

< /html>

CTRL+S (Save the file)

resources/index.js

 

window.addEventListener('DOMContentLoaded', function() {

new Vue({

el: "#app",

data: function() {

                                        /* Initialization */

var d = new Date();

return {

elapsed: {

hour: d.getHours(),

minute: d.getMinutes(),

second: d.getSeconds()

}

}

},

mounted: function() {

setInterval( () => {

var d = new Date();

this.elapsed.hour = d.getHours();

this.elapsed.minute = d.getMinutes();

this.elapsed.second = d.getSeconds();

}, 1000);

}

});

});

CTRL+S (Save the file)

 

Publish the changes. Launch the application.

 

 

Iteration - 2

 

Let us now get the boxes displayed representing elapsed and remaining value of hour, minute, second.

 

views/index.html

 

< !DOCTYPE html>

< html>

    < head>

        < title>Traffic Clock< /title>

        < meta charset="UTF-8">

        < meta name="viewport" content="width=device-width, initial-scale=1.0">

     < link rel="stylesheet" href="resources/index.css">

    < /head>

    < body>

        < div id="app" v-cloak>

            < div class="hour">

               {{elapsed.hour}}

               < span class="box hour elapsed" v-for="h in elapsed.hour">< /span>

               < span class="box hour" v-for="h in (24 - elapsed.hour)">< /span>

            < /div>

            < div class="minute">

               {{elapsed.minute}}

               < span class="box minute elapsed" v-for="m in elapsed.minute">< /span>

               < span class="box minute" v-for="m in (60 - elapsed.minute)">< /span>

            < /div>

            < div class="second">

               {{elapsed.second}}

               < span class="box second elapsed" v-for="s in elapsed.second">< /span>

               < span class="box second" v-for="s in (60 - elapsed.second)">< /span>

             < /div>

        < /div>

        < script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js">< /script>

        < script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.14/vue.min.js">< /script>

        < script src="resources/index.js">

    < /body>

< /html>

CTRL+S (Save the file)
 

resources/index.css

 

.box {

display: inline-block;

width: 16px;

height: 16px;

margin: 2px;

border: 1px solid black;

}

 

.hour.elapsed {

background: red;

}

 

.minute.elapsed {

background: orange;

}

 

.second.elapsed {

background: green;

}

CTRL+S (Save the file)

 

Publish the changes. Launch the application.

 

 

Iteration - 3

 

Let us now build a custom VueJS boxes component that takes care of representing the elapsed and remaining value. This will help us reduce HTML repetition as the component can be reused for hour, minute, and second by varying the inputs to the component through attributes (type, value, and max).

 

views/index.html

 

< !DOCTYPE html>

< html>

    < head>

        < title>Traffic Clock< /title>

        < meta charset="UTF-8">

        < meta name="viewport" content="width=device-width, initial-scale=1.0">

     < link rel="stylesheet" href="resources/index.css">

    < /head>

    < body>

        < div id="app" v-cloak>

            < div class="hour">

               {{elapsed.hour}}

               < boxes type="hour" :value="elapsed.hour" :max="24">< /boxes>

            < /div>

            < div class="minute">

               {{elapsed.minute}}

               < boxes type="minute" :value="elapsed.minute" :max="60">< /boxes>

            < /div>

            < div class="second">

               {{elapsed.second}}

               < boxes type="second" :value="elapsed.second" :max="60">< /boxes>

             < /div>

        < /div>

        < script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js">< /script>

        < script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.14/vue.min.js">< /script>

        < script src="resources/index.js">

    < /body>

< /html>
 

CTRL+S (Save the file)

resources/index.js

 

window.addEventListener('DOMContentLoaded', function() {

    Vue.component("boxes", {
        props: ["type", "value", "max"],
        template:\`< div style="display:inline-block">

                < span :class="type" class="box elapsed" v-for="v in value">< /span>

                < span :class="type" class="box" v-for="v in (max - value)">< /span>

            < /div>\`
    });

    new Vue({
        el: "#app",
        data: function() {
            /* Initialization */
            var d = new Date();
            return {
                elapsed: {
                    hour: d.getHours(),
                    minute: d.getMinutes(),
                    second: d.getSeconds()
                }
            }
        },
        mounted: function() {
            setInterval( () => {
                var d = new Date();
                this.elapsed.hour = d.getHours();
                this.elapsed.minute = d.getMinutes();
                this.elapsed.second = d.getSeconds();
            }, 1000);
        }
    });
});

CTRL+S (Save the file)

 

Publish the changes. Launch the application.

 

 

Iteration - 4

 

Continue the journey to match the expected representation.


 

Related articles
May 2021 July 2021 VTAP Release Notes Data Source Designer API Designer in Vtiger CRM
Home Privacy Policy Terms of Service Security Center Policy & Legal Center Contact Us
© Copyright 2025 Vtiger. All rights reserved.
Powered by Vtiger
Facebook Twitter Linkedin Youtube