Панель детализации списка (Master–Detail)

Конфигурация паттерна «Разделённый экран (Split Screen)».

Назначение

Экран, где слева располагается список однотипных объектов, а справа — полное содержимое того объекта, который выбран в списке. При выборе другого элемента слева содержимое справа полностью заменяется. Левая часть служит навигацией и выбором, правая — просмотром или редактированием выбранного объекта. Типичный пример — список сотрудников слева, карточка выбранного сотрудника справа.

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

Типовые сценарии применения: Клиенты → карточка клиента; заказы → детали заказа; сотрудники → данные сотрудника; организации → отделы; проекты → задачи проекта.

Конфигурация подчиняется общим правилам разделённого экрана: разделитель, поведение сторон, упрощённая шапка. Ниже описаны только частные правила Master–Detail.

Критерии использования

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

Шаг 1. Обязательные условия

Конфигурация применяется, только если выполняются все условия.

• Слева — набор экземпляров БО для выбора. Список сущностей одного класса: клиенты, заказы, сотрудники, документы и т.п., а не разные блоки с индивидуальным наполнением.
• Справа — полный самостоятельный объект. Правая часть показывает выбранный объект целиком, а не пояснение к нему.
• Правая часть осмысленна без левой. Если убрать список слева, содержимое справа остаётся самодостаточным — этот объект можно было бы открыть отдельной страницей без потери смысла.
• Объектов много, и пользователь перебирает их последовательно. Углубление в выбранный объект — основной сценарий работы, а не редкое действие.
• Работа потоковая: пользователь обрабатывает объекты один за другим в рамках одной сессии.

Если условия не выполняются, применяется таблица, дровер или отдельная страница.

Шаг 2. Усиливающие признаки

Достаточно выполнения одного признака, чтобы Master–Detail стал основным представлением раздела.

• Пользователю важно сравнивать соседние объекты, переключаясь между ними без потери позиции в списке.
• Объект распознаётся по двум–четырём ключевым атрибутам — коллекция умещается в узкую колонку.
• Коллекция обозримая: десятки или сотни объектов, а не тысячи без фильтрации.
• С выбранным объектом выполняются простые действия — согласовать, сменить статус, ответить, поправить несколько полей.

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

Шаг 3. Стоп-факторы

Любой из перечисленных факторов перевешивает результаты шагов 1 и 2.

• Детализация объекта отображается в виде таблицы — применяется связанная таблица.
• Детализация нужна редко — применяется дровер.
• Главная задача экрана — углублённый просмотр и редактирование одного объекта с большим количеством действий, выполняемых не потоково, — применяется отдельная страница.

Признак выбора: детализация объекта табличная — связанная таблица; детали разнородные (карточка, форма, набор атрибутов, предпросмотр, чат) — Список со связанной оберткой.

Стандарты проектирования

Обязательные правила

• В шапке размещается минимально необходимый набор фильтров.
• Экземпляр бизнес-объекта в коллекции отображает только атрибуты, нужные для распознавания; полный набор сведений выводится в деталь справа.
• Строка или карточка целиком является областью выбора.
• В правой стороне отображаются детали только одного экземпляра объекта; выбор нового объекта меняет содержимое правой стороны.
• Действия над коллекцией целиком размещаются слева, действия над выбранным объектом — справа.
• Левая сторона не содержит вкладок разделов объекта — всё наполнение находится в правой стороне.
• Правая сторона не имеет возможности закрытия, она всегда открыта.
• Заголовок детали соответствует наименованию экземпляра бизнес-объекта в коллекции.
• Если детализация в виде таблицы, используется связанная таблица.
• Пока объект не выбран, правая сторона отображает пустое состояние с указанием выбрать объект из списка.
• Общие правила разделённого экрана — разделитель 50/50, минимальная ширина стороны 400 пикселей, независимый скролл сторон — действуют без изменений.

Настраиваемые параметры

Параметры делятся на два уровня хранения: договорённость команды задаётся на уровне экрана и действует на всех, персональное удобство сохраняется локально и никому больше не видно.

Задаются в настройках экрана

• Состав атрибутов экземпляра в коллекции. Определяет, по каким атрибутам пользователь распознаёт объект. По умолчанию — наименование и один–два ключевых атрибута.
• Представление коллекции: список строк или карточки. Карточки применяются, когда для распознавания нужны статус, аватар или несколько строк атрибутов.
• Сортировка по умолчанию. Задаёт порядок перебора, например по дате поступления для потоковой обработки.
• Состав вкладок детали и вкладка, открываемая по умолчанию.

Сохраняются локально у пользователя

• Положение разделителя. Ширина сторон восстанавливается при следующем открытии экрана.
• Применённые фильтры, поиск и сортировка коллекции.
• Активная вкладка детали. При переборе объектов открывается та же вкладка, если она есть у нового объекта.
• Последний выбранный объект. При возврате на экран выбор и позиция прокрутки восстанавливаются.

Ограничения

• Конфигурация состоит ровно из двух сторон. Третья колонка или вложенный Master–Detail внутри детали не допускаются: для иерархий применяется древовидное меню или переход на отдельную страницу.
• Правая сторона не закрывается и не заменяется модальным окном или дровером поверх коллекции.
• Табличная детализация в правой стороне не размещается — применяется связанная таблица.
• Действия над отдельным объектом не дублируются в строке коллекции.
• При множественном выборе в коллекции правая сторона не показывает деталь одного объекта: отображается пустое состояние с числом выбранных объектов и доступными массовыми действиями.

Состав и компоненты

Конфигурацию образуют две стороны: ведущая левая с коллекцией и подчинённая правая с детализацией выбранного объекта.

Левая сторона (коллекция)

Левая сторона — ведущая: она содержит коллекцию однотипных экземпляров бизнес-объектов и управляет содержимым правой стороны. Список остаётся видимым постоянно, поэтому пользователь перебирает объекты, не теряя контроль над списком.

Обязательно

• Шапка — заголовок (наименование бизнес-объекта) и действия над коллекцией (добавление, удаление и т.п.).
• Коллекция — область однотипных экземпляров бизнес-объектов для последовательного перебора.

Опционально

• Кнопка «Назад».
• Базовые фильтры и поле поиска.

Поведение

• Каждый экземпляр бизнес-объекта показывает набор ключевых атрибутов, достаточный для распознавания среди похожих.
• Строка или карточка целиком является областью выбора.
• Выбранный объект выделяется заливкой; выделение сохраняется при прокрутке.
• Действия над коллекцией целиком (добавление объекта, массовые операции) размещаются на левой стороне; действия над отдельным объектом относятся к правой стороне и здесь не дублируются.

Состояния. Загрузка, пустая коллекция, нет результатов после фильтрации, объект выбран, объект не выбран.

Правая сторона (детализация)

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

Обязательно

• Заголовок детали — идентифицирует объект, соответствует его наименованию в коллекции.
• Содержание — основная область стороны.

Опционально

• Вкладки разделов — если информация детализации объединяется в несколько групп.
• Действия над объектом — рядом с заголовком либо в области действий внизу.

Поведение

• Содержание отображает сведения о выбранном экземпляре бизнес-объекта — ключевые атрибуты, предпросмотр файла, форму, чат — в зависимости от бизнес-задачи.
• Несколько групп информации разделяются вкладками, переключение вкладок не затрагивает левую сторону.
• Действия относятся к выбранному экземпляру бизнес-объекта. Первичное действие выделяется акцентной кнопкой. Глобальные действия объекта из коллекции здесь не дублируются.

Состояния. Пустое состояние (объект не выбран) с указанием выбрать объект из списка, отображение детали, переключение вкладок, редактирование.

Сквозные сценарии

Выбор объекта

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

Выделение выбранного объекта в коллекции сохраняется при прокрутке, фильтрации и обновлении данных, пока объект остаётся в выдаче.

Фильтрация и поиск

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

Добавление объекта

Кнопка добавления находится в шапке левой стороны. Новый объект появляется в коллекции выбранным, а правая сторона открывает его в режиме редактирования. Отмена добавления возвращает выбор к ранее выбранному объекту.

Удаление объекта

После удаления выбирается следующий объект коллекции, а если удалён последний — предыдущий. Если коллекция опустела, отображается состояние пустой коллекции.

Открытие в отдельной вкладке

Если работа с объектом требует больше места или действий, деталь открывается в новой вкладке действием в шапке детали — в соответствии со стандартом вкладок технологических платформ. Разделённый экран при этом остаётся на месте.

Изменение ширины сторон

Ширина сторон меняется перетаскиванием разделителя по общим правилам: исходное соотношение 50/50, минимальная ширина стороны — 400 пикселей. Положение разделителя сохраняется локально у пользователя.

Состояния экрана

Состояния делятся на два уровня. Состояния экрана затрагивают обе стороны и взаимоисключающи; состояния правой стороны зависят от выбора в коллекции.

Загрузка

Левая сторона показывает скелетоны строк коллекции, правая — скелетон детали. Шапка и разделитель отображаются сразу.

Объект не выбран

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

Нет результатов после фильтрации

Данные есть, но не проходят по условиям. Левая сторона показывает пояснение и действие сброса фильтров; правая — пустое состояние. Предлагать добавление объекта здесь неуместно.

Ошибка загрузки

Ошибка коллекции отображается на левой стороне с действием повторной загрузки. Ошибка загрузки детали отображается только на правой стороне: коллекция остаётся доступной, и пользователь может выбрать другой объект.

Цветовая индикация

Применяется стандарт цветовой индикации Q.Palette со следующими уточнениями для Master–Detail.

• Выбранный объект выделяется заливкой состояния выбора, а не цветом статуса.
• Наведение визуально отличается от выбора и не смещает выделение.
• Статусы объектов в коллекции и детали отображаются тегами; цвета берутся из преднабора палитры.
• Просроченные даты и превышенные значения выделяются красным — по общему правилу выделения текста цветом.

Чек-лист проверки

• Пройдены все три шага критериев использования, стоп-факторы отсутствуют.
• Слева коллекция однотипных объектов, справа — полная деталь выбранного.
• Соблюдены общие правила разделённого экрана: 50/50 по умолчанию, минимум 400 пикселей, независимый скролл сторон.
• Экземпляр в коллекции показывает только атрибуты, нужные для распознавания.
• Строка или карточка целиком является областью выбора; выбранный объект выделен заливкой.
• Действия над коллекцией — слева, действия над объектом — справа, без дублирования.
• Правая сторона не закрывается; определено пустое состояние «объект не выбран».
• Смена выбора с несохранёнными изменениями сопровождается вопросом о сохранении.
• Определено поведение выбора при фильтрации, добавлении и удалении.
• Определены состояния загрузки, пустой коллекции, отсутствия результатов и ошибки.
• Табличная детализация вынесена в связанную таблицу.