# Налаштування елементу “Cards”

CRM система GudHub дозволяє відображати записи додатка у вигляді окремих карток за допомогою елемента **Cards**. У картці можна розмістити зображення, текст, посилання, координати та інші дані, потрібні для роботи.

Вигляд карток визначається обраним представленням. Це дозволяє налаштувати розташування інформації та показувати як короткий опис запису, так і детальніші дані.

Нижче розглянемо основні налаштування **Cards**, способи відкривання записів, сортування та фільтрування карток.

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

Для прикладу використаємо додаток, у якому записи відображаються як картки із зображеннями та назвами. Налаштуємо їхній вигляд і визначимо, що має відбуватися після натискання на картку.

### Крок 1. Відкрийте налаштування елемента

Відкрийте додаток із картками та перейдіть до **“Field Settings”** елемента **Cards**. Тут можна обрати джерело даних, представлення, розміри та інші параметри відображення.
![scr1](https://app.gudhub.com:443/userdata/41557/1225366.png)

### Крок 2. Оберіть додаток із даними

У полі вибору додатка (**“App”**) вкажіть, звідки потрібно отримувати записи. Це може бути поточний додаток або інший, до якого у вас є доступ.
![scr2](https://app.gudhub.com:443/userdata/41557/1225367.png)
Для нашого прикладу залишимо поточний додаток. Якщо обрати інший, у картках відображатимуться його записи.

### Крок 3. Визначте вигляд картки

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

Ми рекомендуємо обирати значення **“Short info”**, тоді вигляд карток буде найбільш оптимальним.
![scr3](https://app.gudhub.com:443/userdata/41557/1225368.png)

### Крок 4. Налаштуйте ширину карток

Оберіть ширину з доступних значень. Вона має відповідати вмісту картки: для короткого опису достатньо компактного вигляду, а для форми з кількома полями може знадобитися більше місця.

Якщо обрати **“100%”**, кожна картка займатиме всю доступну ширину контейнера, у якому розміщений елемент **Cards**. Коли ширина контейнера змінюється, картки також підлаштовуються під неї.

Для нашого прикладу оберемо ширину, за якої зображення та назви зручно переглядати, а на екрані розміщується кілька карток поруч.
![scr6](https://app.gudhub.com:443/userdata/41557/1225370.png)

### Крок 5. Визначте висоту області з картками

Наступний параметр відповідає за висоту всього елемента **Cards**. Він визначає, скільки місця займатиме область із картками на сторінці.

Якщо обрати невелике значення, буде видно лише частину вмісту, а для перегляду решти з’явиться прокручування. Значення **“100%”** дозволяє розтягнути елемент на доступну висоту контейнера.
![scr20](https://app.gudhub.com:443/userdata/41557/1225371.png)
Зверніть увагу, висота окремої картки залежить від її вмісту. Цей параметр не задає однакову фіксовану висоту для всіх карток.

### Крок 6. Налаштуйте виділення записів

Увімкніть **“Selected Items”**, якщо потрібно мати можливість вибирати картки, наприклад для подальшого видалення записів.

Після увімкнення біля карток з’явиться нумерація. Натиснувши на номер, можна позначити відповідний запис.
![scr7](https://app.gudhub.com:443/userdata/41557/1225372.png)
![scr8](https://app.gudhub.com:443/userdata/41557/1225373.png)
Якщо вимкнути цей параметр, нумерація зникне, а виділення карток буде недоступним.

### Крок 7. Встановіть сортування

У параметрі **“Sort Cards”** оберіть поле, за яким потрібно впорядкувати картки. Для прикладу використаємо поле з назвою запису (**“Title”**).
![scr9](https://app.gudhub.com:443/userdata/41557/1225374.png)
Після цього в **“Items Order”** визначте напрямок сортування.

**“Ascending”** відповідає порядку за зростанням, а **“Descending”** – за спаданням. Для назв це означає прямий або зворотний алфавітний порядок.

Оберемо потрібний напрямок і перевіримо розташування карток. Сортування змінює їхній порядок, але не приховує записи.
![scr10](https://app.gudhub.com:443/userdata/41557/1225375.png)

## Налаштування дії при натисканні на картку

Елемент **Cards** дозволяє обрати, що має відбуватися після натискання на картку. Залежно від способу роботи з даними можна відкривати запис, показувати його в діалоговому вікні або передавати повідомлення іншому елементу.

### Відкривання запису

Оберіть дію **“Open Item”**. Після цього в параметрі **“View Name”** вкажіть представлення, яке потрібно відкривати.
![scr11](https://app.gudhub.com:443/userdata/41557/1225376.png)
Наприклад, у списку можна залишити компактні картки із зображенням і назвою, а після натискання показувати повну форму запису з усіма необхідними полями.
![scr12](https://app.gudhub.com:443/userdata/41557/1225377.png)

### Відкривання у діалоговому вікні

Якщо потрібно переглядати запис у спливному вікні, оберіть **“View Dialog”**. Для цієї дії також необхідно вказати представлення у **“View Name”**.
![scr13](https://app.gudhub.com:443/userdata/41557/1225378.png)
![scr14](https://app.gudhub.com:443/userdata/41557/1225379.png)
Після натискання на картку відкриється діалогове вікно з вибраним представленням запису. Щоб закрити його та повернутися до карток, натисніть хрестик.

### Передавання повідомлення іншому елементу

Варіант **“Send Message”** використовується для взаємодії Cards з іншими елементами, наприклад із **View Container**.
![scr15](https://app.gudhub.com:443/userdata/41557/1225380.png)
Після вибору цієї дії вкажіть додаток, до якого потрібно передавати повідомлення, та поле в цьому додатку, яке має його отримувати.
![scr16](https://app.gudhub.com:443/userdata/41557/1225381.png)
Таке налаштування можна використовувати, щоб після натискання на картку відображати відповідний запис у **View Container**. Для цього елемент-отримувач також має бути налаштований для такої взаємодії.

## Групування карток

У параметрі **“Table Group”** можна обрати поле для групування записів. Попри назву, у налаштуваннях **Cards** цей параметр застосовується саме до карток.

Для прикладу оберемо поле з назвою. Якщо два записи мають однакову назву, вони відображатимуться як одна згрупована картка.
![scr17](https://app.gudhub.com:443/userdata/41557/1225382.png)
Групування не видаляє записи. Якщо прибрати це налаштування, кожен із них знову відображатиметься окремою карткою.

## Фільтрування карток

Фільтри дозволяють залишити на екрані лише записи, які відповідають заданим умовам. Принцип їх налаштування такий самий, як для елемента **Table**.

У блоці фільтрів оберіть поле, за яким потрібно відбирати записи, та задайте умову. Наприклад, можна використати поле з назвою та вказати значення ***“Underwater”***.
![scr18](https://app.gudhub.com:443/userdata/41557/1225383.png)
![scr19](https://app.gudhub.com:443/userdata/41557/1225384.png)
Після застосування фільтра відображатимуться лише картки, назви яких відповідають цій умові. Якщо видалити фільтр і не залишити інших обмежень, знову з’являться всі записи вибраного додатка.

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