Гибкий лэйаут для динамических форм с react-jsonschema-form

Если ваша форма разрастается и превращается в бесконечный список полей, стандартного функционала react-jsonschema-form может быть недостаточно. Я покажу, как легко расширить возможности библиотеки и организовать поля в удобный многоколоночный макет.

https://habr.com/ru/articles/884862/

#reactjsonschemaform #формы #antd #фронтенд

Магический метод работы с формами

Видеоаналитика в СИБУРе — это сложный и многогранный продукт, который внедряется на разных производствах. Несмотря на то, что это один продукт, его конфигурация может сильно отличаться: используются различные камеры, детекторы и параметры, а также интеграции с разнообразными сторонними системами. В таких условиях инженеру не всегда понятно, что именно надо дописать, а валидация происходит только после окончания редактирования файла и перезапуска сервиса. Логичное решение — предоставить инженерам удобный интерфейс, где они смогут заполнять форму и сразу видеть ошибки. Меня зовут Владимир Кирилкин, я техлид в Цифровом СИБУРе, в команде Индустрии 4.0. Мы разрабатываем продукт «Видеоаналитика на производстве», и о наших задачах уже писали на Хабре ( habr.com/ru/companies/sibur_official/articles/700634/ ). Мы подошли к задаче нестандартно: вместо заранее заданных форм на фронте реализовали их автоматическую генерацию с использованием JSON-схем и немного ✨магии✨. Наши сервисы построены на Python и React, но предложенный подход можно адаптировать и для других технологий — правда, с чуть меньшим количеством ✨магии✨.

https://habr.com/ru/companies/sibur_official/articles/875372/

#формы #jsonschema #pydantic #python #react #backend_driven_ui #сибур_цифровой #heavy_digital #промышленность #промышленное_программирование

Проблема неактивной кнопки отправки формы

Недавно попалась мне на глаза рекомендация от коллег из Яндекса. Они делали аудит рекламы одного из моих клиентов и заодно дали советы по сайту. Меня как ux-дизайнера удивили несколько из этих советов, сегодня расскажу об одном: «Рекомендуем сделать кнопку отправки формы не активной до тех пор, пока пользователь не заполнит все обязательные поля». Сразу хочется спросить: «Зачем?» Давайте попробуем сравнить два сценария.

https://habr.com/ru/articles/856570/

#формы #кнопки

Работа с массивами в формах(динамическое добавление полей) с использованием библиотеки react-hook-form

Привет друзья! В данной статье я хочу показать вам, как разработать форму с динамическими добавлениями полей на React.js с использованием библиотеки react-hook-form и валидацией полей с использованием библиотеки yup на конкретном примере. Формы являются неотъемлемой частью веб-разработки, и эффективная обработка пользовательского ввода является ключевым аспектом создания интерактивных приложений. Библиотека React Hook Form предоставляет разработчикам мощный инструментарий для упрощения работы с формами в React-приложениях.

https://habr.com/ru/articles/838214/

#reacthookform #формы #фронтенд

Валидация форм во Flutter как PRO. Мастер-класс по использованию form_model и BLoC

Привет, коллеги! Хочу поделиться своим опытом работы с формами во Flutter. Каждый из нас сталкивался с задачей создания сложных форм и хочу рассказать о подходе с использованием нового пакета form_model .

https://habr.com/ru/articles/837444/

#flutter #формы #валидация

Переменные и условия: как быстро сделать в Фигме нелинейный прототип

Например, прототип формы, поля которой можно заполнять непоследовательно. Иногда сценарии и механики перехода между экранами (или состояниями одного экрана) получаются такими сложными, что для подготовки прототипа и тестирования на респондентах приходится переносить макеты из Фигмы в специальные инструменты вроде ProtoPie или Axure. Летом 2023 года в Фигме появились условия и переменные, благодаря которым можно показывать всё более сложные взаимодействия. А также меньшими усилиями добиваться того, что раньше требовало усилий значимых, например, давать респондентам возможность заполнить поля формы в произвольном порядке. Не все дизайнеры, с которыми я общался, знают о подобных способах применения связки переменных с условиями . Поэтому я и решил об этом рассказать на примере кейса с непоследовательным заполнением полей формы.

https://habr.com/ru/companies/alfa/articles/795357/

#figma #формы #переменные #условия #фигма