Articles in this section
API Designer in Vtiger CRM The Process Designer Data Source 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.
A
Abdul Sameer
13 Jun, 2025 - Updated  5 days ago

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

The benefits of using the App Creator are, you can:
  • 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 in the programming lifecycle and refers to the time 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 the CRM.
  2. Click the Main Menu.  
  3. Click Platform.
  4. Click Apps under Designers. The Apps window opens.
 
  1. Click +Add App.
 
  1. Enter or select 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.
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

When you create an app and click Save, the application editor window opens. You can now design the application as per your requirements 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, save 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:

  1. Click index.html. Edit the HTML components in the text editor as per the 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. 

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