Articles in this section
VTAP - App Creator
Table of Contents
Introduction
VTAP platform provides an App Creator toolkit to build creative applications that solve business needs that are beyond CRM configuration. The App Creator runtime provides developers capabilities to extend CRM functionality, strengthen business integration or custom needs, and requires limited coding knowledge.
Using the App Creator, you can:
- Build specialized cloud web applications for clients.
- Use rich client-side web applications using any framework.
Feature Availability
App Creator (App Designer) is now available by default for Learning and Developer editions of Vtiger CRM.
Benefits of App Creator
- Develop with just HTML, CSS, and Javascript knowledge.
- Deliver advanced business UX flow using the CRM platform without reinventing the wheel.
- Distribute the built applications so other users can use them to expand the CRM capabilities.
In this article, we will learn how to develop an application using VTAP App Creator.
Key Terminology
|
|
|
|
|
|
Creating an Application
Follow these steps to create an application using App Creator:
- Log in to your CRM account.
- Click the Main Menu.
- Click Platform.
- Click Apps under Designers.
- Click +Add App.
- Enter or select the information for the following:
- Name: Enter a name for the application.
- Icon: Browse and choose an icon for the application.
- Description: Enter a brief description of the application.
- Status: Click the checkbox to set the application status to active.
- Owner: Select the owner of the application from the drop-down.
- Click Save. A new application is created and is available in the List View.
- You can now set up access to your custom apps based on user profiles.
- This is possible since you can add a list of roles when creating an app. These roles will be displayed in a drop-down list while setting up permissions.
Editing an Application
As soon as you click Save, the application editor window opens. You can design the application as per the requirement in the editor.
The application is structured into two main directories.
- Views - HTML files that handle the representation of the data are organized here.
- Resources - JS and CSS files that handle the transformation of data or styling HTML are organized in this folder.
You will be able to create a new sub-folder or file under these as per your convention.
To help you get started quickly, default files as templates.
- index.html: In this section, you can edit the text you want to display on your application.
- index.js: In this section, you can add and edit the dynamics of your application.
- index.css: In this section, you can add and edit the application's style, color, size, and format.
- vcap.js: In this section, you can edit your application's runtime.
Follow these steps to edit the application:
- Click index.html. Edit the HTML components on the text editor as per requirement. Click Ctrl+S to save the file.
- Click index.js. Add the javascript code on the text editor as per requirement. Click Ctrl+S to save the file.
- Click index.css. Add CSS rules in the text editor as per requirement. Click Ctrl+S to save the file.
- Click Save and Publish to publish the application.
To launch the published application, use the following URL:
|
|
Now let us consider a sample web application.
Sample Application - Flipbook
Following is the script for a web application - Flipbook:
- views/index.html
- resources/index.js
|
- resources/index.css
|
Click Save and Publish and Launch the application to see it in action.