Бюлетин за разработчици на Vtiger CRM

С помощта на App Creator можете:

Изградете специализирани облачни уеб приложения за клиенти.
Използвайте богати уеб приложения от страна на клиента, като използвате всяка рамка.

Моля прочетете нашата статия за да научите как да използвате App Creator.

Искате ли да получите достъп до App Creator? Моля, изпратете запитване до [имейл защитен].

Примерно приложение - Flipbook

Ето примерно приложение, което можете да изпробвате!

Следва скриптът за уеб приложение - Flipbook:

мнения/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>

ресурси/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
  });
});

ресурси/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;
}

Запазване и публикуване и стартирайте приложението, за да го видите в действие.

VTAPIT - Инструмент за команден ред

VTAPIT - Въведение

VTAPIT е инструмент за команден ред, който ви позволява да разработвате и управлявате VTAP приложения, създадени от Създателя на приложения (Платформа > Приложения). Той има подкоманди, подобни на инструмента GIT, което го прави лесен за научаване и започване.

Първи стъпки

Създайте ново приложение (testapp) на Vtiger CRM > Платформа > Създател на приложения (Приложения)
Изтеглете вашата операционна система, съвместима с изпълним файл - https://extend.vtiger.com/vtap/vtapit/dist Подкоманди

VTAPIT - Въведение

Първи стъпки

Създайте ново приложение (testapp) на Vtiger CRM > Платформа > Създател на приложения (Приложения)
Изтеглете вашата операционна система, съвместима с изпълним файл - https://extend.vtiger.com/vtap/vtapit/dist Подкоманди

Clone	Направете копие на създаденото в CRM приложение във вашата локална работна директория.
бягане	Активира време за изпълнение в локалната работна директория, която използва локални файлове и CRM Apis за данни.
Добави	Новосъздадените локални файлове могат да се добавят към CRM приложението.
Тласък	Качва всички локални промени (добавяне или модифициране на функции), направени във файловете в CRM приложението.
Дърпам	Изтегля всички промени от CRM приложението обратно в локална работна директория. Ако даден файл е променен в CRM, но не и в локалната директория, тогава се създава файл с маркер за конфликт. Трябва да използвате инструмента diff, за да сравните промените и след това да използвате подкомандата Resolve.
решение	Показва конфликтни (разлики) промени, които сте успели да прегледате.
Публикувам	Когато всички локални промени бъдат изпратени - използвайте тази подкоманда, за да я направите достъпна.

Clone

vtapit клонинг --crmapp=testapp --crmurl=https://your.odx.vtiger.crm --crmuser=[имейл защитен] --crmpass=******** local_dir/testapp

бягане

cd local_dir/testapp

vtapit тичам --crmurl=https://your.odx.vtiger.crm --crmuser=[имейл защитен] --crmpass=********

Добави

cd local_dir/testapp

vtapit add път_към_нов_файл

Тласък

cd local_dir/testapp

vtapit тласък --crmurl=https://your.odx.vtiger.crm --crmuser=[имейл защитен] --crmpass=********

Дърпам

cd local_dir/testapp

vtapit дръпнете --crmurl=https://your.odx.vtiger.crm --crmuser=[имейл защитен] --crmpass=********

решение

cd local_dir/testapp

vtapit разрешите път_към_файл

Публикувам

cd local_dir/testapp

vtapit публикувам --crmurl=https://your.odx.vtiger.crm --crmuser=[имейл защитен] --crmpass=********

Забележка: Можете да настроите променливи на CRM среда, за да избегнете повтаряне в командния ред.

CRM_URL=https://crm.url.tld

[имейл защитен]

CRM_PASSWORD=пас

CRM_APP=име на приложението

Clone

vtapit клонинг --crmapp=testapp --crmurl=https://your.odx.vtiger.crm --crmuser=[имейл защитен] --crmpass=******** local_dir/testapp

бягане

cd local_dir/testapp

vtapit тичам --crmurl=https://your.odx.vtiger.crm --crmuser=[имейл защитен] --crmpass=********

Добави

cd local_dir/testapp

vtapit add път_към_нов_файл

Тласък

cd local_dir/testapp

vtapit тласък --crmurl=https://your.odx.vtiger.crm --crmuser=[имейл защитен] --crmpass=********

Дърпам

cd local_dir/testapp

vtapit дръпнете --crmurl=https://your.odx.vtiger.crm --crmuser=[имейл защитен] --crmpass=********

решение

cd local_dir/testapp

vtapit разрешите път_към_файл

Публикувам

cd local_dir/testapp

vtapit публикувам --crmurl=https://your.odx.vtiger.crm --crmuser=[имейл защитен] --crmpass=********

Забележка: Можете да настроите променливи на CRM среда, за да избегнете повтаряне в командния ред.

CRM_URL=https://crm.url.tld

[имейл защитен]

CRM_PASSWORD=пас

CRM_APP=име на приложението

Очаквайте скоро - Модул Дизайнер 2.0

Дизайнер на модули 2.0 ще идва с по-опростен подход за потребителски интерфейс. Позволява ви да добавяте персонализирани бутони и действия, като използвате режима на дизайнер.

Режимът на дизайнер, след като бъде активиран, ще подчертае всички контейнери на страниците, където могат да се добавят персонализирани бутони, икони и изпълними елементи. Трябва само да щракнете и изберете името и да напишете активната javascript функция.

Регистрирайте се, за да получавате най-новите актуализации!

Давам съгласие на Vtiger да изпраща актуализации на новостите и други интересни четива.

Прочетох декларация за поверителност на Vtiger.