--- url: https://gudhub.com/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-elementiv/nalashtuvannia-elementu-cards/ title: "Налаштування елементу “Cards”\n #" description: "CRM система GudHub дозволяє відображати записи додатка у вигляді окремих карток за допомогою елемента Cards . У картці можна розмістити зображення, текст, посил" lang: uk updated: 2026-10-20T08:42:54.877Z --- # Налаштування елементу “Cards” # Нічого не знайдено # Налаштування елементу “Cards” [#](https://gudhub.com/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-elementiv/nalashtuvannia-elementu-cards/#%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%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%83-cards) CRM система GudHub дозволяє відображати записи додатка у вигляді окремих карток за допомогою елемента **Cards**. У картці можна розмістити зображення, текст, посилання, координати та інші дані, потрібні для роботи. Вигляд карток визначається обраним представленням. Це дозволяє налаштувати розташування інформації та показувати як короткий опис запису, так і детальніші дані. Нижче розглянемо основні налаштування **Cards**, способи відкривання записів, сортування та фільтрування карток. ## Покрокова інструкція з налаштування карток у GudHub CRM [#](https://gudhub.com/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-elementiv/nalashtuvannia-elementu-cards/#%D0%BF%D0%BE%D0%BA%D1%80%D0%BE%D0%BA%D0%BE%D0%B2%D0%B0-%D1%96%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%86%D1%96%D1%8F-%D0%B7-%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%BA%D0%B0%D1%80%D1%82%D0%BE%D0%BA-%D1%83-gudhub-crm) Для прикладу використаємо додаток, у якому записи відображаються як картки із зображеннями та назвами. Налаштуємо їхній вигляд і визначимо, що має відбуватися після натискання на картку. ### Крок 1. Відкрийте налаштування елемента [#](https://gudhub.com/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-elementiv/nalashtuvannia-elementu-cards/#%D0%BA%D1%80%D0%BE%D0%BA-1-%D0%B2%D1%96%D0%B4%D0%BA%D1%80%D0%B8%D0%B9%D1%82%D0%B5-%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%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B0) Відкрийте додаток із картками та перейдіть до **“Field Settings”** елемента **Cards**. Тут можна обрати джерело даних, представлення, розміри та інші параметри відображення. ![scr1](https://gudhub.com/assets/images/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-elementiv/nalashtuvannia-elementu-cards/scr1-4a304ce7e5.png "null") ### Крок 2. Оберіть додаток із даними [#](https://gudhub.com/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-elementiv/nalashtuvannia-elementu-cards/#%D0%BA%D1%80%D0%BE%D0%BA-2-%D0%BE%D0%B1%D0%B5%D1%80%D1%96%D1%82%D1%8C-%D0%B4%D0%BE%D0%B4%D0%B0%D1%82%D0%BE%D0%BA-%D1%96%D0%B7-%D0%B4%D0%B0%D0%BD%D0%B8%D0%BC%D0%B8) У полі вибору додатка (**“App”**) вкажіть, звідки потрібно отримувати записи. Це може бути поточний додаток або інший, до якого у вас є доступ. ![scr2](https://gudhub.com/assets/images/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-elementiv/nalashtuvannia-elementu-cards/scr2-c8b4a78934.png "null") Для нашого прикладу залишимо поточний додаток. Якщо обрати інший, у картках відображатимуться його записи. ### Крок 3. Визначте вигляд картки [#](https://gudhub.com/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-elementiv/nalashtuvannia-elementu-cards/#%D0%BA%D1%80%D0%BE%D0%BA-3-%D0%B2%D0%B8%D0%B7%D0%BD%D0%B0%D1%87%D1%82%D0%B5-%D0%B2%D0%B8%D0%B3%D0%BB%D1%8F%D0%B4-%D0%BA%D0%B0%D1%80%D1%82%D0%BA%D0%B8) У першому параметрі вибору представлення вкажіть, який вигляд запису потрібно показувати всередині картки. Ми рекомендуємо обирати значення **“Short info”**, тоді вигляд карток буде найбільш оптимальним. ![scr3](https://gudhub.com/assets/images/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-elementiv/nalashtuvannia-elementu-cards/scr3-4320af058a.png "null") ### Крок 4. Налаштуйте ширину карток [#](https://gudhub.com/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-elementiv/nalashtuvannia-elementu-cards/#%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-%D1%88%D0%B8%D1%80%D0%B8%D0%BD%D1%83-%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D0%BA) Оберіть ширину з доступних значень. Вона має відповідати вмісту картки: для короткого опису достатньо компактного вигляду, а для форми з кількома полями може знадобитися більше місця. Якщо обрати **“100%”**, кожна картка займатиме всю доступну ширину контейнера, у якому розміщений елемент **Cards**. Коли ширина контейнера змінюється, картки також підлаштовуються під неї. Для нашого прикладу оберемо ширину, за якої зображення та назви зручно переглядати, а на екрані розміщується кілька карток поруч. ![scr6](https://gudhub.com/assets/images/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-elementiv/nalashtuvannia-elementu-cards/scr6-d05eb1e627.png "null") ### Крок 5. Визначте висоту області з картками [#](https://gudhub.com/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-elementiv/nalashtuvannia-elementu-cards/#%D0%BA%D1%80%D0%BE%D0%BA-5-%D0%B2%D0%B8%D0%B7%D0%BD%D0%B0%D1%87%D1%82%D0%B5-%D0%B2%D0%B8%D1%81%D0%BE%D1%82%D1%83-%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D1%96-%D0%B7-%D0%BA%D0%B0%D1%80%D1%82%D0%BA%D0%B0%D0%BC%D0%B8) Наступний параметр відповідає за висоту всього елемента **Cards**. Він визначає, скільки місця займатиме область із картками на сторінці. Якщо обрати невелике значення, буде видно лише частину вмісту, а для перегляду решти з’явиться прокручування. Значення **“100%”** дозволяє розтягнути елемент на доступну висоту контейнера. ![scr20](https://gudhub.com/assets/images/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-elementiv/nalashtuvannia-elementu-cards/scr20-e814c83e41.png "null") Зверніть увагу, висота окремої картки залежить від її вмісту. Цей параметр не задає однакову фіксовану висоту для всіх карток. ### Крок 6. Налаштуйте виділення записів [#](https://gudhub.com/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-elementiv/nalashtuvannia-elementu-cards/#%D0%BA%D1%80%D0%BE%D0%BA-6-%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B9%D1%82%D0%B5-%D0%B2%D0%B8%D0%B4%D1%96%D0%BB%D0%B5%D0%BD%D0%BD%D1%8F-%D0%B7%D0%B0%D0%BF%D0%B8%D1%81%D1%96%D0%B2) Увімкніть **“Selected Items”**, якщо потрібно мати можливість вибирати картки, наприклад для подальшого видалення записів. Після увімкнення біля карток з’явиться нумерація. Натиснувши на номер, можна позначити відповідний запис. ![scr7](https://gudhub.com/assets/images/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-elementiv/nalashtuvannia-elementu-cards/scr7-0330001875.png "null") ![scr8](https://gudhub.com/assets/images/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-elementiv/nalashtuvannia-elementu-cards/scr8-945cce9e4e.png "null") Якщо вимкнути цей параметр, нумерація зникне, а виділення карток буде недоступним. ### Крок 7. Встановіть сортування [#](https://gudhub.com/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-elementiv/nalashtuvannia-elementu-cards/#%D0%BA%D1%80%D0%BE%D0%BA-7-%D0%B2%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D1%96%D1%82%D1%8C-%D1%81%D0%BE%D1%80%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F) У параметрі **“Sort Cards”** оберіть поле, за яким потрібно впорядкувати картки. Для прикладу використаємо поле з назвою запису (**“Title”**). ![scr9](https://gudhub.com/assets/images/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-elementiv/nalashtuvannia-elementu-cards/scr9-4fea59e554.png "null") Після цього в **“Items Order”** визначте напрямок сортування. **“Ascending”** відповідає порядку за зростанням, а **“Descending”** – за спаданням. Для назв це означає прямий або зворотний алфавітний порядок. Оберемо потрібний напрямок і перевіримо розташування карток. Сортування змінює їхній порядок, але не приховує записи. ![scr10](https://gudhub.com/assets/images/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-elementiv/nalashtuvannia-elementu-cards/scr10-a75ae44155.png "null") ## Налаштування дії при натисканні на картку [#](https://gudhub.com/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-elementiv/nalashtuvannia-elementu-cards/#%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%B4%D1%96%D1%97-%D0%BF%D1%80%D0%B8-%D0%BD%D0%B0%D1%82%D0%B8%D1%81%D0%BA%D0%B0%D0%BD%D0%BD%D1%96-%D0%BD%D0%B0-%D0%BA%D0%B0%D1%80%D1%82%D0%BA%D1%83) Елемент **Cards** дозволяє обрати, що має відбуватися після натискання на картку. Залежно від способу роботи з даними можна відкривати запис, показувати його в діалоговому вікні або передавати повідомлення іншому елементу. ### Відкривання запису [#](https://gudhub.com/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-elementiv/nalashtuvannia-elementu-cards/#%D0%B2%D1%96%D0%B4%D0%BA%D1%80%D0%B8%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D0%B7%D0%B0%D0%BF%D0%B8%D1%81%D1%83) Оберіть дію **“Open Item”**. Після цього в параметрі **“View Name”** вкажіть представлення, яке потрібно відкривати. ![scr11](https://gudhub.com/assets/images/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-elementiv/nalashtuvannia-elementu-cards/scr11-c564bc9312.png "null") Наприклад, у списку можна залишити компактні картки із зображенням і назвою, а після натискання показувати повну форму запису з усіма необхідними полями. ![scr12](https://gudhub.com/assets/images/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-elementiv/nalashtuvannia-elementu-cards/scr12-cdad0cd8d6.png "null") ### Відкривання у діалоговому вікні [#](https://gudhub.com/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-elementiv/nalashtuvannia-elementu-cards/#%D0%B2%D1%96%D0%B4%D0%BA%D1%80%D0%B8%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D1%83-%D0%B4%D1%96%D0%B0%D0%BB%D0%BE%D0%B3%D0%BE%D0%B2%D0%BE%D0%BC%D1%83-%D0%B2%D1%96%D0%BA%D0%BD%D1%96) Якщо потрібно переглядати запис у спливному вікні, оберіть **“View Dialog”**. Для цієї дії також необхідно вказати представлення у **“View Name”**. ![scr13](https://gudhub.com/assets/images/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-elementiv/nalashtuvannia-elementu-cards/scr13-c8a6a70514.png "null") ![scr14](https://gudhub.com/assets/images/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-elementiv/nalashtuvannia-elementu-cards/scr14-d4a4b59614.png "null") Після натискання на картку відкриється діалогове вікно з вибраним представленням запису. Щоб закрити його та повернутися до карток, натисніть хрестик. ### Передавання повідомлення іншому елементу [#](https://gudhub.com/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-elementiv/nalashtuvannia-elementu-cards/#%D0%BF%D0%B5%D1%80%D0%B5%D0%B4%D0%B0%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D0%BF%D0%BE%D0%B2%D1%96%D0%B4%D0%BE%D0%BC%D0%BB%D0%B5%D0%BD%D0%BD%D1%8F-%D1%96%D0%BD%D1%88%D0%BE%D0%BC%D1%83-%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%83) Варіант **“Send Message”** використовується для взаємодії Cards з іншими елементами, наприклад із **View Container**. ![scr15](https://gudhub.com/assets/images/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-elementiv/nalashtuvannia-elementu-cards/scr15-94de567439.png "null") Після вибору цієї дії вкажіть додаток, до якого потрібно передавати повідомлення, та поле в цьому додатку, яке має його отримувати. ![scr16](https://gudhub.com/assets/images/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-elementiv/nalashtuvannia-elementu-cards/scr16-374460b80d.png "null") Таке налаштування можна використовувати, щоб після натискання на картку відображати відповідний запис у **View Container**. Для цього елемент-отримувач також має бути налаштований для такої взаємодії. ## Групування карток [#](https://gudhub.com/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-elementiv/nalashtuvannia-elementu-cards/#%D0%B3%D1%80%D1%83%D0%BF%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D0%BA) У параметрі **“Table Group”** можна обрати поле для групування записів. Попри назву, у налаштуваннях **Cards** цей параметр застосовується саме до карток. Для прикладу оберемо поле з назвою. Якщо два записи мають однакову назву, вони відображатимуться як одна згрупована картка. ![scr17](https://gudhub.com/assets/images/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-elementiv/nalashtuvannia-elementu-cards/scr17-0e92597d34.png "null") Групування не видаляє записи. Якщо прибрати це налаштування, кожен із них знову відображатиметься окремою карткою. ## Фільтрування карток [#](https://gudhub.com/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-elementiv/nalashtuvannia-elementu-cards/#%D1%84%D1%96%D0%BB%D1%8C%D1%82%D1%80%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D0%BA) Фільтри дозволяють залишити на екрані лише записи, які відповідають заданим умовам. Принцип їх налаштування такий самий, як для елемента **Table**. У блоці фільтрів оберіть поле, за яким потрібно відбирати записи, та задайте умову. Наприклад, можна використати поле з назвою та вказати значення _**“Underwater”**_. ![scr18](https://gudhub.com/assets/images/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-elementiv/nalashtuvannia-elementu-cards/scr18-303cc9fc51.png "null") ![scr19](https://gudhub.com/assets/images/uk/tutorials/rozshyrenni-nalashtuvannia/nalashtuvannia-elementiv/nalashtuvannia-elementu-cards/scr19-307dbd9485.png "null") Після застосування фільтра відображатимуться лише картки, назви яких відповідають цій умові. Якщо видалити фільтр і не залишити інших обмежень, знову з’являться всі записи вибраного додатка. Налаштовані картки дозволяють переглядати записи у зручному візуальному форматі та швидко переходити до детальної інформації. За потреби їхній вигляд, розміри, сортування й фільтри можна змінювати відповідно до робочих процесів вашої компанії. Мова Зміст [Відкрити джерело](https://app.gudhub.com:443/userdata/41557/1225365.md)