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

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


This Room is a Big Deal

We are constantly looking to help companies improve their customer experience (CX) here at Vtiger. Our CRM platform is optimized for all stakeholders within the ...
Big Little Things Banner 2-04

Big Little Things – Tags

Welcome back to the blog series Big Little Things, where we highlight some of the lesser-known and sometimes overlooked features and enhancements in Vtiger CRM ...
Vtiger lite (1)

Use Vtiger CRM mobile app to stay on top of your business

Does your profession involve traveling a lot? Well, work doesn’t have to stop if you are traveling. Or, if you don’t have a computer and ...
Title Image 1

Boost customer interactions. Engage with your Twitter & Instagram audiences directly from the CRM.

We spend more time online than ever before - in 2020, we spent a whopping 16 trillion hours on our mobiles! * And about 48% ...
Blog - Project Management

Fundamentals of Project Management

Are you an individual trying to understand your role in a project? Or perhaps you have been assigned as a project lead out of the ...
Vtiger Video Conferencing Integration

6 Vtiger video conferencing features to power up your collaborations

With businesses providing services globally - remote sales and support are the new normal. The rise of remote work has also driven the demand for ...
Big Little Things 91

Big Little Things – Find Duplicates

Welcome back to Big Little Things, where we highlight some of the lesser-known and sometimes overlooked features and enhancements in Vtiger CRM that pack a ...

Six benefits of integrating Vtiger CRM with your WhatsApp account

Instant messaging has replaced traditional methods of commercial communication. Customers want businesses to be able to interact with them immediately. Did you know that 63% ...
Landing page blog 2

Boost your lead generation with Vtiger’s Landing Pages feature

The internet is an amazing place to be. It continues to change how we communicate with one another, share knowledge, and live a fulfilling existence ...
Vtiger Aide 5

Multi-task effortlessly with Aide, Vtiger’s virtual assistant

When you are on a client visit, or traveling, or simply having a busy day, there is every chance you might miss out on a ...
Copyright 2021 Vtiger | Privacy | Policy & Legal Center