Vtiger Editions: One Enterprise | One Professional | One AI
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:
In this article, you will learn how to develop an application using VTAP App Creator.
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. |
Follow these steps to create an application using App Creator:
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.
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.
Follow these steps to edit 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.
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! |
VCAP.event.on('app.loaded', function(){ $("#flipbook").turn({ width: 400, height: 300, autoCenter: true }); }); |
.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; } |