Хронология

1. Создать SQL-сценарий 

1. Перейдите в раздел Конфигурация (Configuration) и выберите пользовательский пакет, в который будет добавлен SQL-сценарий.

2. На панели инструментов реестра раздела нажмите Добавить —> SQL-сценарий (Add —> SQL script).

   

3. Заполните свойства схемы.

   • Код (Code) — "usrAddTimelineScript".
   • Тип СУБД (DBMS type) — выберите необходимый тип СУБД, например "MSSql".
   • Тип установки (Installation type) — выберите "AfterPackage".
   

4. Добавьте код SQL-сценария.

   В коде укажите значения колонок:

   • [Key] — "OrderPageV2".

   • [Data] —  JSON-объект с конфигурацией данных плитки.

   В примере используется базовая плитка Orders. Для нее в таблице [TimelineTileSettings]  базы данных уже существует запись с идентификатором "0ef5bd15-f3d3-4673-8af7-f2e61bc44cf0".

   usrTimelineScript

   MSSql

   PostgreSql

   INSERT INTO TimelinePageSetting ([Key], [Data]) VALUES ('OrderPageV2', convert(VARBINARY(MAX),'[
     {
       "entityConfigKey": "0ef5bd15-f3d3-4673-8af7-f2e61bc44cf0",
       "entitySchemaName": "Contract",
       "referenceColumnName": "Order",
       "orderColumnName": "StartDate",
       "authorColumnName": "Owner",
       "captionColumnName": "Number",
       "messageColumnName": "Notes",
       "caption": "My Contracts",
       "masterRecordColumnName": "Id"
     }
   ]'))

   INSERT INTO "TimelinePageSetting" ("Key", "Data") VALUES ('OrderPageV2', cast ('[{"entityConfigKey": "0ef5bd15-f3d3-4673-8af7-f2e61bc44cf0","entitySchemaName": "Contract","referenceColumnName": "Order","orderColumnName": "StartDate","authorColumnName": "Owner","captionColumnName": "Number","messageColumnName": "Notes","caption": "My Contracts","masterRecordColumnName": "Id"}]' as BYTEA))

5. На панели инструментов дизайнера нажмите Сохранить (Save).

2. Установить данные SQL-сценария 

В контекстном меню созданного SQL-сценария нажмите Установить (Install) для выполнения  скрипта в базе данных.

Результат выполнения примера 

В результате выполнения примера в разделе Заказы (Orders)  отображается вкладка Хронология (Timeline) с базовой плиткой.

1. Создать раздел Книги (Books)) 

Чтобы создать раздел Книги (Books), установите пакет примера Привязать данные к пакету.

После установки пакета в рабочем месте Продажи (Sales) доступен раздел Книги (Books).

На вкладке Books страницы контрагента появится деталь, которая отображает связанные записи раздела Книги (Books).

2. Создать модуль представления плитки 

1. Перейдите в раздел Конфигурация (Configuration) и выберите пользовательский пакет, в который будет добавлена схема. Установить зависимость от пакета Timeline.

2. На панели инструментов реестра раздела нажмите Добавить —> Модуль (Add —> Module).

   

3. Заполните свойства схемы.

   • Код (Code) — "UsrBookTimelineItemView".
   • Заголовок (Title) — "Представление элемента хронологии UsrBook" ("UsrBook Timeline Item View").
   

4. Добавьте логику отображения плитки. Для этого реализуйте методы:

   • getUsrISBNViewConfig — возвращает конфигурацию дополнительного поля UsrISBN плитки.
   • getUsrPriceViewConfig — возвращает конфигурацию дополнительного поля UsrPrice плитки.
   • getBodyViewConfig — переопределенный метод, который возвращает общую конфигурацию плитки.

   Исходный код схемы модуля представления плитки представлен ниже.

   UsrBookTimelineItemView

   /* Определение модуля и его зависимостей.*/
   define("UsrBookTimelineItemView", ["UsrBookTimelineItemViewResources", "BaseTimelineItemView"], function() {
       /* Определение класса представления плитки.*/
       Ext.define("Terrasoft.configuration.UsrBookTimelineItemView", {
           extend: "Terrasoft.BaseTimelineItemView",
           alternateClassName: "Terrasoft.UsrBookTimelineItemView",
           /* Метод, возвращающий конфигурацию дополнительного поля [UsrISBN] плитки.*/ 
           getUsrISBNViewConfig: function() {
               return {
                   /* Название поля.*/
                   "name": "UsrISBN",
                   /* Тип поля — метка.*/
                   "itemType": Terrasoft.ViewItemType.LABEL,
                   /* Заголовок.*/
                   "caption": {
                       "bindTo": "UsrISBN"
                   },
                   /* Видимость.*/
                   "visible": {
                       /* Привязка к колонке связанной с плиткой сущности.*/
                       "bindTo": "UsrISBN",
                       /* Настройка видимости.*/
                       "bindConfig": {
                           /* Поле видимо, если значение в колонке не пустое.*/
                           "converter": "checkIsNotEmpty"
                       }
                   },
                   /* CSS-стили поля.*/
                   "classes": {
                       "labelClass": ["timeline-text-light"]
                   }
               };
           },
           /* Метод, возвращающий конфигурацию дополнительного поля [UsrPrice] плитки.*/
           getUsrPriceViewConfig: function() {
               return {
                   "name": "UsrPrice",
                   "itemType": Terrasoft.ViewItemType.LABEL,
                   "caption": {
                       "bindTo": "UsrPrice"
                   },
                   "visible": {
                       "bindTo": "UsrPrice",
                       "bindConfig": {
                           "converter": "checkIsNotEmpty"
                       }
                   },
                   "classes": {
                       "labelClass": ["timeline-item-subject-label"]
                   }
               };
           },
           /* Переопределенный метод, возвращающий общую конфигурацию плитки.*/
           getBodyViewConfig: function() {
               /* Получение стандартных настроек.*/
               var bodyConfig = this.callParent(arguments);
               /* Добавление конфигураций дополнительных полей.*/
               bodyConfig.items.unshift(this.getUsrISBNViewConfig());
               bodyConfig.items.unshift(this.getUsrPriceViewConfig());
               return bodyConfig;
           }
       });
   });
   

   Здесь определяется конфигурация дополнительно отображаемых на плитке полей UsrISBN и UsrPrice. Стандартная конфигурация определена в модуле BaseTimelineItemView.

5. На панели инструментов дизайнера нажмите Сохранить (Save).

3. Создать модуль модели представления плитки 

1. Перейдите в раздел Конфигурация (Configuration) и выберите пользовательский пакет, в который будет добавлена схема. Установить зависимость от пакета Timeline.

2. На панели инструментов реестра раздела нажмите Добавить —> Модуль (Add —> Module).

   

3. Заполните свойства схемы.

   • Код (Code) — "UsrBookTimelineItemViewModel".
   • Заголовок (Title) — "Модель представления элемента хронологии UsrBook" ("UsrBook timeline item view model").
   
4. В объявлении класса модуля в качестве зависимостей добавьте модули UsrBookTimelineItemViewModelResources и BaseTimelineItemViewModel.

   Исходный код модуля модели представления плитки представлен ниже.

   UsrBookTimelineItemViewModel

   define("UsrBookTimelineItemViewModel", ["UsrBookTimelineItemViewModelResources", "BaseTimelineItemViewModel"],
       function() {
           Ext.define("Terrasoft.configuration.UsrBookTimelineItemViewModel", {
               alternateClassName: "Terrasoft.UsrBookTimelineItemViewModel",
               extend: "Terrasoft.BaseTimelineItemViewModel"
           });
       });
   

   Здесь определяется класс Terrasoft.configuration.UsrBookTimelineItemViewModel. Поскольку этот класс определен, как наследник  Terrasoft.BaseTimelineItemViewModel, то это позволяет использовать функциональность  базового класса.

5. На панели инструментов дизайнера нажмите Сохранить (Save).

4. Настроить отображение плитки  

Настройка свойств плиток хронологии выполняется в таблице [TimelineTileSetting] базы данных.

Чтобы настроить отображение плитки:

1. Создайте новую запись в таблице [TimelineTileSetting]. Для этого выполните SQL-запрос. 

   SQL-запрос

   INSERT INTO TimelineTileSetting (CreatedOn, CreatedById, ModifiedOn, ModifiedById, Name, Data, Image)
     VALUES (GETUTCDATE(), NULL, GETUTCDATE(), NULL, 'UsrBooks', NULL, NULL);
   

2. Добавьте значение в колонки  [Data] и [Image].

   Поскольку данные в колонках [Data] и [Image] хранятся в формате varbinary(max), то редактировать их удобнее всего с помощью специализированных редакторов, например, dbForge Studio Express for SQL Server.

   Чтобы добавить значение в колонки  [Data] и [Image] с помощью dbForge Studio Express for SQL Server:

   1. Выберите необходимую таблицу (1).
   2. Выберите необходимую колонку записи и кликните по кнопке редактирования (2).
   3. В редакторе данных перейдите в режим текстового отображения данных(3).
   4. Добавьте необходимые данные (4).
   5. В редакторе данных нажмите на кнопку применения изменений (5).
   6. Нажмите на кнопку обновления данных (6).
   7. В появившемся диалоговом окне согласитесь с применением изменений (7).
   

   Важно. Это способ подходит только для сред разработки, которые развернуты on-site. Изменения вносятся непосредственно в базу данных, они не привязаны ни к одному пакету. При установке пакета со схемами представления и модели представления плитки в другое приложение изменения в базу данных внесены не будут. Для корректного переноса разработанной функциональности следует привязать SQL-скрипты, которые вносят соответствующие изменения в базу данных при установке пакета.

   Добавьте в колонку Data конфигурационный объект.

   Данные колонки[Data]

   {
       "entitySchemaName": "UsrBook",
       "viewModelClassName": "Terrasoft.UsrBookTimelineItemViewModel",
       "viewClassName": "Terrasoft.UsrBookTimelineItemView",
       "orderColumnName": "CreatedOn",
       "authorColumnName": "UsrAuthor",
       "captionColumnName": "UsrName",
       "messageColumnName": "UsrDEscription",
       "columns": [
           {
               "columnName": "UsrISBN",
               "columnAlias": "UsrISBN"
           },
           {
               "columnName": "UsrPrice",
               "columnAlias": "UsrPrice"
           }
       ]
   }
   

   Здесь, кроме основных полей, унаследованных от базовой плитки, указывается также массив дополнительных полей, отображение которых сконфигурировано в модуле представления UsrBookTimelineItemView .

   Для отображения иконки, соответствующей иконке раздела, добавьте в колонку Image данные в SVG-формате.

   Данные колонки [Image]

   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" enable-background="new 0 0 52 52">
   <path d="M46.072,31.384c-0.011-0.026-0.025-0.048-0.039-0.073c-0.036-0.064-0.077-0.125-0.123-0.182
       c-0.018-0.022-0.034-0.044-0.053-0.064c-0.034-0.036-0.068-0.07-0.105-0.104c-0.062-0.055-0.431-0.3-0.819-0.559
       c-1.958-1.307-7.465-4.978-9.424-6.284c-0.388-0.258-0.703-0.845-0.703-1.312V3.938c0-0.401-0.19-0.777-0.512-1.017
       c-0.322-0.239-0.739-0.311-1.122-0.193L15.015,8.254c-0.446,0.136-1.154,0.097-1.583-0.086l-1.094-0.467
       c-0.428-0.184-0.414-0.442,0.031-0.578l15.213-4.646c0.668-0.204,1.045-0.911,0.841-1.58s-0.912-1.047-1.58-0.841L7.507,5.961
       C7.454,5.982,7.429,5.994,7.403,6.005C7.338,6.031,7.276,6.062,7.217,6.097C7.205,6.104,7.191,6.108,7.178,6.116
       c-0.015,0.01-0.026,0.025-0.041,0.035C7.081,6.191,7.03,6.236,6.982,6.284c-0.02,0.021-0.041,0.039-0.06,0.062
       C6.864,6.412,6.813,6.485,6.77,6.562C6.716,6.659,6.683,6.748,6.658,6.838C6.651,6.864,6.648,6.89,6.642,6.916
       C6.628,6.985,6.619,7.054,6.616,7.125C6.615,7.142,6.61,7.156,6.61,7.173V29.85c0,0.466-0.036,0.86-0.081,0.88l-0.081,0.036
       c-0.109,0.058-0.18,0.101-0.246,0.15c-0.025,0.018-0.046,0.037-0.069,0.058c-0.056,0.049-0.107,0.103-0.154,0.161
       c-0.015,0.019-0.032,0.035-0.046,0.056c-0.057,0.079-0.105,0.164-0.142,0.257c-0.006,0.015-0.008,0.03-0.014,0.045
       c-0.029,0.077-0.049,0.158-0.062,0.241c-0.002,0.015-0.009,0.027-0.01,0.042c-0.002,0.018,0.002,0.036,0.001,0.054
       c-0.003,0.031-0.009,0.062-0.009,0.094v7.312c0,0.393,0.182,0.762,0.493,1.002l14.766,11.391c0.226,0.175,0.499,0.264,0.773,0.264
       c0.212,0,0.424-0.053,0.616-0.16l23.203-12.938c0.401-0.224,0.649-0.646,0.649-1.105v-5.766c0-0.09-0.01-0.177-0.027-0.261
       C46.145,31.555,46.113,31.468,46.072,31.384z M15.4,11.625c0-0.466,0.361-0.953,0.807-1.089l15.261-4.645
       c0.446-0.136,0.807,0.132,0.807,0.598v14.63c0,0.467-0.314,0.635-0.702,0.376l-1.127-0.752c-0.361-0.24-0.819-0.278-1.216-0.104
       l-13.059,5.805c-0.426,0.189-0.771-0.034-0.771-0.501C15.4,25.943,15.4,11.625,15.4,11.625z M28.851,23.579
       c0.425-0.189,1.085-0.134,1.473,0.125l11.43,7.62c0.388,0.259,0.368,0.644-0.045,0.86l-18.404,9.662
       c-0.412,0.216-1.047,0.163-1.418-0.121l-11.789-9.001c-0.371-0.283-0.326-0.665,0.1-0.854L28.851,23.579z M9.142,9.932
       c0-0.466,0.348-0.695,0.776-0.512l2.174,0.929c0.429,0.183,0.776,0.708,0.776,1.175v2.158c-1.57-0.068-2.894-0.916-3.727-1.61
       L9.142,9.932L9.142,9.932z M9.142,13.152c0.931,0.671,2.22,1.323,3.727,1.372v7.633c-1.57-0.066-2.894-0.915-3.727-1.609
       C9.142,20.548,9.142,13.152,9.142,13.152z M9.142,21.627c0.931,0.671,2.22,1.323,3.727,1.372v3.992c0,0.466-0.35,0.985-0.782,1.16
       l-2.163,0.876c-0.432,0.175-0.782-0.061-0.782-0.527V21.627z M43.666,36.101c0,0.467-0.33,1.027-0.737,1.255L22.578,48.702
       c-0.407,0.228-1.036,0.18-1.405-0.104L8.897,39.127c-0.369-0.284-0.668-0.893-0.668-1.358v-2.444c0-0.466,0.3-0.614,0.671-0.332
       l12.764,9.748c0.225,0.171,0.496,0.26,0.768,0.26c0.201,0,0.403-0.048,0.588-0.146l19.899-10.447
       c0.413-0.217,0.747-0.015,0.747,0.452V36.101z" style="fill:#6c91de;"/>
   <path d="M33.81,34.064c0.072,0.049,0.155,0.073,0.239,0.073c0.072,0,0.145-0.018,0.209-0.055l4.505-2.575
       c0.126-0.072,0.207-0.204,0.212-0.349c0.006-0.146-0.063-0.283-0.183-0.365l-9.011-6.192c-0.118-0.08-0.268-0.097-0.399-0.042
       l-5.157,2.123c-0.143,0.059-0.243,0.191-0.259,0.346c-0.017,0.154,0.053,0.304,0.181,0.392L33.81,34.064z M29.492,25.426
       l8.269,5.682l-3.692,2.11l-8.803-6.052L29.492,25.426z" style="fill:#6c91de;"/>
   </svg>
   

5. Изменить привязку плитки 

Для раздела Контрагенты (Accounts) в таблице [TimelinePageSetting] уже существует запись с настройкой плиток, связанных с другими разделами. Это запись, которая содержит значение "AccountPageV2" в колонке Key.

Используя приведенную на шаге 4 последовательность, измените массив конфигурационных объектов, добавив в него новую запись.

[
  {
    "entityConfigKey": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
    "referenceColumnName": "UsrPublisher",
    "entitySchemaName": "UsrBook",
    "masterRecordColumnName": "Id"
  },
  ...
]

Значение свойства "entityConfigKey" —  идентификатор (колонка [Id]) записи таблицы [TimelineTileSetting], которая создана на шаге 4.

Результат выполнения примера 

В результате выполнения примера на вкладке Хронология (Timeline) страницы контрагента отображаются  плитки, которые связаны с пользовательским разделом Книги (Books). Эти плитки содержат все поля, приведенные в условиях примера.