Articles in this section

Data Source Designer The Process Designer Vtiger Add-ons Publisher Insights Designer 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.

Abdul Sameer

9 Jan, 2025 - Updated 3 months ago

Feature Availability

Vtiger Editions: One Enterprise | One Professional | One AI

Introduction

VTAP platform provides an App Creator toolkit to build creative applications that solve business needs that are beyond CRM configuration. The App Creator runtime provides developers capabilities to extend CRM functionality, strengthen business integration or custom needs, and requires 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, we 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:

Click the Main Menu.

Click Platform.
Click Apps under Designers.

Click +Add App.

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.
Click Save. A new application is created and is available in the List View.

Note:

You can now set up access to your custom apps based on user profiles.
This is possible since you can add a list of roles when creating an app. These roles will be displayed in a drop-down list while setting up permissions.

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 styling 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 as templates.

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:

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

Click index.js. Add the javascript code on the text editor as per requirement. Click Ctrl+S to save the file.

Click index.css. Add CSS rules in the text editor as per requirement. Click Ctrl+S to save the file.
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.

May 2021 July 2021 VTAP Release Notes Data Source Designer

Articles in this section

VTAP - App Creator

Feature Availability

Introduction

Benefits of App Creator

Key Terminology

Creating an Application

Editing an Application

Sample Application - Flipbook

Related articles