Как работать с компонентом List при создании мобильного приложения в AppMaster

Создавая приложение SubSchool на платформе AppMaster, я иногда сталкиваюсь с тем, что с частью компонентов и функций мне не удаётся разобраться без помощи команды AppMaster. Чтобы зафиксировать полученные знания и принести пользу, я решил делать туториалы на такие случаи. В этой первой статье мы разберемся с тем, как работать с компонентом List.

https://youtu.be/orJugdKZIAY - на случай, если вам удобнее смотреть.

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

Начинается все просто и красиво: в редакторе интерфейса нам нужно добавить сам компонент List, а затем мы можем добавить в него готовую карточку или собрать ее самим. Компонент List item - это контейнер, который мы можем настроить и наполнить всем, чем считаем нужным. Например, в моем случае карточка горизонтальная, но имеет вертикальный контейнер с названием и описанием курса.

После создания карточки можно перейти к её заполнению через бизнес-процесс, который мы создаем именно на компоненте List:

Внутри бизнес-процесса нам нужно начать заполнение с триггера onCreate и от него тянуть все нужные нам функции. Начнем с того, что добавим на List анимацию загрузки, чтобы пользователь не принял информацию по умолчанию за настоящую и не начал жаловаться на баг раньше, чем произойдет загрузка. Для этого добавляем List Update Properties, и в самом низу, в параметре Loading, ставим значение по умолчанию - True:

Теперь нам нужны данные, которыми мы будем заполнять карточки. Для этого вызываем эндпоинт, соответствующий тому, что вы собственно выводите в карточки (в моем случае это список курсов), и отправляете данные в цикл For each loop:

Внутри цикла я разделяю модель курса на отдельные переменные, и здесь наступает самый интересный момент. Мы не можем просто заполнить данные через Update Properties, так как технически List состоит из N контейнеров, в каждом из которых по N элементов, имеющих свой уникальный Element ID. Поэтому просто выбрать Element ID и установить его по умолчанию, как мы привыкли, уже нельзя. Вместо этого нужно сделать следующее:

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

Начать пользоваться AppMaster можно по этой ссылке.