Submit a request Sign In
  • Logout
    Home  >   Articles   >  VTAP - App Creator
    Articles in this section
    Vtiger Add-ons Publisher Insights Designer Editions with Record Limits

    VTAP - App Creator

    This article guides you through the process of using the Vtiger Application Platform to create small applications.
    A
    Abdul Sameer
    9 Apr, 2024 - Updated 17 days ago
    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

    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 of the programming lifecycle. It is the time that 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:

    1. Log in to your CRM account.
     
    1. Click the Main Menu.
     
    1. Click Platform.
    2. Click Apps under Designers. 
     
    1. Click +Add App.
     
    1. Enter or select the information for the following:
      1. Name: Enter a name for the application.
      2. Icon: Browse and choose an icon for the application.
      3. Description: Enter a brief description of the application.
      4. Status: Click the checkbox to set the application status to active.
      5. Owner: Select the owner of the application from the drop-down.
    2. Click Save. A new application is created and is available in the List View.
    Note:
    • 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:

    1. Click index.html. Edit the HTML components on the text editor as per requirement. Click Ctrl+S to save the file.

     

    1. Click index.js. Add the javascript code on the text editor as per requirement. Click Ctrl+S to save the file.
     
    1. Click index.css. Add CSS rules in the text editor as per requirement. Click Ctrl+S to save the file.
    2. 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 sample web application. 

    Sample Application - Flipbook

    Following is the script for a web application - Flipbook:

     
    • views/index.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 and Launch the application to see it in action.

    Was this article helpful?
    0  out of  0  found this helpful.
    Related articles
    May 2021 July 2021 VTAP Release Notes
    Comments 0
    Be the first to comment
    Home
    Privacy Policy
    Terms of Service
    Security Center
    Policy & Legal Center
    Contact Us
    © Copyright 2023 Vtiger. All rights reserved.
    Powered by Vtiger