Vtiger CRM Developer Newsletter

With the combination of Vtiger’s Module Designer and VTAP, you can create apps and add the required UI components with reduced development time.

Consider this.

Using the Module Designer, you will be able to create scripts, and using VTAP, you will be able to add custom buttons in the List and Detail Views of selected modules in the CRM.

With the enhancements made to the Module Designer, developers will be able to add custom buttons from the UI quite easily.

Here is an example that shows how the enhanced Module Designer can reduce coding time. Let us add a List View button that will open the vtiger.com page in a new tab.

With the current Module Designer, you will be able to achieve this with the below code.

With the enhanced Module Designer, you can do this from the UI, as shown below.

You can add these actions from UI Actions under the Module Designer.

To achieve this, simply enable the Designer Mode under Module Designer -> Settings -> Customizer Settings.

Once you enable the Designer Mode checkbox, you will be able to add the buttons from the module page itself (for example, the List View page or the Detail View page in the Contacts module).

The icons you add will be highlighted after you enable the Designer mode, as illustrated above. Clicking on these icons will allow you to add custom buttons.

Currently, the following button types are enabled in the CRM.

Button Type	VTAP Register Event	Description
Global Action Icon	GLOBAL_ACTION	Adds the icon in Vtiger Header
List View Button	LIST_BASIC_BUTTON	Adds the button in the List View
List View Add Record Type	LIST_ADD_RECORD_OPTION	Adds the button before the Add button in the List View
List View Settings Action	LIST_ADVANCED_SETTING	Adds the button in Settings drop-down
List View Row Basic Action Icon	LIST_ROW_BASIC_ACTION	Adds the icon at the end of the List View row
List View Row Secondary Action Icon	LIST_ROW_SECONDARY_ACTION	Adds the icon to the beginning of the List View row
List View Mass Action Icon	LIST_MASS_ACTION	Adds icons for selecting the multiple records
Detail View More Action Item	DETAIL_MORE_ACTION_ITEM	Adds buttons to the More action in the Detail view
Detail View Basic Button	DETAIL_BASIC_BUTTON	Adds a button to the Detail View
Detail View Action Icon	DETAIL_ACTION_ICON	Adds the icon to the Detail header icons drop-down

VTAP Customer Use Case

The client operates within the realm of Translation Services. Their objective was to restrict the creation of Purchase Orders (PO) within a month of the project being created.

Vtiger was able to provide a solution using VTAP - a PO that is created after one month will trigger an approval.

Let us look at the code for the above solution.

The client operates within the realm of Translation Services. Their objective was to restrict the creation of Purchase Orders (PO) within a month of the project being created.

Vtiger was able to provide a solution using VTAP - a PO that is created after one month will trigger an approval.

Let us look at the code for the above solution.


  var PurchaseOrder_Component_ValidatePO = VTAP.Component.Core.extend({
    created() {
        VTAP.Detail.BeforeSave('PurchaseOrder', (params) => {
            return new Promise((resolve, reject) => {
                let record = params.record;
                if (!record.id && record.cf_purchaseorder_projectref) {
                    VTAP.Api.Get('records', {
                        id: record.cf_purchaseorder_projectref.id,
                        module: record.cf_purchaseorder_projectref.module
                    }, (error, response) => {
                        if (response) {
                            let currentDate = moment.tz(new Date(), 'YYYY-MM-DD', VTAP.User().time_zone);
                            let projectDate = moment.tz(response.createdtime, 'YYYY-MM-DD', VTAP.User().time_zone);
                            let months = currentDate.diff(projectDate, 'months');
                            if (months >= 1) {
                                record.set('postatus', 'Needs Approval');
                            }
                            resolve(params);
                        }
                    });
                } else {
                    resolve(params);
                }
            });
        });
    }
});


  var PurchaseOrder_Component_ValidatePO = VTAP.Component.Core.extend({
    created() {
        VTAP.Detail.BeforeSave('PurchaseOrder', (params) => {
            return new Promise((resolve, reject) => {
                let record = params.record;
                if (!record.id && record.cf_purchaseorder_projectref) {
                    VTAP.Api.Get('records', {
                        id: record.cf_purchaseorder_projectref.id,
                        module: record.cf_purchaseorder_projectref.module
                    }, (error, response) => {
                        if (response) {
                            let currentDate = moment.tz(new Date(), 'YYYY-MM-DD', VTAP.User().time_zone);
                            let projectDate = moment.tz(response.createdtime, 'YYYY-MM-DD', VTAP.User().time_zone);
                            let months = currentDate.diff(projectDate, 'months');
                            if (months >= 1) {
                                record.set('postatus', 'Needs Approval');
                            }
                            resolve(params);
                        }
                    });
                } else {
                    resolve(params);
                }
            });
        });
    }
});

VTAP.Detail.BeforeSave will trigger the event handler before saving any record in the specified module. Depending on resolve and reject commands, the system will proceed to save the record or stop.

Coming Soon

App Creation and App Evolution

Utilizing the capabilities of the App Creator tool, we are embarking on a journey that goes beyond the conventional.

Designing for All: A fresh perspective on CRM with inclusive app creation

App Evolution: Revolutionizing CRM interaction for every profile

We are not just enabling app creation for CRM users; we are extending this privilege to our contacts and the wider public. Our vision encompasses introducing three distinct avenues for app creation, each catering to a specific realm of engagement.

User apps: These specialized applications are designed exclusively for CRM users. Tailored to meet the unique needs of those within your organization, these apps will empower your CRM users with tools finely tuned to enhance their productivity and efficiency.

Contact apps: Imagine an environment where your contacts, too, can engage with purpose-built applications. These apps, accessible to contacts exclusively, mirror the concept of a customer portal, granting your contacts a seamless channel for interaction and engagement with your business.

Public apps: Expanding the horizons further, we are introducing apps that transcend organizational boundaries. These apps are designed for public access, opening up new avenues for interaction and value creation. By making these apps accessible to a wider audience, we are breaking down barriers and fostering engagement beyond the traditional confines.

In effect, the introduction of these diverse app categories empowers you to forge custom solutions and craft unique applications. The purpose? To cater to an expansive audience, both those directly involved with CRM and those indirectly connected. This approach augments your CRM's potential and brings your organization closer to its customers, contacts, and the world at large.

Utilizing the capabilities of the App Creator tool, we are embarking on a journey that goes beyond the conventional.

Designing for All: A fresh perspective on CRM with inclusive app creation

App Evolution: Revolutionizing CRM interaction for every profile

I provide consent to Vtiger to send updates of what's new and other interesting reads.

I have read the privacy policy of Vtiger.