Списки

В разделе Списки Вы можете создавать и управлять коллекциями однотипных данных, таких как, например, "Пользователи" или "Товары". Для работы со Списками, знания языков Баз Данных не требуются.

Советуем пройти краткий курс обучения по данному разделу.

Создание списка

При создании нового списка определяется модель данных, населяющих его в будущем.

Создание списка

Поле "Название" несёт косметическую функцию и просто определят описание предназначения списка.

Поле "Ключ" обязательно к указанию и определяет адрес для программного обращения к списку.

Поля элементов списка

Модель данных нового списка содержит несколько стандартных полей:

Каждый элемент любого списка всегда будет снабжён такими полями. Однако, эти поля носят, в основном, утилитарную функцию и для нужд Вашего проекта следует определить дополнительные поля, либо при  Создании, либо позднее при Настройке списка.

Поля элементов списка

У каждого дополнительного поля есть несколько параметров:

Внимание при удалении поля, безвозвратно удаляются и все значения данного поля по всему списку! Пожалуйста не забывайте делать резервное копирование всей коллекции, перед удалением полей.

Добавление данных

Перейдя по ссылке Ключа или Названия списка, Вы оказываетесь в самом списке, где можно

Выбрав  Добавление или  Редактирования элемента, Вы оказываетесь в режиме его правки:

Добавление данных

Следует отметить, что:

Импорт данных

На странице  Импорта можно массово мигрировать данные или производить добавление сразу нескольких элементов списка в рамках одной операции. Если Вы желаете перенести Вашу базу данных в Tabula — обратите внимание на формат и структуру данных примера.

Импорт данных

Стоит иметь в виду, что значения полей name и key будут записаны в корне тела элемента, в то время, как остальные значения полей будут помещены в подобъект fields, а поля name и status будут доступны в обоих контекстах. Так, имея JSON импорта вида

[
    {
        "name": "Портсигар",
        "key": "pagefmsq6bafq0",
        "title": "отечественный",
        "count": 2,
        "available": true,
        "img": "uploads/feed/items/4577/2020/12/20/portsigar.png"
    },
    {
        "name": "Куртка",
        "key": "page8nu8y9upd5",
        "title": "замшевая",
        "count": 3,
        "available": true,
        "img": "uploads/feed/items/4578/2020/12/20/jacket.png"
    }
]

результатом импорта станет список элементов с конструкцией:

[
    {
      "fields": {
        "status": "ok",
        "name": "Портсигар",
        "title": "отечественный",
        "count": 2,
        "available": true,
        "img": "uploads/feed/items/4577/2020/12/20/portsigar.png"
      },
      "id": 4577,
      "key": "pagefmsq6bafq0",
      "tags": [],
      "status": "ok",
      "name": "Портсигар",
      "created_at": "2020-12-20T15:55:37Z",
      "updated_at": "2020-12-20T16:06:58Z"
    },
    {
      "fields": {
        "status": "ok",
        "name": "Куртка",
        "title": "замшевая",
        "count": 3,
        "available": true,
        "img": "uploads/feed/items/4578/2020/12/20/jacket.png"
      },
      "id": 4578,
      "key": "page8nu8y9upd5",
      "tags": [],
      "status": "ok",
      "name": "Куртка",
      "created_at": "2020-12-20T15:55:37Z",
      "updated_at": "2020-12-20T16:06:58Z"
    }
]

Примите во внимание, что:

Использование

В основном списки нужны для двух целей: вывода полного перечня данных списка и отображения конкретного элемента списка. Для выполнения этих задач, на каждой странице доступен ряд настроек и переменных.

Вывод полного списка

Что бы иметь возможность вывода списка на странице нужно сперва настроить Динамический Элемент вывода. Для этого на странице редактирования, под Содержанием, добавьте новый элемент, с именем переменной, через которую Вы сможете выводить данные в содержание:

После регистрации элемента он сразу же становится доступным в содержании, но Вы можете, дополнительно, настроить его свойства вывода данных:

Настроив таким образом вывод списка, по его подобъекту .items теперь возможна итерация в содержании страницы:

<ul>
{{#each items_list.items}}
    <li id="{{key}}">
        <img src="{{../cdn}}/{{fields.img}}">
        <label>{{name}}&nbsp;&times;{{fields.count}}</label>
        {{#if title}}<span>({{title}})</span>{{/if}}
    </li>
{{/each}}
</ul>
<style>
    ul {white-space: pre; list-style: none; display: inline-flex;}
    ul img {max-width: 100px;}
</style>

Результат:

<ul>
    <li id="pagefmsq6bafq0">
        <img src="https://t29.tcdn.site/uploads/feed/items/4577/2020/12/20/portsigar.png">
        <label>Портсигар&nbsp;×2</label>
        <span>(отечественный)</span>
    </li>
    <li id="page8nu8y9upd5">
        <img src="https://t29.tcdn.site/uploads/feed/items/4578/2020/12/20/jacket.png">
        <label>Куртка&nbsp;×3</label>
        <span>(замшевая)</span>
    </li>
</ul>
<style>
    ul {white-space: pre; list-style: none; display: inline-flex;}
    ul img {max-width: 100px;}
</style>

Постраничный вывод

Имея обширную базу данных, её полный вывод на одной странице целиком, как правило, не является целесообразным. И логистически, и с точки зрения удобства для пользователя. Хорошей практикой в таком случае считается постраничный вывод. Платформа Tabula предлагает для этих целей ряд инструментов.

Для начала стоит решить, чем будет передаваться выбор номера страницы при запросе. Это может быть URL, POST- или GET-запрос. Ради простоты и наглядности в этом примере мы воспользуемся URL. Для этого должен быть включен Экспертный режим обработки URL страницы и определена {page_num} переменная:

Далее, должен быть настроен Динамический элемент с соответствующими опциями пагинации. Важно выставить правильный Список, Номер страницы как {{page_num}} и Количество ссылок пагинации больше чем 0!

После чего переменная с именем Вашего Динамического элемента (items_list в данном примере) будет дополнена подобъектом pagination со следующей структурой:

{
    "count": 2, // общее количество страниц
    "pages": [ // объекты с данными для генерации ссылок пагинации
      {
        "num": 1, // номер страницы
        "url": "item_list_p1", // URL страницы
        "active": true // является ли эта страница текущей
      },
      {
        "url": "item_list_p2",
        "num": 2
      }
    ],
    "page": 1, // номер текущей страницы
    "per_page": 2, // количество элементов списка на одной странице
    "next": {  // объект с данными для генерации следующей ссылки после текущей 
      "url": "item_list_p2",
      "num": 2
    }
}

Этот объект может быть использован для генерации виджета пагинации произвольного вида. В примере ниже это ul#pagination:

<ul>
{{#each items_list.items}}
    <li id="{{key}}">
        <img src="{{../cdn}}/{{fields.img}}">
        <label>{{name}}&nbsp;&times;{{fields.count}}</label>
        {{#if title}}<span>({{title}})</span>{{/if}}
    </li>
{{/each}}
</ul><br>
<ul id="pagination">
    <li>Страница&nbsp;{{items_list.pagination.page}}/{{items_list.pagination.count}}</li>
    {{#each items_list.pagination.pages}}
    <li id=""><a {{#if active}}{{else}}href="/{{url}}"{{/if}}>{{num}}</a></li>
    {{/each}}
</ul>
<style>
    ul {white-space: pre; list-style: none; display: inline-flex;margin:0;}
    li {padding: 0 .3em;}
    ul img {max-width: 100px;}
</style>

Результат:

Вывод элемента списка

Вывести один конкретный элемент списка, как правило для презентации в подробном виде, можно следующим образом:

Как и в предыдущем разделе Вам понадобится Экспертный режим обработки URL страницы, но определена должна быть переменная {feed_key}.

Настройка URL для вывода единичного элемента

При соответствии {feed_key} элементу выбранного списка по ключу key — в Содержании страницы станет доступна переменная feed_item со всеми стандартными и дополнительными полями, а также следующими виртуальными:

Теперь, вокруг этих данных и при помощи шаблонизатора можно выстроить HTML:

<h3>Товар: {{feed_item.name}}</h3>
<img src="{{cdn}}/{{feed_item.fields.img}}">
<ul>
    <li><label>Описание</label>: {{feed_item.fields.title}}</li>
    <li><label>Доступен</label>: {{#if feed_item.fields.available}}да{{else}}нет{{/if}}</li>
    <li><label>Количество</label>: {{feed_item.fields.count}}</li>
</ul>
<style>
    ul {float: left; list-style: none;}
    li {padding: 0 .3em;}
    img {float: left; max-width: 300px;}
</style>

Результат:

Вывод единичного элемента