Перейти к основному содержимому

Действия с базой данных Supabase

Действия с базой данных Supabase позволяют вставить, обновить или удалить строку из таблицы Supabase.

Требования

Перед началом работы с этим разделом убедитесь, что вы:

  1. Выполнили все шаги в настройке Supabase.
  2. Создали таблицу для добавления, обновления и удаления данных.

Типы действий с базой данных Supabase

Ниже приведены типы действий, которые можно выполнять с таблицей Supabase.

Вставить строку [Action]

  1. Выберите виджет (например, кнопку), к которому хотите добавить действие.

  2. Выберите Actions в панели свойств (правое меню) и нажмите Open. Это откроет редактор потока действий в новом всплывающем окне.

    1. Нажмите на + Add Action.

    2. Справа найдите и выберите Supabase > Insert Row.

    3. Установите Table на имя вашей таблицы (например, assignments).

    4. В разделе Set Fields нажмите + Add Field.

    5. Нажмите на имя поля.

      1. Прокрутите вниз, чтобы найти выпадающее меню Value Source и измените его на From Variable.
      2. Нажмите на UNSET и выберите Widget State > Name из TextField.
    6. Аналогично добавьте поле для других элементов интерфейса.

Совет

При добавлении этого действия можно оставить поля id (если оно указано как Primary) и created_at (если значение по умолчанию now()). Supabase автоматически добавит значения для этих полей.

Обновить строку [Action]

  1. Выберите виджет (например, кнопку), к которому хотите добавить действие.

  2. Выберите Actions в панели свойств (правое меню) и нажмите Open. Это откроет редактор потока действий в новом всплывающем окне.

    1. Нажмите на + Add Action.

    2. Справа найдите и выберите Supabase > Update Row.

    3. Установите Table на имя вашей таблицы (например, assignments).

    4. Опционально: Если вы хотите получить строки после завершения обновления, включите опцию Return Matching Rows.

    5. Теперь нужно установить строку, которую вы хотите обновить. Обычно это делается путем поиска строки в таблице, соответствующей текущему ID строки. Для этого нажмите + Add Filter в разделе Matching Rows.

      1. Установите Field Name на поле, содержащее идентификаторы, как правило, это столбец id.
      2. Установите Relation в Equal To, чтобы найти строку с точным ID.
      3. В Value Source выберите From Variable и укажите ID строки, для которой вы только что обновили значения в интерфейсе.
    6. В разделе Set Fields нажмите + Add Field.

    7. Нажмите на имя поля.

      1. Прокрутите вниз, чтобы найти выпадающее меню Value Source и измените его на From Variable.
      2. Нажмите на UNSET и выберите Widget State > Name из TextField.
    8. Аналогично добавьте поле для других элементов интерфейса.

Как это сделать и советы

Если у вас есть поток, такой как HomePage -> AssignmentDetailsPage -> UpdateAssignmentPage, вы можете включить опцию Replace Route (см. пункт 5 здесь) при переходе с AssignmentDetailsPage на UpdateAssignmentPage. Затем свяжите действие Navigate Back после действия обновления. Это откроет HomePage сразу после обновления строки.

Удалить строку [Action]

Перейдите на страницу вашего проекта в FlutterFlow и выполните следующие шаги, чтобы определить действие для любого виджета.

  1. Выберите виджет (например, кнопку), к которому хотите добавить действие.

  2. Выберите Actions в панели свойств (правое меню) и нажмите Open. Это откроет редактор потока действий в новом всплывающем окне.

    1. Нажмите на + Add Action.

    2. Справа найдите и выберите Supabase > Delete Row.

    3. Установите Table на имя вашей таблицы (например, assignments).

    4. Опционально: Если вы хотите узнать, какие строки были удалены из таблицы, включите опцию Return Matching Rows.

    5. Теперь нужно установить строку, которую вы хотите удалить. Обычно это делается путем поиска строки в таблице, соответствующей текущему ID строки. Для этого нажмите + Add Filter в разделе Matching Rows.

      1. Установите Field Name на поле, содержащее идентификаторы, как правило, это столбец id.
      2. Установите Relation в Equal To, чтобы найти строку с точным ID.
      3. В Value Source выберите From Variable и укажите ID строки, которую хотите удалить.

подсказка

Вы можете добавить действие Refresh Database Request после этого действия, чтобы удалить удаленные элементы из списка.

Запрос строк [Action]

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

Кроме того, если ваше приложение извлекает разные данные при разных условиях, вы можете счесть более удобным вызывать запросы вручную. Например, вы можете получить разные задачи для администратора и участников команды.

Чтобы вручную запросить таблицу Supabase, выполните следующие шаги для добавления действия к любому виджету:

  1. Выберите виджет (например, кнопку), к которому хотите добавить действие.

  2. Выберите Actions в панели свойств (правое меню) и нажмите Open. Это откроет редактор потока действий в новом всплывающем окне.

  3. Нажмите на + Add Action.

  4. Справа найдите и выберите Supabase > Query Rows.

  5. Выберите Table, к которой хотите применить запрос.

  6. Вы также можете отфильтровать и упорядочить результаты запроса.

  7. Укажите Action Output Variable Name. Это будет использоваться для хранения результата запроса.

  1. Теперь вы можете использовать Action Output Variable Name, предоставленное на предыдущем шаге, для создания дочерних элементов из переменной на ListView.
  2. Наконец, вы можете отображать данные в Text виджете. Для этого выберите Text widget > Properties Panel > Text > Set from Variable menu > [children_from_variable_name] item > Get Row Field > выберите поле строки, которое хотите отобразить.

Фильтрация данных таблицы

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

Давайте посмотрим, как отфильтровать таблицу Supabase для отображения только нужных элементов:

  • В свойствах действия Query Rows, прокрутите вниз и нажмите + Add Filter внизу.

  • Найдите Field Name, нажмите на Unset и выберите столбец, к которому хотите применить фильтр.

  • Найдите выпадающее меню Relation, нажмите на Unset и выберите отношение из списка.

  • Найдите свойство Value и установите его на подходящее значение, затем нажмите Confirm.

подсказка

Вы можете выбрать отношение фильтра в зависимости от ваших требований. Например, чтобы отображать только завершенные задания, установите Field Name на столбец, содержащий статус завершения, например, is_done, установите Relation в Equal To и установите Value в True. Вот ещё один пример. Для отображения только пользователей старше 30 лет создайте столбец Age, установите Relation в Greater Than и установите Value на 30.

Упорядочивание данных таблицы

Возможно, вы захотите показать список из таблицы Supabase в определенном порядке. Например, отображение заданий в порядке их срока выполнения.

Для указания порядка:

  • В свойствах действия Query Rows прокрутите вниз и нажмите + Add Order внизу.
  • Установите Table Field Name на столбец, который хотите выбрать для упорядочивания.
  • Найдите выпадающее меню Order, нажмите на Unset и выберите порядок либо Increasing, либо Decreasing, и нажмите Confirm.
подсказка

Вы можете выбрать порядок в зависимости от ваших требований. Например, чтобы показывать задания в порядке срока выполнения, установите Table Field Name на due_date и Order на Increasing.

к сведению

Дополнительная информация: На данный момент вы можете добавить только условия "и" к фильтрам запросов Supabase. Если вы хотите добавить фильтр "или", например, "status == 5 или status == 8", вы можете рассмотреть возможность логики для применения "status in (5,8)" или другой логики. Полностью настраиваемо с использованием API-запросов или пользовательских действий.