Отображение аватара пользователя в виджете

Создадим страницу в разделе. Перейдем в ее конструктор. Создадим виджет-код на странице. В нем пропишем HTML-код с классом для вывода аватара, стили для него, а также JS-код с вызовом функции loadPicture() из клиентского сценария. Стили можно задать на свое усмотрение.

Код:

<div class="profile-user-info-img"></div>

<style>
.profile-user-info-img {
  background: #a3a3a3;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 22px;
  color: #FFFFFF;
  text-transform: uppercase;
  margin-right: 8px;
  display: flex;
  align-items: center;
  margin-top: 4px;
}
</style>

<script>
    $(document).ready(function(){
        <%= Scripts%>.renderPage();
    });
</script>

В конструкторе страницы перейдем на вкладку «Сценарии». Создадим клиентский сценарий:

Код:

// объявление необходимых констант и переменных
declare const console: any;
declare const window: any;
declare const document: any;

let userPicture: ImageItem|undefined = undefined;
let userFirstName: string;
let userProfileImgEl: any;

// проверка загрузки элемента для вывода данных
async function renderPage(){
    console.log("Рендер");
    let myInterval = window.setInterval(async() => {
        userProfileImgEl = document.querySelector('.profile-user-info-img');
        if (userProfileImgEl) {
            window.clearInterval(myInterval);
            await loadPicture();
        }
    }, 200);
}

// функция отображения аватара пользователя
async function loadPicture(){
    // получение текущего пользователя
    const currentUser = await System.users.getCurrentUser();

    if (currentUser){
        // получение элемента аватара текущего пользователя
        userPicture = currentUser.data.avatar;
        // вывод аватара пользователя на странице, если он заполнен
        if (userPicture) {
            // получение ссылки на изображение и настройка отображения через стили
            let userAvatarLink = await userPicture.getDownloadUrl();
            userProfileImgEl.style.background = `url('${userAvatarLink}')`;
            userProfileImgEl.style.backgroundSize = 'contain';
        }
        else {
            // если аватар не заполнен, выводится первая буква имени
            userProfileImgEl.textContent = currentUser.data.fullname ? currentUser.data.fullname.firstname[0] : "";
        }
    }
}

В этом коде мы сперва проверяем, что все нужные элементы на странице загружены, далее находим текущего пользователя, получаем URL на его аватар и выводим его в элемент, который задали в HTML-коде.

Если все настроено правильно, то на странице у нас отобразится аватар текущего пользователя:



При размещении аналогичного кода на странице портала:



Подобным же образом можно настроить отображение аватара внешнего пользователя.

Создадим внешнего пользователя в приложении «Внешние пользователи», добавим изображение в поле «Аватар», пригласим этого пользователя на портал.



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



Таким образом, можно настроить отображение аватара внутреннего пользователя на странице раздела или портала или отображение аватара внешнего пользователя на портале.