--- url: https://gudhub.com/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-container-tabs/ title: "Налаштування вкладок у CRM системі\n #" description: "CRM система GudHub дозволяє розподіляти інформацію між вкладками, щоб користувач міг зручно переходити від одного блоку даних до іншого. Наприклад, на окремих в" lang: uk updated: 2026-10-20T08:43:12.533Z --- # Налаштування вкладок у CRM системі # Нічого не знайдено # Налаштування вкладок у CRM системі [#](https://gudhub.com/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-container-tabs/#%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%BE%D0%BA-%D1%83-crm-%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D1%96) CRM система GudHub дозволяє розподіляти інформацію між вкладками, щоб користувач міг зручно переходити від одного блоку даних до іншого. Наприклад, на окремих вкладках можна розмістити форму клієнта та таблицю записів. Для цього використовуються два інструменти: **Container Tabs** та **View Tabs**. Перший організовує вміст усередині одного представлення, а другий перемикає окремі представлення за допомогою **View Container**. Нижче розглянемо налаштування обох варіантів і пояснимо, у яких випадках їх зручно використовувати. ## Налаштування Container Tabs [#](https://gudhub.com/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-container-tabs/#%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-container-tabs) **Container Tabs** – це контейнер із вкладками, який додається безпосередньо в редакторі шаблону. Усі його вкладки належать одному представленню, або **View**, а всередині кожної можна розміщувати поля, таблиці та інші контейнери. Для прикладу підготуємо вкладки **“Form”** і **“Table”**: перша міститиме форму для заповнення, друга – таблицю. ### Крок 1. Додайте контейнер із вкладками [#](https://gudhub.com/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-container-tabs/#%D0%BA%D1%80%D0%BE%D0%BA-1-%D0%B4%D0%BE%D0%B4%D0%B0%D0%B9%D1%82%D0%B5-%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%B9%D0%BD%D0%B5%D1%80-%D1%96%D0%B7-%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B0%D0%BC%D0%B8) Відкрийте потрібне представлення в режимі **“Edit Template”**. На лівій панелі перейдіть до розділу **“Containers”** та знайдіть **“Tabs”**. Перетягніть цей контейнер у потрібну частину сторінки. Після додавання він буде порожнім: першу вкладку потрібно створити окремо. ![scr1](https://gudhub.com/assets/images/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-container-tabs/scr1-37ee6772ab.png "null") ### Крок 2. Створіть вкладки та задайте назви [#](https://gudhub.com/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-container-tabs/#%D0%BA%D1%80%D0%BE%D0%BA-2-%D1%81%D1%82%D0%B2%D0%BE%D1%80%D1%96%D1%82%D1%8C-%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B8-%D1%82%D0%B0-%D0%B7%D0%B0%D0%B4%D0%B0%D0%B9%D1%82%D0%B5-%D0%BD%D0%B0%D0%B7%D0%B2%D0%B8) Натисніть плюс усередині контейнера, щоб додати вкладку. Натисніть на її назву та введіть потрібний текст. За таким самим принципом додайте наступну вкладку. Для нашого прикладу назвемо їх **“Form”** і **“Table”**. Назви **Container Tabs** відображаються великими літерами незалежно від того, як ви їх ввели.  ![scr2](https://gudhub.com/assets/images/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-container-tabs/scr2-925baf2929.png "null") Зверніть увагу, у показаному варіанті **Container Tabs** порядок вкладок не можна довільно змінювати перетягуванням. Тому перед додаванням варто визначити їхню послідовність. ### Крок 3. Наповніть вкладки [#](https://gudhub.com/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-container-tabs/#%D0%BA%D1%80%D0%BE%D0%BA-3-%D0%BD%D0%B0%D0%BF%D0%BE%D0%B2%D0%BD%D1%96%D1%82%D1%8C-%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B8) Оберіть потрібну вкладку та розмістіть у ній поля й елементи. Наприклад, на **“Form”** додайте форму з інформацією про клієнта, а на **“Table”** – таблицю записів. Усередині вкладки також можна створювати окремі контейнери та налаштовувати розташування вмісту, як у звичайному представленні. ![scr3](https://gudhub.com/assets/images/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-container-tabs/scr3-795f749fbf.png "null") ### Крок 4. Налаштуйте контейнер і збережіть зміни [#](https://gudhub.com/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-container-tabs/#%D0%BA%D1%80%D0%BE%D0%BA-4-%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B9%D1%82%D0%B5-%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%B9%D0%BD%D0%B5%D1%80-%D1%96-%D0%B7%D0%B1%D0%B5%D1%80%D0%B5%D0%B6%D1%96%D1%82%D1%8C-%D0%B7%D0%BC%D1%96%D0%BD%D0%B8) У меню контейнера можна змінити вирівнювання вкладок, додати заголовок або приховати його. Непотрібну вкладку можна видалити хрестиком біля її назви в редакторі. ![scr4](https://gudhub.com/assets/images/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-container-tabs/scr4-4c1938b17e.png "null") Після завершення натисніть **“Save Changes”** та перевірте перемикання вкладок у додатку. На екрані відображатиметься вміст вибраної вкладки, але ви залишатиметеся в тому самому представленні. ![scr5](https://gudhub.com/assets/images/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-container-tabs/scr5-e1da284fc8.png "null") **Container Tabs** зручно використовувати, коли потрібно швидко розділити вміст однієї сторінки на кілька частин. Для самого перемикання вкладок додатковий **View Container** не потрібен. ## Налаштування View Tabs [#](https://gudhub.com/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-container-tabs/#%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-view-tabs) **View Tabs** – це окремий елемент, який працює разом із **View Container**. Кожна вкладка вказує на певне представлення, а після натискання передає контейнеру повідомлення, яке представлення потрібно показати. У цьому варіанті можна змінювати порядок вкладок, використовувати великі й малі літери в назвах, додавати іконки та обирати їхні кольори. Для прикладу налаштуємо перемикання між представленнями **“Form”** і **“Table”**. ### Крок 1. Підготуйте представлення та елементи [#](https://gudhub.com/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-container-tabs/#%D0%BA%D1%80%D0%BE%D0%BA-1-%D0%BF%D1%96%D0%B4%D0%B3%D0%BE%D1%82%D1%83%D0%B9%D1%82%D0%B5-%D0%BF%D1%80%D0%B5%D0%B4%D1%81%D1%82%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%BD%D1%8F-%D1%82%D0%B0-%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8) У додатку мають бути створені окремі представлення для кожної вкладки. У нашому прикладі це **“Form”** із формою та **“Table”** з таблицею. У головному представленні розмістіть **View Tabs** і **View Container**. Вкладки керуватимуть перемиканням, а контейнер відображатиме їхній вміст. ![scr6](https://gudhub.com/assets/images/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-container-tabs/scr6-d23fc3d74c.png "null") Зверніть увагу, вкладки **View Tabs** не містять поля та таблиці безпосередньо в собі. Вміст налаштовується у відповідних представленнях, які потім показує **View Container**. ### Крок 2. Налаштуйте View Container [#](https://gudhub.com/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-container-tabs/#%D0%BA%D1%80%D0%BE%D0%BA-2-%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B9%D1%82%D0%B5-view-container) Відкрийте налаштування **View Container**. У блоці **“Default Value Settings”** оберіть додаток у параметрі **“Application”** та початкове представлення у **“View name”**. У відео як початкове використовується **“Empty”**. Підготуйте таке порожнє представлення, якщо до вибору вкладки в контейнері не має бути вмісту, або оберіть потрібне представлення свого додатка. ![scr7](https://gudhub.com/assets/images/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-container-tabs/scr7-5e7ab478e0.png "null") Для перемикання через **View Tabs** не обов’язково додавати всі представлення до **“Cases Settings”** контейнера. Потрібні представлення будуть визначені в налаштуваннях самих вкладок. ### Крок 3. Пов’яжіть View Tabs із контейнером [#](https://gudhub.com/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-container-tabs/#%D0%BA%D1%80%D0%BE%D0%BA-3-%D0%BF%D0%BE%D0%B2-%D1%8F%D0%B6%D1%96%D1%82%D1%8C-view-tabs-%D1%96%D0%B7-%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%B9%D0%BD%D0%B5%D1%80%D0%BE%D0%BC) Відкрийте **“Edit Field”** елемента **View Tabs**. У блоці **“View Settings”** укажіть додаток, де розміщений потрібний **View Container**, у параметрі **“Application”**. У **“Field Send Message”** оберіть сам елемент **View Container**. Так ви визначаєте, який контейнер отримуватиме повідомлення під час перемикання вкладок. ![scr8](https://gudhub.com/assets/images/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-container-tabs/scr8-62b87adcbc.png "null") ### Крок 4. Додайте вкладки та оберіть представлення [#](https://gudhub.com/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-container-tabs/#%D0%BA%D1%80%D0%BE%D0%BA-4-%D0%B4%D0%BE%D0%B4%D0%B0%D0%B9%D1%82%D0%B5-%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B8-%D1%82%D0%B0-%D0%BE%D0%B1%D0%B5%D1%80%D1%96%D1%82%D1%8C-%D0%BF%D1%80%D0%B5%D0%B4%D1%81%D1%82%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%BD%D1%8F) У блоці **“Tabs Settings”** натисніть **“Add Option”**, щоб додати вкладку. У колонці **“Name”** введіть назву, яку бачитиме користувач. Для кожного рядка оберіть додаток у колонці **“Application”** та потрібне представлення у **“View name”**. У прикладі вкладка **"Form"** відкриває представлення **“Form”**, а вкладка **“Table”** – представлення **“Table”**. Назва вкладки вводиться вручну й не обов’язково має повторювати назву представлення. Наприклад, користувачу можна показати зрозумілу назву _**“Інформація про клієнта”**_. Зверніть увагу, у показаному у відео варіанті **View Container** відображає представлення одного додатка. Тому для вкладок обирайте той самий додаток, який налаштований як джерело контейнера. ### Крок 5. Налаштуйте іконки та порядок вкладок [#](https://gudhub.com/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-container-tabs/#%D0%BA%D1%80%D0%BE%D0%BA-5-%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B9%D1%82%D0%B5-%D1%96%D0%BA%D0%BE%D0%BD%D0%BA%D0%B8-%D1%82%D0%B0-%D0%BF%D0%BE%D1%80%D1%8F%D0%B4%D0%BE%D0%BA-%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%BE%D0%BA) Увімкніть **“Show icon”**, якщо потрібно показувати іконки. Після цього для кожної вкладки можна обрати власну іконку в колонці **“Icon”** та колір у **“Color”**. ![scr9](https://gudhub.com/assets/images/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-container-tabs/scr9-6aabf06024.png "null") Порядок **View Tabs** можна змінювати перетягуванням вкладок. Це зручно, якщо після налаштування потрібно перемістити найуживанішу вкладку на початок. ### Крок 6. Перевірте перемикання [#](https://gudhub.com/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-container-tabs/#%D0%BA%D1%80%D0%BE%D0%BA-6-%D0%BF%D0%B5%D1%80%D0%B5%D0%B2%D1%96%D1%80%D1%82%D0%B5-%D0%BF%D0%B5%D1%80%D0%B5%D0%BC%D0%B8%D0%BA%D0%B0%D0%BD%D0%BD%D1%8F) Поверніться до додатка та натисніть **“Form”**, а потім – **“Table”**. Усередині **View Container** мають послідовно відображатися форма й таблиця. ![scr10](https://gudhub.com/assets/images/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-container-tabs/scr10-22cd16e604.png "null") Якщо потрібне представлення не відкривається, перевірте додаток і поле-отримувач у **“View Settings”**, а також відповідність додатка та представлення в рядку вкладки. ## Розташування вкладок і прокручування [#](https://gudhub.com/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-container-tabs/#%D1%80%D0%BE%D0%B7%D1%82%D0%B0%D1%88%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%BE%D0%BA-%D1%96-%D0%BF%D1%80%D0%BE%D0%BA%D1%80%D1%83%D1%87%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F) **Container Tabs** утримує панель вкладок угорі під час прокручування свого вмісту. Для **View Tabs** поведінка залежить від розташування елемента в шаблоні. Щоб **View Tabs** залишався доступним під час прокручування вмісту, розмістіть його в окремому контейнері **Wrap**, відокремленому від області з **View Container**. Це допоможе зберегти панель перемикання на виду. ## Який тип вкладок обрати [#](https://gudhub.com/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-container-tabs/#%D1%8F%D0%BA%D0%B8%D0%B9-%D1%82%D0%B8%D0%BF-%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%BE%D0%BA-%D0%BE%D0%B1%D1%80%D0%B0%D1%82%D0%B8) **Container Tabs** підходить для швидкого поділу одного представлення на кілька вкладок. Увесь вміст можна налаштовувати безпосередньо в редакторі шаблону. **View Tabs** зручно використовувати, коли окремі представлення вже підготовлені або коли потрібні власні назви, іконки та змінний порядок вкладок. Нове представлення можна підготувати окремо, а потім додати його до списку вкладок. Обидва підходи можна поєднувати: наприклад, розмістити **View Container** усередині однієї з вкладок **Container Tabs**. Це дозволяє організувати робочий простір відповідно до структури даних і завдань вашої компанії. Мова Зміст [Відкрити джерело](https://app.gudhub.com:443/userdata/41557/1225480.md)