Создание табличного списка в Chronoforms8

Для того чтобы вывести данные и иметь постраничную навигацию, нам необходимо предоставить представлению Table список записей вместе с общим количеством записей в нашей таблице. Таким образом, всего нам нужно 3 элемента на нашей странице:

1. Действие Read Data для чтения записей таблицы и их подсчета.
2. Представление Table для отображения записей в виде списка.

Давайте посмотрим, как настроено действие Read Data:

1. Сначала нам нужно выбрать таблицу базы данных, из которой будут читаться записи.
2. Затем нам нужно установить тип чтения (Read Type) в "all matching records with count", чтобы получить список записей и их общее количество.
3. Затем нам нужно убедиться, что наш список записей поддерживает постраничный вывод, сортировку и имеет лимит, например, 10 записей на страницу.
4. Настройка сортировки необязательна, но я настроил сортировку по столбцу title в выбранной таблице:

Затем наше представление Table нужно настроить так, чтобы оно получало список записей и их количество из обоих действий Read Data и отображало список записей, показывая как минимум 1 столбец:

1. В Источнике данных (Data Source) мы введем имя действия Read Data, которое "read_data5". Это укажет таблице читать список записей, количество записей и другие настройки из действия Read Data.
2. Нам нужно добавить как минимум один столбец таблицы, здесь мы выбираем столбец title. Этот столбец всегда имеет значение в выбранной нами таблице базы данных.

Сохраните форму, и теперь у вас должен быть список всех записей в вашей таблице. Если записей больше 10, у вас также будет постраничная навигация для перемещения по списку записей.

Создание ссылки на страницу редактирования в вашей таблице

1- После сохранения формы в представлении таблицы появится новая область с именем "title". Мы добавим там представление Text Node, чтобы создать ссылку на другую страницу для редактирования записи:

2- Для каждой строки существует переменная с именем "row", которая содержит массив всех имен и значений столбцов. Таким образом, чтобы получить значение столбца "title", мы можем использовать {var:row.title}.

3- Нам нужно, чтобы текстовый узел ссылался на другую страницу, поэтому мы включим поведение "Link URL" и установим Базовый URL ссылки (Base Link URL) в {url:}, чтобы получить URL текущей страницы.

4- В Параметрах URL (URL Parameters) нам нужно задать имя страницы ссылки, используя "chronopage=edit", и идентификатор строки, используя "id={var:row.id}". Теперь ссылка должна выглядеть так: текущий-url-страницы&chronopage=edit&id=id-строки.

Наш столбец title теперь должен отображать значение заголовка в виде ссылки:

Теперь мы можем добавить новую страницу в нашу форму, используя кнопку "New Page" в нижней части конструктора:

В области Опций (Options) нашей новой страницы:

1- нам нужно установить псевдоним страницы (page alias) в "edit", чтобы он соответствовал созданной нами ссылке.

2- нам также нужно дать нашей новой странице другое имя Группы страниц (Page Group), чтобы к ней можно было обращаться по прямым ссылкам:

Затем в области "Load" нашей новой страницы редактирования нам понадобится действие Read Data для чтения записи по переданному значению id:

1- Мы выбираем ту же таблицу, что и раньше.

2- Мы настраиваем Read Data на чтение одной записи.

3- Мы включаем поведение "Where statement".

4- Мы устанавливаем условие Where так, чтобы получить строку, у которой столбец "id" соответствует значению параметра данных с именем "id".

Наше новое действие Read Data называется "read_data18". Если нам нужно протестировать загруженные значения, мы можем добавить представление HTML и попытаться отобразить значение столбца "title":

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

1- Мы должны включить поведение "Data Merge", чтобы загрузить поля данными записи.

2- мы добавляем наше поле, 3- называем его "title", чтобы оно соответствовало имени столбца таблицы.

4- Мы добавляем кнопку для отправки страницы "edit".

Нажатие на ссылку в нашей таблице теперь должно отображать форму редактирования:

Сохранение изменений в записи

Чтобы сохранить изменения, внесенные на странице редактирования, нам нужно добавить действие Save Data в область "submit" страницы редактирования:

1- Переключитесь в область "submit" страницы редактирования.

2- Добавьте действие Save Data.

3- Установите имя таблицы той же таблицы, которая используется в вашем приложении.

Затем нам нужно настроить Save Data на обновление открытой записи с помощью условия Where:

1- Включите поведение Where Statement.

2- Включите поведение "Modify Data Source".

3- установите значение Where в id={data:id}, что означает, что мы будем обновлять записи, где столбец id соответствует значению параметра id в URL.

4- В Modify Data Source установите Данные следующим образом:

Мы устанавливаем наш источник данных как массив, где столбец title равен значению поля "title" в нашей форме редактирования.

Наконец, нам нужно перенаправить обратно на страницу со списком после сохранения:

1- Добавьте действие Redirect под действием Save Data.

2- установите базовый URL в {url:}, чтобы получить текущий URL.

3- Включите поведение "Redirect Parameters" и

4- Установите параметр chronopage в "page1", который является псевдонимом по умолчанию для первой страницы формы, где находится наша таблица.

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