Эта заметка о том, как можно создавать кастомные панели в карточке клиента GetCourse.
Некоторое время назад я разрабатывал такую штуку как TCD. И что бы им удобнее можно было пользоваться и администрировать, со временем я добавил возможность управлять сервисом напрямую с карточки клиента. В рамках проекта TCD я и разработал GetCourse panel API.
Что это вообще такое?
Проще всего просто продемонстрировать, как это выглядит
В основной карточке клиента в GetCourse появляется возможность создавать дополнительные панели. Панели поддерживают текст, ссылки, описания к полям и кнопки к которым можно подключить обработчик.
Как начать использование?
Первым делом необходимо скачать архив с JS-библиотекой GC panel API. Затем загрузить файлы библиотеки в хранилище GetCourse.
В файле gcpanelapi.js необходимо найти функцию styleSetup и заменить ссылку на css-файл, на свою с хранилища GetCourse.
После этого нужно обернуть полученные ссылки в html-тег и вставить в поле «Счетчики и скрипты» в настройках аккаунта платформы.
|
1 |
<script type="text/javascript" src="https://**********/gcpanelapi.js"><script> |
Любая панель состоит с полей. Для начала нужно определить, какие будут поля, для этого есть функции для создания поля.
createInfoText(название поля, значение поля, описание поля)
createInfoLink(название поля, название ссылки, ссылка)
createButton(класс назначенный кнопке, текст в кнопке, функция которая будет вызвана при нажатии на кнопку)
Каждое созданное поле необходимо добавить в массив полей.
|
1 2 3 4 |
var fields = []; fields.push(createInfoText('Имя', 'Александр', 'Имя пользователя')); fields.push(createInfoLink('Сайт', 'https://techspec.pro', 'Личный блог пользователя')); |
Выше пример создания двух полей, одного текстового и второго поля с ссылкой и добавления их в массив полей fields.
После определения полей, необходимо присоединить панель. В карточке клиента GetCourse существует 3 основных столбца. Панель можно присоединить в конец любого из столбцов.
Для соединения новой панели с столбцом есть специальная функция
attachPanel(Заголовок панели, Панель в столбце, Массив полей);
Самая неочевидная опция функции «Панель в столбце». Она нужна для того, что бы API могло самостоятельно определить, в какой столбце нужно поместить новую панель. Если в этот аргумент вписать, например, «Заказы пользователя» то новая панель будет размещена в самом низу третьего столбца.
|
1 2 3 4 5 6 |
var fields = []; fields.push(createInfoText('Имя', 'Александр', 'Имя пользователя')); fields.push(createInfoLink('Сайт', 'https://techspec.pro', 'Личный блог пользователя')); attachPanel('Новая панель', 'Заказы пользователя',fields ); |
Для того, что бы добавить кнопку в панель, можно использовать функцию
createButton(класс кнопки, текст в кнопке, ссылка на функцию)
А так-же, что бы кнопка выглядела более менее приемлемо, необходимо вызвать функцию styleSetup();
|
1 2 3 4 5 6 7 8 9 10 11 12 |
styleSetup(); var fields = []; fields.push(createInfoText('Имя', 'Александр', 'Имя пользователя')); fields.push(createInfoLink('Сайт', 'https://techspec.pro', 'Личный блог пользователя')); fields.push(createButton('tcd-info', 'Ткни меня', pushBtn)); attachPanel('Новая панель', 'Заказы пользователя',fields ); function pushBtn() { alert('Кнопка'); } |
Обращаю Ваше внимание на функцию pushBtn внизу кода и в функции createButton. После клика на кнопку, именно эта функция и будет запущена.
Таким образом можно строить различные дополнительные панели, как информационные, так интерактивные, которые бы подгружали какие-либо данные с сети и отображали их в карточке клиента.
Для того, что бы форма работала постоянно также необходимо использовать загрузчик, который проверял бы, на какой странице находится сейчас пользователь и активировал панель, если эта страница — карточка пользователя.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
/*Функция загрузчик. В этом коде ничего менять не нужно.*/ window.addEventListener('load', function () { if (window.location.href.includes('/user/control/user/update/id/')) { let timeN = 20; let searchData = setInterval(() => { timeN--; if (timeN == 0) { clearInterval(searchData); } if (document.querySelector('.custom-form.without-help-elems > .fields') != null) { clearInterval(searchData); loadPanel(); } }, 50); } }); /*В этой функции нужно разместить код панели именно этот код будет выполнен, когда пользователь окажется на странице с карточкой пользователя*/ function loadPanel() { styleSetup(); //Загружаем стили var fields = []; //объявляем массив с полями /*Создаем поля для панели*/ fields.push(createInfoText('Имя', 'Александр', 'Имя пользователя')); fields.push(createInfoLink('Сайт', 'https://techspec.pro', 'Личный блог пользователя')); fields.push(createButton('tcd-warning', 'Ткни меня', pushBtn)); /*Подключаем панель к карточке клиента*/ attachPanel('Новая панель', 'Профиль пользователя',fields ); } /*Функция обрабатывающая нажатие на кнопку*/ function pushBtn() { alert('Кнопка'); } |
