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

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

Benefits of knowledge base

Knowledge Base: Centralize Information to Drive Business Growth

Sam owns an e-learning company named ‘DataBridge’ that offers online training programs on data science. These courses are available for students and corporate employees, who ...
CRM implemantation 1

Keys to a successful CRM implementation – Requirements, Roles, and Responsibilities

A well-implemented CRM can empower Marketing, Sales, and Customer Service teams to have better conversations with customers. It will improve sales and customer satisfaction. However, ...
Knowledge Base image

Knowledge Base, a repository of information to provide an enriching customer experience

A long time ago, knowledge about a particular skill set was a tightly held secret. It was shared with apprentices and students through specific guilds ...

Big Little Things: Duplicate Prevention

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 ...
CRM Analytics

CRM Analytics: Generate Reports, Provide Insights, Improve Business Performance

What do you think is essential for a business to enhance customer relationships? The key element is to have data handy for all the activities ...

Vtiger Webforms: Create Web forms without having to write code

Webforms are a great way to capture contact information from your website. Since things have become online, businesses have started using web pages to capture leads ...
Food blog 1

Eat, Talk, Collaborate…conversations over coffee, chips, and curd rice.

Other people, when they go to their offices, have to deal with office politics, evil superiors, heavy workload, blah, blah...but some of my co-workers and ...
Survey blog

Vtiger Surveys: Easily collect users’ feedback and insights

Have you ever thought of the question you would want to ask a bunch of people and know their opinion? Or, ever wanted to know people’s ...
Big Little Things Custom List-01

Big Little Things: Creating a Custom List

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 ...
Benefits of using CRM with Marketing

Different Ways to Enhance Your Business with Marketing Automation Software

Marketing automation is the method of using software to automate all your repetitive marketing activities. This includes generating leads, launching and tracking campaigns, analyzing customer ...
Copyright 2022 Vtiger | Privacy | Policy & Legal Center