Boletim informativo do desenvolvedor do Vtiger CRM

Usando o App Creator, você pode:

Crie aplicativos da Web em nuvem especializados para clientes.
Use aplicativos da Web avançados do lado do cliente usando qualquer estrutura.

. leia nosso artigo para aprender a usar o App Creator.

Gostaria de acessar o App Creator? Por favor, envie uma solicitação para [email protegido].

Aplicativo de amostra - Flipbook

Aqui está um exemplo de aplicativo que você pode experimentar!

A seguir está o script para um aplicativo da web - Flipbook:

visualizações/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;
}

Salvar e publicar e inicie o aplicativo para vê-lo em ação.

VTAPIT - Ferramenta de linha de comando

VTAPIT - Introdução

O VTAPIT é uma ferramenta de linha de comando que permite desenvolver e gerenciar aplicativos VTAP criados a partir do App Creator (Plataforma > Aplicativos). Possui subcomandos semelhantes à ferramenta GIT, o que facilita o aprendizado e a inicialização.

Iniciar

Crie um novo aplicativo (testapp) no Vtiger CRM > Plataforma > App Creator (Apps)
Baixe seu sistema operacional compatível com executável - https://extend.vtiger.com/vtap/vtapit/dist Subcomandos

VTAPIT - Introdução

Iniciar

Crie um novo aplicativo (testapp) no Vtiger CRM > Plataforma > App Creator (Apps)
Baixe seu sistema operacional compatível com executável - https://extend.vtiger.com/vtap/vtapit/dist Subcomandos

clone	Faça uma cópia do aplicativo criado no CRM para seu diretório de trabalho local.
Execute	Ativa o tempo de execução no diretório de trabalho local, que usa arquivos locais e APIs do CRM para dados.
Adicionar	Arquivos locais recém-criados podem ser adicionados ao aplicativo CRM.
Empurrar	Carrega todas as alterações locais (adicionar ou modificar funções) feitas nos arquivos para o aplicativo CRM.
Puxe	Baixa todas as alterações do aplicativo CRM de volta para um diretório de trabalho local. Se um arquivo foi alterado no CRM, mas não no diretório local, um arquivo de marcador de conflito é criado. Você precisa usar a ferramenta diff para comparar as alterações e, em seguida, usar o subcomando Resolver.
Resolver	Indica alterações de conflito (diferença) que você conseguiu revisar.
Publique	Quando todas as alterações locais forem enviadas - use este subcomando para torná-lo disponível.

clone

clone vtapit --crmapp=testapp --crmurl=https://your.odx.vtiger.crm --crmuser=[email protegido] --crmpass=******** local_dir/testapp

Execute

cd local_dir/testapp

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

Adicionar

cd local_dir/testapp

adicionar vtapit caminho_para_novo_arquivo

Empurrar

cd local_dir/testapp

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

Puxe

cd local_dir/testapp

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

Resolver

cd local_dir/testapp

vtapit resolver caminho_para_arquivo

Publique

cd local_dir/testapp

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

Observação: Você pode configurar variáveis de ambiente do CRM para evitar a repetição na linha de comando.

CRM_URL=https://crm.url.tld

[email protegido]

CRM_PASSWORD=passar

CRM_APP=nome do aplicativo

clone

clone vtapit --crmapp=testapp --crmurl=https://your.odx.vtiger.crm --crmuser=[email protegido] --crmpass=******** local_dir/testapp

Execute

cd local_dir/testapp

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

Adicionar

cd local_dir/testapp

adicionar vtapit caminho_para_novo_arquivo

Empurrar

cd local_dir/testapp

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

Puxe

cd local_dir/testapp

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

Resolver

cd local_dir/testapp

vtapit resolver caminho_para_arquivo

Publique

cd local_dir/testapp

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

Observação: Você pode configurar variáveis de ambiente do CRM para evitar a repetição na linha de comando.

CRM_URL=https://crm.url.tld

[email protegido]

CRM_PASSWORD=passar

CRM_APP=nome do aplicativo

Em breve - Module Designer 2.0

Designer de Módulo 2.0 virá com uma abordagem de interface de usuário mais simples. Ele permite adicionar botões e ações personalizados usando o modo Designer.

O modo Designer, uma vez ativado, destacará todos os espaços reservados nas páginas onde botões, ícones e widgets personalizados podem ser adicionados. Você só precisa clicar e selecionar o nome e escrever a função javascript acionável.

Designer de Módulo 2.0 virá com uma abordagem de interface de usuário mais simples. Ele permite adicionar botões e ações personalizados usando o modo Designer.

Inscreva-se para receber as últimas atualizações!

Eu dou consentimento ao Vtiger para enviar atualizações do que há de novo e outras leituras interessantes.

Eu li o política de privacidade de Vtiger.