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

Functions

• Created function is the entry point for any component. This is the function where you can register for buttons or listen for events.



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.