Image 2

VTAP Module Designer – Our low code platform to make the CRM your own!

VTAP is Vtiger’s low code platform that helps developers and administrators to extend the capabilities of CRM. We have two tools that provide the ability to build low code applications. One is the Module Designer, and the other one is API Designer. In this blog, we will go over what, how, and when to use Module designer.

Module Designer
When to use Module Designer (Use cases)

You can use the Module Designer to:
  • Apply complex formulas and update a field
  • Flash a warning when a user is inputting incorrect information
  • Save some user preferences
  • Save extension settings or configuration data
  • Add buttons, widgets, and icons
What does the Module Designer provide you with to accomplish the above objectives?
  • Integrated Development Environment (IDE), where you can write the logic and custom code
  • VTAP Runtime APIs (Javascript APIs)
How to use Module Designer?
The Module Designer is available under Main Menu > Platform App. It is free for all Professional and Enterprise customers. If you want to develop and release extensions to the marketplace you can sign for a free developer edition from here.

You can use the Module Designer to add the following:

  1. VTAP Scripts – Lets you add custom buttons, widgets, etc.
  2. Components – Lets you add custom components.
  3. VTAP Styles – Helps you change the look and feel of the UI.
  4. Page – Allows you to add custom pages.

In this blog, we will discuss how to add VTAP scripts to the Module Designer.

Adding VTAP Scripts
VTAP Scripts are the entry points for custom logic. You start by giving a name to the script and selecting the module for which the script should run. It is important to choose a module since you very often have module-specific needs like listening to a contact’s button-click or a record save.

You can either choose to create a custom extension module or use existing modules to add a script.

Note: Create an extension module if you want the module to be released via the Vtiger marketplace.



Now let’s look at a few examples of using VTAP scripts.

Example 1: A button has been added to the Leads list page. Each script is created with this basic scaffolding with the name chosen for the script, as shown below.


The basic building block of VTAP is a component, and it’s based on the Vue component and its life cycle events.

  • Name of the component: Leads_Component_Register
  • Syntax: {{MODULE}}_Component_{{NAME}}
  • Components extend from: VTAP.Component.Core.extend

  • Created function is the entry point for any component. This is the function where you can register for buttons or listen for events.
  • C2
    VTAP.Component.Register API helps you add buttons, widgets, icons, etc. The 1st parameter of the API tells you where you want to add your custom components. To see the list of supported components, click here.
  • Template is where you add your HTML, if any.
  • Methods is where you add functions that are called in the template HTML. In the below example, we are calling the ClickMe function when a button is clicked. This is how the final code looks like:

Example 2: Adding a widget to Contact’s and Organization’s Summary View. You can use one registration to add the same widget in multiple modules. In such cases, we should add VTAP Script for all modules (Use the drop-down when creating VTAP Script).


For the VTAP.Component.Register API, we have a 4th parameter that helps you select the modules to which the widgets should be added. This is how it looks in the Organizations Summary View.


VTAP also provides you with the ability to listen to actions performed by the user. For example, when a user creates or updates a record, opens a details page, displays an edit popup window, etc. To see a list of such trigger events, click here.

You need to listen to such events and add a handler to perform actions on them. Below is an example for the event – record saved. This example will check the Contact Status of the Contact when the record is saved. If the Contact Status is Competitor, a Notification will be displayed saying, ‘Beware!!’.


Likewise, the VTAP platform has provided various UI hooks to insert your custom components like buttons in list/detail page, widgets in the Summary View, and icons. For all different placeholders provided, see the details given in our documentation.

In our coming blogs we will be covering the other features of VTAP – Custom Components, VTAP, and Custom Pages.

I highly recommend writing your own code. Start out small with a custom button and go from there. Use our Module Designer examples, available in our documentation, as a foundation for your first code. You will find that customizing your CRM can be a simple fun process.

For any other queries, please send an email to Sign up for the developer edition here.

Tags: , , , , , , , , , , , , ,

Leave a Reply

Notify of
Social Facebook

Manage your Facebook Page with Vtiger Social

A few days ago, we introduced you to our brand new Social module[1]. It is a platform within Vtiger CRM that allows you to manage ...
Blog Image - Social Module

Vtiger Social Module: Bring your Social Media Interactions into your CRM

It is no secret that social media now plays a prominent role in helping a company remain competitive in an increasingly digital corporate environment. You ...
List view Action 6 (1)

Big Little Things – List View Actions

Welcome to the first blog in our new miniseries, ‘Big Little Things,’ where we highlight some of the smaller features and enhancements in Vtiger CRM ...
VTAP blog feature image

Getting Started with VTAP API Designer – Part 2

Previously, in our Vtiger Application Platform (VTAP) blog series, we discussed how to customize the Vtiger interface and bring in custom buttons and widgets to ...
Blog - AB Testing in sales

Making the Most of A/B Testing in Sales

“There is nothing so terrible as activity without insight.” - Johann Wolfgang von Goethe I realize it can be tough to justify putting in the time ...
MS Teams blog feature image

The Road to Superior Teamwork with Microsoft Teams Integration

Switching between apps to get things done will break the continuum of work. Working on records in the CRM and collaborating on other apps simultaneously ...
Celebrate success 3

Celebrate your achievements – add confetti to your announcements in the CRM!

This pandemic has taught us many things, one of which is recognizing and encouraging ourselves when we achieve a goal. And the valuable lesson we ...
India Mart blog image

Vtiger-IndiaMART Integration: Manage leads and increase conversions!

Do you know that India is home to more than 1.3 billion people, the second-largest globally in terms of population?  For the unversed, India is a ...
Clearbit blog image

Leverage Vtiger – Clearbit integration to import contact details

Vtiger Cloud is now geared up with the Vtiger Application Platform (VTAP), an enabler that lets businesses build productive in-app customizations to boost CRM capabilities ...
VTAP Extension - blog image

Optimize your CRM using VTAP, Vtiger’s low code platform!

Ways to simplify common and repetitive tasks are always in great demand in order to save time, money, and effort. For example, simple optimization techniques ...
Copyright 2021 Vtiger | Privacy | Policy & Legal Center