Boletín para desarrolladores de Vtiger CRM

Con el Creador de aplicaciones, puede:

Cree aplicaciones web en la nube especializadas para clientes.
Use aplicaciones web enriquecidas del lado del cliente utilizando cualquier marco.

Por favor, lee nuestro articulo para aprender a usar App Creator.

¿Te gustaría acceder al Creador de aplicaciones? Por favor envíe una solicitud a [email protected].

Solicitud de muestra: libro animado

¡Aquí hay una aplicación de muestra que puede probar!

El siguiente es el script para una aplicación web - Flipbook:

vistas/index.html


  <!DOCTYPE html>
<html>
    <head>
        <title>VTAP Flipbook</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="resources/index.css">
        <script 
        src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js">
        </script>
        <script
        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9729/turn.min.js">
        </script>
    </head>
    <body>
        <div id="flipbook" class="sample-flipbook">
            <div class="hard"> Vtiger Platform </div>
            <div class="hard"></div>
            <div> Build creative apps </div>
            <div> to business much easily </div>
            <div> than ever before. </div>
            <div> Thank you! </div>
            <div class="hard"></div>
            <div class="hard"></div>
        </div>
        <script src="resources/vcap.js"></script>
        <script src="resources/index.js"></script>
    </body>
</html>


  <!DOCTYPE html>
<html>
    <head>
        <title>VTAP Flipbook</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="resources/index.css">
        <script 
        src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js">
        </script>
        <script
        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9729/turn.min.js">
        </script>
    </head>
    <body>
        <div id="flipbook" class="sample-flipbook">
            <div class="hard"> Vtiger Platform </div>
            <div class="hard"></div>
            <div> Build creative apps </div>
            <div> to business much easily </div>
            <div> than ever before. </div>
            <div> Thank you! </div>
            <div class="hard"></div>
            <div class="hard"></div>
        </div>
        <script src="resources/vcap.js"></script>
        <script src="resources/index.js"></script>
    </body>
</html>

recursos/index.js


  CAP.event.on('app.loaded', function(){
    $("#flipbook").turn({
    width: 400,
    height: 300,
    autoCenter: true
  });
});


  CAP.event.on('app.loaded', function(){
    $("#flipbook").turn({
    width: 400,
    height: 300,
    autoCenter: true
  });
});

recursos/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 005px#666;
        -moz-box-shadow:inset 005px#666;
        -o-box-shadow:inset 005px#666;
        -ms-box-shadow:inset 005px#666;
        box-shadow:inset 005px#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 005px#666;
        -moz-box-shadow:inset 005px#666;
        -o-box-shadow:inset 005px#666;
        -ms-box-shadow:inset 005px#666;
        box-shadow:inset 005px#666;
}


  .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 005px#666;
        -moz-box-shadow:inset 005px#666;
        -o-box-shadow:inset 005px#666;
        -ms-box-shadow:inset 005px#666;
        box-shadow:inset 005px#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 005px#666;
        -moz-box-shadow:inset 005px#666;
        -o-box-shadow:inset 005px#666;
        -ms-box-shadow:inset 005px#666;
        box-shadow:inset 005px#666;
}

Guardar y publicar e inicie la aplicación para verla en acción.

VTAPIT - Herramienta de línea de comandos

VTAPIT - Introducción

VTAPIT es una herramienta de línea de comandos que le permite desarrollar y administrar aplicaciones VTAP creadas desde App Creator (Plataforma > Aplicaciones). Tiene subcomandos similares a la herramienta GIT, lo que facilita el aprendizaje y la puesta en marcha.

Iniciar

Cree una nueva aplicación (aplicación de prueba) en Vtiger CRM> Plataforma> Creador de aplicaciones (Aplicaciones)
Descargue su sistema operativo compatible con el ejecutable: https://extend.vtiger.com/vtap/vtapit/dist Subcomandos

VTAPIT - Introducción

Iniciar

Cree una nueva aplicación (aplicación de prueba) en Vtiger CRM> Plataforma> Creador de aplicaciones (Aplicaciones)
Descargue su sistema operativo compatible con el ejecutable: https://extend.vtiger.com/vtap/vtapit/dist Subcomandos

Clon	Haga una copia de la aplicación creada en el CRM en su directorio de trabajo local.
Ejecutar	Habilita el tiempo de ejecución en el directorio de trabajo local, que utiliza archivos locales y API de CRM para los datos.
Añada	Los archivos locales recién creados se pueden agregar a la aplicación CRM.
Push	Carga todos los cambios locales (agregar o modificar funciones) realizados en los archivos a la aplicación CRM.
Jale	Descarga todos los cambios de la aplicación de CRM a un directorio de trabajo local. Si un archivo ha cambiado en CRM pero no en el directorio local, se crea un archivo de marcador de conflicto. Debe usar la herramienta diff para comparar los cambios y luego usar el subcomando Resolver.
Resolve	Indica cambios de conflicto (dif) que ha logrado revisar.
Publicar	Cuando se envíen todos los cambios locales, use este subcomando para que esté disponible.

Clon

clon vtapit --crmapp=aplicación de prueba --crmurl=https://your.odx.vtiger.crm --crmuser=[email protected] --crmpass=******** local_dir/testapp

Ejecutar

cd dir_local/testapp

ejecutar vtapit --crmurl=https://your.odx.vtiger.crm --crmuser=[email protected] --crmpass=********

Añada

cd dir_local/testapp

añadir ruta_al_nuevo_archivo

Push

cd dir_local/testapp

empujar vtapit --crmurl=https://your.odx.vtiger.crm --crmuser=[email protected] --crmpass=********

Jale

cd dir_local/testapp

jalar vtapit --crmurl=https://your.odx.vtiger.crm --crmuser=[email protected] --crmpass=********

Resolve

cd dir_local/testapp

resolver vtapit ruta_al_archivo

Publicar

cd dir_local/testapp

publicar --crmurl=https://your.odx.vtiger.crm --crmuser=[email protected] --crmpass=********

Nota: Puede configurar las variables de entorno de CRM para evitar que se repitan en la línea de comandos.

CRM_URL=https://crm.url.tld

[email protected]

CRM_PASSWORD=aprobado

CRM_APP=nombre de la aplicación

Clon

clon vtapit --crmapp=aplicación de prueba --crmurl=https://your.odx.vtiger.crm --crmuser=[email protected] --crmpass=******** local_dir/testapp

Ejecutar

cd dir_local/testapp

ejecutar vtapit --crmurl=https://your.odx.vtiger.crm --crmuser=[email protected] --crmpass=********

Añada

cd dir_local/testapp

añadir ruta_al_nuevo_archivo

Push

cd dir_local/testapp

empujar vtapit --crmurl=https://your.odx.vtiger.crm --crmuser=[email protected] --crmpass=********

Jale

cd dir_local/testapp

jalar vtapit --crmurl=https://your.odx.vtiger.crm --crmuser=[email protected] --crmpass=********

Resolve

cd dir_local/testapp

resolver vtapit ruta_al_archivo

Publicar

cd dir_local/testapp

publicar --crmurl=https://your.odx.vtiger.crm --crmuser=[email protected] --crmpass=********

Nota: Puede configurar las variables de entorno de CRM para evitar que se repitan en la línea de comandos.

CRM_URL=https://crm.url.tld

[email protected]

CRM_PASSWORD=aprobado

CRM_APP=nombre de la aplicación

Próximamente: Diseñador de módulos 2.0

Diseñador de módulos 2.0 vendrá con un enfoque de interfaz de usuario más simple. Le permite agregar botones y acciones personalizados utilizando el modo Diseñador.

El modo Diseñador, una vez habilitado, resaltará todos los marcadores de posición en las páginas donde se pueden agregar botones, íconos y widgets personalizados. Solo necesita hacer clic y seleccionar el nombre y escribir la función javascript procesable.

Diseñador de módulos 2.0 vendrá con un enfoque de interfaz de usuario más simple. Le permite agregar botones y acciones personalizados utilizando el modo Diseñador.

¡Regístrese para recibir las últimas actualizaciones!

Doy mi consentimiento para que Vtiger envíe actualizaciones de novedades y otras lecturas interesantes.

He leído la políticas de privacidad de Vtiger.