Жёлтая морда

в 17:08, , рубрики: , ERP-системы, usability, визуализация данных, интерфейсы, черт знает что

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

Хотя, в ней нет никакого холивара. Просто рассказан и показан подход к построению адаптивных интерфейсов. Я его использую с 2012 года примерно.

Если думаете, что я тут за 1С проповедую, то зря. Этот подход и инструменты одинаково далеки как от вас, так и от 1С. Вы так делать никогда не будете, потому что вам не надо. Они так делать никогда не будут, потому что не умеют. Они честно хотели и хотят, но не умеют. Потому что 1Сники знают только три слова: "рынок", "продавать" и "монетизация". А у меня тут — для души.

Считайте, что я рассказываю вам свой личный подход к построению интерфейсов корпоративных информационных систем. Просто на примере 1С. Сейчас мы создаём аналогичные, по своей сути, инструменты на metadata.js, с использованием recharts. Морда уже не жёлтая, но суть та же.

Итак, Рабочий стол — это инструмент для построения адаптивных интерфейсов. В любой системе на платформе 1С: Предприятие версии 8.2 и выше.

Зачем и почему

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

А что не так тогда? Зачем городить какой-то рабочий стол?

Если не лень, перечитайте предыдущий абзац. Что видите? Что рисуют типовые интерфейсы 1С? Если лень, то я просто отвечу: они рисуют навигацию.

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

А если человек — не новый? Бухгалтер, например, или менеджер по продажам, диспетчер ПДО и т.д. Программа стоит давно, пользователи знают все, что им нужно, пользуются ограниченным количеством функциональности, и вряд ли что-то в ближайшее время поменяется. Им как быть?

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

А в 1С что? Пользователь знает, куда ему надо. Но, как и путешественник в аэропорту, вынужден каждый раз идти — продираться через дебри интерфейса. Видеть кучу лишнего, искать нужное, формировать кучу отчетов, чтобы увидеть несколько нужных ему цифр, бесконечно фильтровать и сортировать, чтобы добраться до требуемых данных.

Если провести аналогию между 1С и аэропортом, то что получится? Купив ERP или УПП, вы получили в собственность аэропорт. Ну то есть не вы, наверное, а ваша компания, но не суть. Этот аэропорт спроектирован для всех, а пользуетесь только вы и ваши коллеги. Только представьте — корпоративный аэропорт!

Представили? Хорошо. Теперь вопрос: вам там все нравится? Нет желания, например, закрыть большинство терминалов, оставить один, чтобы не бегать по полчаса? Туалет разместить поближе к стойке регистрации? Не вплотную, а за углом, конечно. А напротив стойки поставить диванчики из ВИП-зала, чтобы не подниматься по лестнице.

И вообще, вместо огромного холодного здания, поставить маленький уютный домик, где все будет под рукой – регистрация, сдача багажа, диван для отдыха, табло с рейсами над головой, приятный ресторанчик, зарядка для телефона и wi-fi. Ну разве не прелесть?

Все, что вам нужно, уже есть в аэропорту. Только расположено не так, как надо вам, а так, как решили разработчики. Заодно натолкали кучу того, что вам не нужно. Поэтому неудобно и неуютно.

Так вот, рабочий стол — это и есть тот самый маленький уютный домик, который сделает из вашего «аэропорта на платформе 1С» приятный, удобный и симпатичный уголок. И, главное – индивидуально для каждого пользователя. Пусть у каждого будет свой аэропорт. Почему бы и нет?

Общий обзор

Пора нарисовать несколько картинок. Мы нарисовали демонстрационный рабочий стол в Бухгалтерии предприятия 3.0, вот как он выглядит.

Жёлтая морда - 1

Человек заходит в программу и сразу видит то, чего ему интересно. Сначала – ссылки на документы и отчеты, которыми он хочет пользоваться чаще всего. Нажал на ссылку – перешел в список документов или форму отчета.

Дальше человек, зачем-то, хочет видеть несколько последних отгрузок. Ну вот нравится ему следить за реализациями, и все тут. И чтобы они раскрашивались – до 10 000 рублей пусть красными будут, до 100 000 рублей – синими, свыше – зелеными. Сегодня вот не очень удачный день, нет зеленых отгрузок… Нажал на ссылку – открылся документ.

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

Но надо ведь не только последние отгрузки понимать, а еще и динамику? Пусть продажи по дням рисуются в виде красивого графика! С начала месяца, допустим. Тогда не упустишь негативного тренда.

А если человек – толковый главбух или заместитель? Надо же присматривать за бухгалтерами, чтобы минусов в оборотке не наделали, а то знаю я их… Пусть прямо на рабочем столе отчетик рисуется простенький, по активным счетам, со всей необходимой аналитикой. Увижу минус – накажу…

Пойдем на вторую закладку рабочего стола.

Жёлтая морда - 2

Что у нас тут? Быстрый просмотр поступлений. Слева – список поступлений, справа – маленький отчетик, который показывает состав документа (товары, услуги, тара). Ставишь курсор на любой документ – отчетик перерисовывается. Не надо проваливаться в документы, рыскать по закладкам и проматывать таблицы.

Перейдем на третью закладку.

Жёлтая морда - 3

Что видим? Счета на оплату, в виде дерева. Первый уровень – счет, второй – номенклатура, цена, сумма. А чуть выше дерева – кнопка «Согласовать». Так уж получилось, что в нашей компании нужно согласовывать счета на оплату. Зачем куда-то ходить, искать и проверять? На рабочем столе видим несогласованные счета, выбираем нужные, жмем кнопку – и вуаля! Согласование свершилось.

А что на четвертой закладке?

Жёлтая морда - 4

Большая кнопка, что же еще. Что она делает? А какая разница… Секрет пусть будет.

А в чем фишка?

В чем фишка-то, спросит читатель? Наши программисты точно так же могут нарисовать такие закладки, с кнопками, ссылками и отчетами. Им только доступ дать в конфигуратор, и через пару дней будет готово.

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

Жёлтая морда - 5

Рабочий стол не знает ничего о том, что ему придется нарисовать конкретному пользователю. Когда 1С запустится, тогда и узнает, и нарисует.

Все настройки рабочего стола и его элементов выполняются в режиме Предприятие. Демонстрационный стол, картинки с которого вы видите в этом материале, нарисован за 2 часа.

Основные возможности

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

Компоновка

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

Можно рисовать произвольное количество групп, вкладывать их друг в друга, определять ориентацию – вертикальная или горизонтальная, делить на страницы, располагать элементы.

Вот так выглядит настройка рабочего стола:

Жёлтая морда - 6

Объединение рабочих столов

Пользователей много, и каждый хочет индивидуальный рабочий стол. А что, если пяти людям нужна пара одинаковых закладок? Нет ничего проще – пользователю можно назначить несколько рабочих столов одновременно. В итоговой форме человек просто увидит закладки и элементы, собранные со всех рабочих столов.

Элементы рабочего стола

Элементы рабочего стола – это такой справочник. Нарисовали один раз, например – диаграмму или динамический список, все настроили, и можете использовать в произвольном количестве рабочих столов.

Принципиально видов элементов семь: ссылка на метаданные, отчет, диаграмма, набор ссылок, динамический список, дерево, кнопка.

Ссылка на метаданные

Это самый простой вид элемента рабочего стола. Указывается объект метаданных – например, документ «Реализация товаров и услуг» или отчет «Оборотно-сальдовая ведомость» — и все, он попадет на рабочий стол в виде гиперссылки.

Жёлтая морда - 7

Можно добавить картинку, переопределить заголовок, изменить шрифт. При нажатии откроется соответствующая форма – список документов, форма отчета и т.д.

Кнопка

Тоже очень простой элемент, но понятный только программистам. Рисует на форме кнопку, под которой лежит команда, а в ней – написанный вами код. Можно выполнять на клиенте, можно – на сервере.

Команды – это такой справочник. Он используется не только для кнопок, но и для обработки нажатий на элементы других типов (об этом — ниже).

Жёлтая морда - 8

Код команд рабочего стола, как правило, связан с данными информационной базы (в отличие от команд, создаваемых в конфигураторе). Например, кнопка может создавать элемент справочника и заполнять его реквизиты определенными значениями. Где взять эти значения?

В конфигураторе вам пришлось бы или по коду искать, или городить специализированные хранилища предопределенных ссылок, или вообще константы делать. Здесь же вам в помощь таблица параметров (см. на скриншоте, внизу) – указываете имя параметра и значение (примитивы + любая ссылка), а в коде команды пользуетесь.

Отчет

Обычно руки сразу чешутся вывести на рабочий стол какой-нибудь типовой отчет. Но это – плохая мысль.

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

Поэтому в качестве источника отчетов используются схемы компоновки, лежащие в одноименном справочнике. Зачем вываливать всю оборотку, если человеку надо видеть только минусы? Зовем программиста, он за 5 минут пишет запрос на 10 строк, и перед нами – только минусы.

Жёлтая морда - 9

Что важно – раз вы сами пишете небольшую схему компоновки, да еще и в режиме Предприятие, то у вас под рукой есть главное – данные и контекст. Можете делать отборы по конкретным организациям, подразделениям или статьям. Можете фильтровать по текущему пользователю. И все это – в самой схеме компоновки, а не руками пользователя в варианте отчета.

Диаграмма

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

Обычная диаграмма, сформированная компоновкой в виде табличного документа, выглядит страшно. Она не подстраивается под размеры экрана, вообще в него не влезает, и ничего с этим сделать нельзя – только двигая объект типа «Рисунок» кодом после формирования. Но живые люди так не делают.

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

Покажу на картинке, чтобы было понятнее. Слева – стандартная диаграмма в табличном документе, справа – диаграмма на форме.

Жёлтая морда - 10

Разве можно себе позволить пользоваться диаграммой слева? Нет, конечно. Только нормальной, масштабируемой и встроенной в форму диаграммой справа. На первом скриншоте была та же диаграмма – видели, какая она там маленькая, но при этом – вполне читаемая?

А упомянутая магия заключается в том, что рабочий стол сам вытаскивает диаграмму из табличного документа и переносит ее на форму. Серии, точки, оформление – все тащит, что плохо лежит. Программист просто пишет схему компоновки, а получает красивую диаграмму. Без рабочего стола такую пришлось бы кодом рисовать.

Динамический список

Принцип тот же, что в отчетах и диаграммах. Программист пишет схему компоновки – что хочет видеть в динамическом списке. Поля выбирает, сортировку, оформление, отборы и т.д. – все, что нужно для комфортного представления данных.

А рабочий стол берет запрос, создает на форме динамический список, подсовывает в него текст запроса, отборы, сортировку, условное оформление и т.д. И все, список готов.

Также, можно управлять некоторыми свойствами списка. Например, основной таблицей – если она указана, то элемент будет вести себя, как обычная форма списка. Можно управлять возможностью добавления данных, управления их порядком.

Дерево

Почти один в один – динамический список. Тоже схема компоновки, тоже копирование отборов и оформления, только на форме рисуется дерево, а не динамический список. А данные можно вывести любые.

В дереве, соответственно, можно делать группировку. Количество уровней вложенности не ограничено.

К дереву можно подключать команды (из справочника «Команды», упомянутого выше). Каждая команда нарисует кнопку на панели дерева (как на скриншоте страницы «Согласование»). При нажатии на кнопку в ее код передается контекст – дерево. Соответственно, программист может сделать с ним и его данными все, что взбредет в голову. Например, изменить реквизиты объекта, на который указал пользователь в дереве.

Набор ссылок

Самый полезный и интересный, на мой взгляд, элемент. Он позволяет вывести на рабочий стол ссылки на конкретные данные — например, на реализации, задачи, заказы и т.д.

Например, на первом скриншоте у нас были 5 последних реализаций:

Жёлтая морда - 11

Так вот, это и есть набор ссылок. Под ним лежит все та же схема компоновки, которая собирает нужные конкретному человеку данные и выводит на экран. Никаких табличных документов, расшифровок, кучи колонок и двойных щелчков мыши. Просто гиперссылка на нужный объект.

Набор ссылок особенно полезен, когда надо человеку вывести объекты, с которыми он должен чего-то сделать. Например, согласовать договор или заявку на расход денег. Программист пишет запрос, который фильтрует объекты по текущему пользователю, и вуаля – никуда не надо ходить, ничего фильтровать, искать и разбираться. Щелкнул по ссылке, сразу попал в объект, сделал то, что надо – и объект исчез с рабочего стола.

Можно выводить ссылку, как есть. Можно переопределить представление, как на скриншоте выше – оставить номер и дату, добавить сумму. Можно раскрашивать любым цветом, в зависимости от данных – например, выделить красным просроченное. Можно даже размер шрифта изменить.

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

Жёлтая морда - 12

Что важно – в контекст выполнения команды передается не только ссылка, но и все поля, которые вернул запрос. На форме только ссылка, а запрос мог вернуть и состояние взаиморасчетов, и надежность контрагента, и наличие нужных товаров на складе – все, что угодно. И все это можно использовать внутри команды.

Прочие возможности

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

Для каждого рабочего стола можно включить автообновление с определенной периодичностью.

Есть еще экзотический режим – автоматическое переключение закладок рабочего стола. Живым людям такое не нужно, но был у нас такой пример – на телевизоре включали тонкого клиента, там был рабочий стол с кучей диаграмм, и автоматически переключались закладки. Телевизор висел в офисе, все на него смотрели и понимали, как хорошо они работают.

Варианты компоновки

Вариантов компоновки – бесчисленное множество, насколько хватит фантазии. Например, можно превратить рабочий стол в бешеный дашборд:

Жёлтая морда - 13

Диаграммы в платформе 8.3 выглядят очень симпатично, так что смотреть на такой рабочий стол весьма приятно, согласитесь. На рабочем столе они еще и на ощупь приятны – смотрите видео.

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

Жёлтая морда - 14

Развитие

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

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

Автор: nmivan

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js