Articles in this section
VTAP - App Creator
Feature Availability
Vtiger Editions: One Enterprise | One Professional | One AI
Introduction
Are you a web designer or a front-end developer with a business around CRM solutions?
The VTAP platform offers an App Creator toolkit to develop innovative applications that address business needs beyond CRM configuration. The App Creator runtime provides developers with the capabilities to extend CRM functionality, strengthen business integration, or meet custom needs, requiring 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.
Benefits of App Creator
The benefits of using the App Creator are that you can:- 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, you will learn how to develop an application using VTAP App Creator.
Key Terminology
| Web Application | It is an application program that is stored on a remote server and delivered over the internet through a browser interface. |
| Framework | A framework in programming is a tool that provides ready-made components or solutions that are customized in order to speed up development. |
| Runtime | It is a stage in the programming lifecycle and refers to the time a program is running alongside all the external instructions needed for proper execution. |
Creating an Application
Follow these steps to create an application using App Creator:
- Log in to the CRM.
- Click the Main Menu.
- Click Platform.
- Click Apps under Designers. The Apps window opens.
- Click +Add App.
- Enter or select 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.
- 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
When you create an app and click Save, the application editor window opens. You can now design the application as per your requirements 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, save 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 in the text editor as per the requirement. Click Ctrl+S to save the file.
- Click index.js. Add the JavaScript code in the text editor as per the requirement. Click Ctrl+S to save the file.
- Click index.css. Add CSS rules in the text editor as per the 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: https://INSTANCE.od1.vtiger.ws/myapps/APPLICATION_NAME
Note: The above URL is a sample. Make sure to add your Instance address and Application name to run the application.
Now, let us consider a few sample web applications.
Sample Application - Flipbook
Following is the script for a web application - Flipbook:
views/index. html
| !DOCTYPE html> " Vtiger Platform Build creative apps to business much easily than ever before. Thank you! |
- resources/index.js
VCAP.event.on('app.loaded', function(){ $("#flipbook").turn({ width: 400, height: 300, autoCenter: true }); }); |
- resources/index.css
| .sample-flipbook{ width:400px; height:200px; -webkit-transition:margin-left 0.2s; -moz-transition:margin-left 0.2s; -ms-transition:margin-left 0.2s; -o-transition:margin-left 0.2s; transition:margin-left 0.2s; } .sample-flipbook .page{ width:200px; height:200px; background-color:white; line-height:300px; font-size:20px; } .sample-flipbook .page-wrapper{ -webkit-perspective:2000px; -moz-perspective:2000px; -ms-perspective:2000px; -o-perspective:2000px; perspective:2000px; } .sample-flipbook .hard{ background:#ccc !important; color:#333; -webkit-box-shadow:inset 0 0 5px #666; -moz-box-shadow:inset 0 0 5px #666; -o-box-shadow:inset 0 0 5px #666; -ms-box-shadow:inset 0 0 5px #666; box-shadow:inset 0 0 5px #666; font-weight:bold; } .sample-flipbook .odd{ background:-webkit-gradient(linear, right top, left top, color-stop(0.95, #FFF), color-stop(1, #DADADA)); background-image:-webkit-linear-gradient(right, #FFF 95%, #C4C4C4 100%); background-image:-moz-linear-gradient(right, #FFF 95%, #C4C4C4 100%); background-image:-ms-linear-gradient(right, #FFF 95%, #C4C4C4 100%); background-image:-o-linear-gradient(right, #FFF 95%, #C4C4C4 100%); background-image:linear-gradient(right, #FFF 95%, #C4C4C4 100%); -webkit-box-shadow:inset 0 0 5px #666; -moz-box-shadow:inset 0 0 5px #666; -o-box-shadow:inset 0 0 5px #666; -ms-box-shadow:inset 0 0 5px #666; box-shadow:inset 0 0 5px #666; } .sample-flipbook .even{ background:-webkit-gradient(linear, left top, right top, color-stop(0.95, #fff), color-stop(1, #dadada)); background-image:-webkit-linear-gradient(left, #fff 95%, #dadada 100%); background-image:-moz-linear-gradient(left, #fff 95%, #dadada 100%); background-image:-ms-linear-gradient(left, #fff 95%, #dadada 100%); background-image:-o-linear-gradient(left, #fff 95%, #dadada 100%); background-image:linear-gradient(left, #fff 95%, #dadada 100%); -webkit-box-shadow:inset 0 0 5px #666; -moz-box-shadow:inset 0 0 5px #666; -o-box-shadow:inset 0 0 5px #666; -ms-box-shadow:inset 0 0 5px #666; box-shadow:inset 0 0 5px #666; } |
Click Save and Publish. Launch the application to see it in action.