Покажу пример создания виджета "Профиль пользователя" и "Трудовая деятельность" для отображения данных о пользователе на портале. В качестве приложения хранящего информацию профиля будет выступать системный пользователь ELMA.
Создаем виджет "Профиль пользователя" на уровне раздела с порталом. В контекст виджета добавляем строковые переменные, которые будут содержать требуемую информацию о пользователе.
В функции инициализации виджета определяем текущего пользователя и заполняем данными переменные контекста:
Код:
async function onInit():Promise<void>{
//определяем текущего пользователя
const current_user = await System.users.getCurrentUser();
//заполняем информацию о пользователе
//Фото
if(current_user.data.avatar){
Context.data.photo_src = await current_user.data.avatar.getDownloadUrl();
}
//ФИО
Context.data.fio = current_user.data.__name;
//Должность
let positions = await current_user.positions();
if(positions.length > 0){
Context.data.position = positions[0].data.name;
}
//эл.почта
if(current_user.data.email){
Context.data.email = current_user.data.email;
}
//номер телефона
if(current_user.data.workPhone){
Context.data.phone = current_user.data.workPhone.tel;
}
//рук-ль
let chiefs = await current_user.getChiefs();
if(chiefs.length > 0){
let chief = await chiefs[0].fetch();
Context.data.head = chief.data.__name;
}
//дата устройства на работу
if(current_user.data.hireDate){
Context.data.employment_date = current_user.data.hireDate.format('DD.MM.YYYY');
}
//День рождения
if(current_user.data.birthDate){
Context.data.bday = current_user.data.birthDate.format('DD.MM.YYYY');
}
}
На форму виджета добавляем стандартный виджет "Код", создаем необходимую для вас html верстку. В места где должны отображаться сформированные данные добавляем следующий синтаксис <%= Context.data.переменная_контекста %>.
HTML:
<div class="user_profile">
<div class="user_profile_wrapper">
<div class="user_profile_body">
<div class="user_profile_photo">
<div class="user_photo_wrapper">
<img src="<%= Context.data.photo_src %>" alt="user_photo" class="user_photo_img">
</div>
<div class="user_info_wrapper">
<div class="user_subordinates_count">
</div>
<div class="user_course_count">
</div>
</div>
</div>
<div class="user_profile_info">
<h1 class="user_fio">
<%= Context.data.fio %>
</h1>
<div class="user_position user_profile_info_item">
<p class="user_info_name_string">Должность</p>
<p class="user_info_name_string_value position_value">
<%= Context.data.position %>
</p>
</div>
<div class="user_cheif user_profile_info_item">
<p class="user_info_name_string">Руководитель</p>
<p class="user_info_name_string_value-blue chief_value">
<%= Context.data.head %>
</p>
</div>
<div class="user_email user_profile_info_item">
<p class="user_info_name_string">E-mail</p>
<a href="mailto:<%= Context.data.email %>" class="user_info_name_string_value-blue email_value">
<%= Context.data.email %>
</a>
</div>
<div class="user_phone user_profile_info_item">
<p class="user_info_name_string">Мобильный тел.</p>
<a href="tel:<%= Context.data.phone %>" class="user_info_name_string_value-blue phone_value">
<%= Context.data.phone %>
</a>
</div>
<div class="user_position user_profile_info_item">
<p class="user_info_name_string">Дата рождения</p>
<p class="user_info_name_string_value position_value">
<%= Context.data.bday %>
</p>
</div>
<div class="user_position user_profile_info_item">
<p class="user_info_name_string">Дата трудоустройства</p>
<p class="user_info_name_string_value position_value">
<%= Context.data.employment_date %>
</p>
</div>
</div>
</div>
</div>
</div>
Добавляем еще один стандартный виджет "Код", где прописываем необходимые стили:
HTML:
<style>
.employee_table {
margin: 15px;
font-size: 16px;
color: RGB(217, 112, 67);
text-decoration: underline
}
.user_profile {
margin: 0;
margin-bottom: 50px;
padding: 15px;
width: 100%;
}
.user_profile_wrappe {
margin: 0 auto;
}
.user_profile_body {
display: grid;
grid-template-columns: 30% 65%;
gap: 2%;
}
.user_fio {
color: RGB(0, 50, 78);
}
.user_profile_info .user_fio {
margin-bottom: 20px;
}
.user_profile_photo {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
margin-right: 20px;
/*height: 60%;*/
}
.user_photo_wrapper {
border-radius: 50%;
overflow: hidden;
}
.user_profile_info {
display: grid;
gap: 5%;
}
.user_profile_info>* {
margin-bottom: 5px;
}
.user_profile_info_item {
display: grid;
grid-template-columns: 35% 60%;
gap: 1%;
}
.user_work_phone {
border-top: 1px solid #CAD1D8;
padding-top: 20px;
}
.user_info_name_string {
margin-right: 20px;
color: #8C8C8C;
font-size: 14px;
line-height: 20px;
}
.user_info_name_string_value {
font-size: 16px;
line-height: 20px;
color: RGB(217, 112, 67);
}
.user_info_name_string_value-blue {
font-size: 16px;
line-height: 20px;
color: RGB(0, 65, 100);
}
.position_value,
.departament_value,
.organization_value,
.work_phone_ext_string {
color: RGB(0, 50, 78);
vertical-align: center
}
.employeeTable {
display: none;
}
.user_info_wrapper {
display: flex;
margin-top: 20px;
}
.user_subordinates_count,
.user_course_count {
width: 80px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.user_subordinates_count {
margin-right: 20px;
}
.user_count {
background: #ec6607;
padding: 10px;
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 2em;
position: absolute;
bottom: -35px;
left: 15px;
}
@media (max-width: 992px) {
.user_profile_body {
grid-template-columns: none;
}
.user_profile_info {
margin-top: 10px;
}
}
</style>
Публикуем
Выносим виджет "Профиль пользователя" на необходимую страницу портала.
Добавим информацию о трудовой деятельности сотрудника. Создадим одноименное приложение со следующим контекстом:
Добавим в таблицу необходимые данные:
Создадим элемент приложения, выберем требуемого сотрудника и заполним таблицу информацией о трудовой детяльности:
Создадим одноименный виджет под трудовую деятельность сотрудника и заполним контекст:
На вкладке скрипты напишем удобную структуру которая будет хранить информацию о трудоустройстве:
Код:
let employment_data: {
start_date: TDate,
start:string,
end_date: TDate,
end:string,
place: string,
position: string
}[] = []
Создаем функцию инициализации виджета со следующим кодом:
Код:
async function onInit(): Promise<void> {
//определяем текущего пользователя
let cur_user = await System.users.getCurrentUser();
//ищем элемент в приложении "Трудовая деятельность" по связке с текущим пользователем
const employment = await Context.fields.labor_activity.app.search().where((f, g) => g.and(
f.__deletedAt.eq(null),
f.employee.eq(cur_user)
)).first();
if (employment) {
//пробегаемся циклом по таблице и записываем все в ранее созданную структуру
for (let item of employment.data.labor_activity_table!) {
employment_data.push({
start_date: item.start,
start: item.start.format('DD.MM.YYYY'),
end_date: item.end,
end: item.end ? item.end.format('DD.MM.YYYY') : '-', //проверяем есть ли дата окончания(то есть сотрудника работает по настоящее время)
place: item.entity,
position: item.position
})
}
//сортируем данные по убыванию для удобства восприятия
employment_data = employment_data.sort(function (a, b) {
if (a.start_date.after(b.start_date)) {
return -1;
}
if (a.start_date.before(b.start_date)) {
return 1;
}
return 0;
});
}
//записываем сформированный объект в контекст виджета
if (employment_data && employment_data.length > 0) {
Context.data.employment_list = employment_data;
}
}
На форму виджета добавляем стандартный виджет "Код" и наполняем html версткой и в место, где у нас будет отображаться информация о трудовой деятельности ( в тег <ul> ) добавляем цикл:
HTML:
<div class="open-info employment">
<div class="open-info-content open-info-content_employment">
<div class="open-info-content-wrapper">
<div class="open-info-content-table-head">
<div class="open-info-content-table-head-text-wrapper open-info-content-date">
<p class="open-info-content-table-head-text">Дата начала</p>
</div>
<div class="open-info-content-table-head-text-wrapper open-info-content-date">
<p class="open-info-content-table-head-text">Дата окончания</p>
</div>
<div class="open-info-content-table-head-text-wrapper open-info-content-name">
<p class="open-info-content-table-head-text">Место</p>
</div>
<div class="open-info-content-table-head-text-wrapper open-info-content-number">
<p class="open-info-content-table-head-text">Должность</p>
</div>
</div>
<ul class="open-info-content-table-section-list">
<% const employment_list = Context.data.employment_list
for (let i = 0; i < employment_list.length; i++) { %>
<li class="open-info-content-table-section-list-item open-info-content__card">
<p class="open-info-content-table-string-date"><%= employment_list[i].start %></p>
<p class="open-info-content-table-string-date"><%= employment_list[i].end %></p>
<p class="open-info-content-table-string-name"><%= employment_list[i].place %></p>
<p class="open-info-content-table-string-number"><%= employment_list[i].position %></p>
</li>
<% } %>
</ul>
</div>
</div>
</div>
Публикуем и возвращаемся в виджет "Профиль пользователя". Добавим на форму виджет "Код", куда запишем необходимые стили для виджета "Трудовая деятельность":
Добавим виджет "Панель с заголовком" и настроим следующим образом:
внутрь панели с заголовком добавим ранее созданный виджет "Трудовая деятельность".
![[IMG]](https://community.elma365.com/ru/assets/0YDQtdC30YPQu9GM0YLQsNGCMTY4NDgzODcxOQ==.png)
Публикуем
Переходим на портал, нажимаем на "Трудовая деятельность":
