Информационный бюллетень разработчиков Vtiger CRM

С помощью Конструктора приложений вы можете:

Создавайте специализированные облачные веб-приложения для клиентов.
Используйте многофункциональные веб-приложения на стороне клиента с использованием любой платформы.

Пожалуйста, прочитайте нашу статью чтобы узнать, как использовать App Creator.

Хотите получить доступ к Создателю приложений? Пожалуйста, отправьте запрос на [электронная почта защищена].

Образец заявки — флипбук

Вот пример приложения, которое вы можете попробовать!

Ниже приведен скрипт для веб-приложения — 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 — это инструмент командной строки, который позволяет разрабатывать и управлять приложениями VTAP, созданными в App Creator (Платформа > Приложения). Он имеет подкоманды, аналогичные инструменту GIT, что упрощает его изучение и начало работы.

Свяжитесь с нами

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

ВТАПИТ — Введение

Свяжитесь с нами

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

Клон	Сделайте копию приложения, созданного в CRM, в локальный рабочий каталог.
Run	Включает среду выполнения в локальном рабочем каталоге, который использует локальные файлы и CRM Apis для данных.
Добавить	Вновь созданные локальные файлы можно добавить в приложение CRM.
Push	Загружает все локальные изменения (добавление или изменение функций), внесенные в файлы, в приложение CRM.
Pull	Загружает все изменения из приложения CRM обратно в локальный рабочий каталог. Если файл изменился в CRM, но не в локальном каталоге, то создается файл маркера конфликта. Вам нужно использовать инструмент diff для сравнения изменений, а затем использовать подкоманду Resolve.
Решение	Указывает конфликтующие (diff) изменения, которые вам удалось просмотреть.
Опубликовать	Когда все локальные изменения будут отправлены, используйте эту подкоманду, чтобы сделать их доступными.

Клон

втапить клон --crmapp=тестовое приложение --crmurl=https://your.odx.vtiger.crm --crmuser=[электронная почта защищена] --crmpass=******** local_dir/testapp

Run

компакт-диск local_dir/testapp

втапить бежать --crmurl=https://your.odx.vtiger.crm --crmuser=[электронная почта защищена] --crmpass=********

Добавить

компакт-диск local_dir/testapp

втапить добавить путь_к_новому_файлу

Push

компакт-диск local_dir/testapp

втапить толчок --crmurl=https://your.odx.vtiger.crm --crmuser=[электронная почта защищена] --crmpass=********

Pull

компакт-диск local_dir/testapp

втапить тянуть --crmurl=https://your.odx.vtiger.crm --crmuser=[электронная почта защищена] --crmpass=********

Решение

компакт-диск local_dir/testapp

втапить разрешение путь_к_файлу

Опубликовать

компакт-диск local_dir/testapp

втапить опубликовать --crmurl=https://your.odx.vtiger.crm --crmuser=[электронная почта защищена] --crmpass=********

Примечание: Вы можете настроить переменные среды CRM, чтобы избежать повторения в командной строке.

CRM_URL=https://crm.url.tld

[электронная почта защищена]

CRM_PASSWORD=пароль

CRM_APP=имя приложения

Клон

Run

компакт-диск local_dir/testapp

втапить бежать --crmurl=https://your.odx.vtiger.crm --crmuser=[электронная почта защищена] --crmpass=********

Добавить

компакт-диск local_dir/testapp

втапить добавить путь_к_новому_файлу

Push

компакт-диск local_dir/testapp

втапить толчок --crmurl=https://your.odx.vtiger.crm --crmuser=[электронная почта защищена] --crmpass=********

Pull

компакт-диск local_dir/testapp

втапить тянуть --crmurl=https://your.odx.vtiger.crm --crmuser=[электронная почта защищена] --crmpass=********

Решение

компакт-диск local_dir/testapp

втапить разрешение путь_к_файлу

Опубликовать

компакт-диск local_dir/testapp

втапить опубликовать --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.