# Як налаштувати View Container у CRM системі

CRM система GudHub дозволяє відображати одне представлення всередині іншого за допомогою елемента View Container. Наприклад, на одній сторінці можна розмістити таблицю клієнтів і форму з даними вибраного клієнта.

**View Container** також дозволяє перемикати записи за допомогою карток та показувати різні представлення залежно від значень полів.

Нижче розглянемо основні налаштування елемента, його взаємодію з **Table** і **Cards** та вибір представлення за умовою.

## Покрокова інструкція з налаштування View Container

Перед початком важливо розрізняти представлення та запис. Представлення, або **View**, визначає розташування полів, елементів і контейнерів. Його вигляд налаштовується в **“Edit Template”**. Запис, або **item**, містить дані, які відображаються в цих полях.

Якщо у **View Container** обрати лише представлення, форма може відображатися без даних. Щоб працювати з конкретним записом, потрібно налаштувати його початковий вибір або передавати його з іншого елемента.

Для прикладу використаємо форму з основною та контактною інформацією клієнта.

### Крок 1. Оберіть додаток і представлення

Відкрийте **“Edit Field”** елемента **View Container**. У блоці **“Default Value Settings”** знайдіть параметр **“Application”** та оберіть додаток, із якого потрібно отримувати представлення й записи.

Після цього в **“View name”** вкажіть представлення, яке має відображатися за замовчуванням. У прикладі використовується **“Form”** із додатка **“View Container 1”**.
![scr1](https://app.gudhub.com:443/userdata/41557/1225459.png)

### Крок 2. Увімкніть показ початкового запису

Щоб у формі одразу з’явилися дані, увімкніть **“Show default item”**. **View Container** відображатиме перший запис із вибраного додатка з урахуванням налаштованих сортування та фільтрів.

Поверніться до сторінки та перевірте результат. Усередині основного представлення має з’явитися форма з даними клієнта.
![scr2](https://app.gudhub.com:443/userdata/41557/1225460.png)
Зверніть увагу, вибір представлення сам по собі не створює нового запису. Якщо контейнер не отримав запис для відображення, введені у форму значення не можна зберегти як його дані.

### Крок 3. Налаштуйте вибір початкового запису

Після увімкнення **“Show default item”** можна налаштувати сортування та фільтрування записів.

У параметрі **“Sort by”** оберіть поле, за яким потрібно впорядкувати дані. Для прикладу використаємо **“First Name”**. У **“Items Order”** вкажіть **“Ascending”** для прямого алфавітного порядку або **“Descending”** для зворотного.
![scr3](https://app.gudhub.com:443/userdata/41557/1225461.png)
Контейнер показуватиме перший запис у визначеному порядку. Якщо потрібно обмежити вибірку, натисніть **“Add Filter”** та задайте умову. Можна відібрати конкретний запис або групу записів, перший із яких відображатиметься при відкритті сторінки.

## Перемикання записів за допомогою таблиці

**View Container** може отримувати інформацію про вибраний запис від інших елементів. Це дозволяє залишити список клієнтів на сторінці, а їхні дані відкривати поруч із ним.

Для такого сценарію підготуйте представлення з таблицею та **View Container**. У контейнері оберіть додаток і форму, яка має показувати дані клієнта.

### Крок 1. Змініть дію при натисканні на рядок

Відкрийте **“Edit Field”** елемента **Table**. У параметрі **“Item action”** оберіть **“Send Message”**.

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

### Крок 2. Вкажіть View Container як отримувача

У **“Application Send Message”** оберіть додаток, у якому розміщено потрібний контейнер. У **“Field Send Message”** вкажіть сам елемент **View Container**.

У прикладі це додаток **“View Container 2”** і поле **“View Container”**.
![scr4](https://app.gudhub.com:443/userdata/41557/1225462.png)

### Крок 3. Перевірте перемикання записів

Поверніться до сторінки та натисніть на рядок таблиці. Дані вибраного клієнта мають з’явитися у **View Container** поруч зі списком.
![scr5](https://app.gudhub.com:443/userdata/41557/1225463.png)
Оберіть інший рядок і перевірте, що вміст форми змінився. При цьому ви залишаєтеся на тій самій сторінці: запис відкривається всередині контейнера, а адреса сторінки не змінюється.

## Перемикання записів за допомогою карток

За таким самим принципом **View Container** можна пов’язати з елементом **Cards**. Користувач обиратиме картку, а контейнер показуватиме відповідний запис.

### Крок 1. Налаштуйте дію картки

Відкрийте налаштування **Cards**. У параметрі дії картки, який у нашому прикладі має назву **“card\_action”**, оберіть **“Send Message”**.

У полі **“Application”** для передавання повідомлення вкажіть додаток із контейнером, а в **“Field Send Message”** – потрібний **View Container**.
![scr6](https://app.gudhub.com:443/userdata/41557/1225464.png)

### Крок 2. Перевірте результат

Поверніться до додатка та послідовно натисніть кілька карток. Вміст контейнера має змінюватися відповідно до вибраного запису.

У відео показано приклад зі списком контактів ліворуч і областю спілкування праворуч. Вона використовує елемент **Conversation** усередині представлення, яке відображає контейнер. Налаштування самого **Conversation** є окремим завданням.
![scr7](https://app.gudhub.com:443/userdata/41557/1225465.png)
Для звичайного перемикання записів достатньо налаштувати початкове представлення **View Container** та передавання повідомлень із **Cards** або **Table**. Додаткові умови вибору представлення потрібні лише тоді, коли його вигляд має залежати від даних.

## Вибір представлення залежно від значення поля

**View Container** дозволяє показувати різні представлення для записів із різними характеристиками. Наприклад, значення **“Main Info”** у полі **“Type”** може відкривати основну інформацію клієнта, а **“Contacts”** – його контактні дані.

Для цього використовується блок **“Cases Settings”**.

### Крок 1. Підготуйте представлення

У додатку мають бути створені представлення для кожного варіанта відображення. У прикладі **“Form Name”** містить основну інформацію клієнта, а **“Form Contacts”** – контактні дані.

Окреме порожнє представлення **“Empty”** використовується як початкове. Його обирають у **“Default Value Settings”**, щоб за відсутності відповідної умови контейнер не показував зайвої інформації.

### Крок 2. Додайте варіанти відображення

У налаштуваннях **View Container** перейдіть до **“Cases Settings”**. Натисніть **“Add Option”** і додайте потрібні представлення до списку.

Для нашого прикладу це **“Form Name”** та **“Form Contacts”**.
![scr8](https://app.gudhub.com:443/userdata/41557/1225466.png)

### Крок 3. Налаштуйте умову для основної інформації

Відкрийте фільтр у рядку **“Form Name”**. Оберіть поле **“Type”** та задайте умову відповідності значенню **“Main Info”**.

У показаному прикладі використовується тип перевірки **“Equals(or)”**. Якщо запис має відповідне значення, контейнер відображатиме представлення з основною інформацією клієнта.
![scr9](https://app.gudhub.com:443/userdata/41557/1225467.png)

### Крок 4. Налаштуйте умову для контактів

У рядку **“Form Contacts”** відкрийте фільтр і задайте для поля **“Type”** значення **“Contacts”**.
![scr10](https://app.gudhub.com:443/userdata/41557/1225468.png)

Після цього перевірте записи з різними значеннями **“Type”**. Для **“Main Info”** має відображатися основна інформація, для **“Contacts”** – контактні дані.

У цьому прикладі **View Container** розміщений усередині форми запису, яку відкриває таблиця. Тому вибір запису та вибір його представлення відбуваються на різних рівнях: таблиця відкриває потрібний запис, а контейнер перевіряє його дані й показує відповідний вміст.

## Інші способи використання View Container

**View Container** також може взаємодіяти з **Nested List** та **View Tab**. Ці елементи використовуються для організації переходів та перемикання вмісту й мають власні налаштування.

За потреби на сторінці можна розмістити кілька **View Container** або показувати представлення, усередині якого є ще один контейнер. Це дозволяє поєднувати список записів, детальну інформацію та окремі блоки даних в одному робочому просторі.

Налаштований **View Container** допомагає переглядати потрібну інформацію без постійного переходу між сторінками. Його початкове представлення, джерело даних та умови відображення можна змінювати відповідно до робочих процесів вашої компанії.