Our Most Recent Announcement

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 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 platform@vtiger.com. Sign up for the developer edition here.

Past Announcements

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 ...
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 ...
Pilot Edition Image

Introducing Vtiger One: Pilot Edition

At Vtiger, we are passionate about helping companies build deep customer relationships. We are a bootstrapped company ourselves, with over 15 years of legacy of ...

Remembering Vijay Kumar – our Friend, Colleague, and an Inspirational Giver

This year has been challenging for many. For us at Vtiger, our year-end has been unfortunately marked by the untimely loss of one of our own ...
V9 overview image 2

Vtiger 9 CRM – Changes, additions, and more

Change is constant! Now that is an oxymoron if there ever was one! But change for the better is good, right? Isn’t that the basic premise ...
Pay it forward - help those in trouble

A chance to pay it forward

Have you noticed those, bravely fighting the chaos that COVID created? Healthcare workers, security forces, businesses that provide essential services, and a few others have ...
featured image

Announcement: Vtiger has been honored with multiple awards from G2!

We’re excited to announce that G2 has named Vtiger CRM as a leader in the All-In-One CRM category! Vtiger CRM has received awards in several categories ...
2019 Gartner Peer Insights Customer's Choice Award

Vtiger recognized as a 2019 Gartner Peer Insights Customers’ Choice for Sales Force Automation for the THIRD consecutive time

We are excited to announce that Vtiger has been named a Gartner’s 2019 Peer Insights Customers’ Choice for Sales Force Automation. The latest result is ...

Vtiger recognized as a Niche player in Gartner 2019 Magic Quadrant for Sales Force Automation

Gartner has released its June 2019 report, “Magic Quadrant for Sales Force Automation” and we are happy to announce that Vtiger has been recognized amongst ...
Copyright 2021 Vtiger | Privacy | Policy & Legal Center