Ссылка вместо текста в заголовке виджета "Панель с заголовком"

Хочу поделиться интересной фичей, которую недавно реализовал. Задача — в стандартном виджете «Панель с заголовком» заменить текст заголовка на ссылку (например, на форму просмотра элемента приложения).

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

Что делаем:

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

Код:

declare const document: any, window: any
async function onInit(): Promise<void> {
    if (!Context.data.main_contact) return
    const main_contact = await Context.data.main_contact.fetch();
    ViewContext.data.email = main_contact.data._email
    ViewContext.data.phone_number = main_contact.data._phone
    ViewContext.data.position = main_contact.data._position
    //генерируем уникальный клас, для точного определения текущей формы
    //т.к. у меня это форма просмотра, я использую идентификатор текущего елемента
    ViewContext.data.form_id = `id-${Context.data.__id}`
}

2. Свяжем переменную ViewContext.data.form_id в качестве класса для модального окна нашей формы

3. Присвоим панели с заголовком, для которой мы хотим изменить заголовок, класс - cust_panel

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

Код:

async function endInit(): Promise<void> {
    if (!ViewContext.data.form_id || !Context.data.main_contact) return
    const curr_form = document.querySelector(`.${ViewContext.data.form_id}`)
    if (!curr_form) {
        window.setTimeout(endInit, 200)
        return
    }
    const cust_panel = curr_form.querySelector('.cust_panel')
    if (!cust_panel) {
        window.setTimeout(endInit, 200)
        return
    }
    const panel_header = cust_panel.querySelector('.groupbox-header')
    if(panel_header){
        const main_contact = await Context.data.main_contact.fetch()
        panel_header.children[0].remove();
        const link = document.createElement('a')
        link.textContent = main_contact.data.__name
        link.href = `./(p:item/_clients/_contacts/${main_contact.id})`
        panel_header.prepend(link)
    }
}

Еще больше полезной информации в ТГ канале WhatDaELMA365