Виджеты

HTML-документ можно использовать для создания нестандартных элементов управления. Ниже приведен пример создания виджетов

&НаКлиенте
Функция ТекстHTMLДляВиджета(КоличествоНовых, КоличествоВРаботе, КоличествоЗакрытых, КоличествоВсего)

  ЗаголовокВиджета = "Информация о заявках";

  Текст = СтрШаблон(
    "<!DOCTYPE html>
    |<html lang=""ru"">
    |
    |<head>
    |    <meta charset=""UTF-8"">
    |    <meta http-equiv=""X-UA-Compatible"" content=""IE=edge"">
    |    <meta name=""viewport"" content=""width=device-width, initial-scale=1.0"">
    |    <title>Document</title>
    |    <style>
    |        p {
    |            margin: 0;
    |            padding: 0;
    |        }
    |        .wrap {
    |            padding: 0px;
    |        }
    |        .status {
    |       font-family: ""Arial"";
    |       font-weight: 600;
    |            font-size: 12px;
    |            margin-bottom: 5px;
    |            margin-left: 2px;
    |            margin-right: 5px;
    |            padding: 3px;
    |            border-radius: 5px;
    |            display: flex;
    |            justify-content: space-between;
    |        }
    |        .status-opened {
    |       border: 1px solid #A0A0A0;
    |            background-color: #F4F7FC;
    |        }
    |        .status-work {
    |       border: 1px solid #A0A0A0;
    |            background-color: #FBED9E;
    |        }
    |        .status-closed {
    |       border: 1px solid #A0A0A0;
    |            background-color: #ddffdd;
    |        }
    |        .status-all {
    |       border: 1px solid #A0A0A0;
    |            font-size: 16px;
    |        }
    |        .status-header {
    |            margin-bottom: 3px;
    |            padding: 2px;
    |       font-size: 12px;
    |        }
    |        .bottom {
    |            padding: 0px;
    |            margin-top: 6px;
    |            text-align: right;
    |            font-size: 11px;
    |       font-family: ""Arial"";
    |        }
    |    </style>
    |</head>
    |
    |<body>
    |    <div class=""wrap"">
    |     <div class=""status status-header"">
    |            <p><b>%1</b></p>
    |        </div>
    |        <div class=""status status-opened"">
    |            <p><a href=""#"" class=""link-opened"">Новые</a></p>
    |            <p>%2</p>
    |        </div>
    |        <div class=""status status-work"">
    |            <p><a href=""#"" class=""link-work"">В работе</a></p>
    |            <p>%3</p>
    |        </div>
    |        <div class=""status status-closed"">
    |            <p><a href=""#"" class=""link-closed"">Закрытые</a></p>
    |            <p>%4</p>
    |        </div>
    |  <div class=""bottom"">
    |        <div class=""bottom bottom-refresh"">
    |            <p><a href=""#"" class=""link-refresh"">Сбросить</a></p>
    |        </div>
    |    </div>
    |</body>
    |
    |</html>",
    ЗаголовокВиджета,
    КоличествоНовых,
    КоличествоВРаботе,
    КоличествоЗакрытых);

  Возврат Текст;

КонецФункции

В результате получается что-то вроде пример виджета.png

Для отработки кликов на элементах виджета нужно переопределить событие элемента «ПриНажатии», например:

&НаКлиенте
Процедура ВиджетПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)

    СписокКлассов = СтрРазделить(ДАнныеСобытия.Element.className, " ", Ложь);
    Если СписокКлассов.Найти("link-opened") <> Неопределено Тогда
        // Свой обработчик
    КонецЕсли;
КонецПроцедуры

В тексте HTML-класс «link-opened» созданного элемента расположен в следующем блоке

        <div class=""status status-opened"">
            <p><a href=""#"" class=""link-opened"">Новые</a></p>
            <p>%2</p>
        </div>

Соответственно можно создавать произвольные элементы — кнопки, ссылки, параграфы и пр., что допускается HTML+CSS