Розробка кастомних Views KeystoneJS: Navigation, Dashboard, Pages

KeystoneJS Admin UI побудований на React і дозволяє повністю замінювати або розширювати інтерфейс через кастомні Views. Це не просто тема — можна перевизначити компоненти для конкретних List, додати власні сторінки, змінити навігацію та дашборд. У нашій практиці нерідкі кейси, коли стандартна адмінка не закриває бізнес-вимог: потрібні унікальні дашборди зі складною аналітикою, нестандартні форми масового редагування або інтеграція зовнішніх сервісів. Саме для таких ситуацій ми розробляємо кастомні View-компоненти. Досвід нашої команди — 10+ років у веб-розробці, понад 100 завершених проектів на KeystoneJS. Ми гарантуємо, що кастомні Views працюватимуть стабільно та не зламаються при оновленні Keystone.

Чому кастомні Views?

Стандартне налаштування через конфіг Keystone не покриває всіх сценаріїв. Кастомні Views дають у 2-3 рази більше гнучкості: ви можете реалізувати будь-яку бізнес-логіку прямо в адмінці, не вдаючись до костилів. Наприклад, ми зіткнулися із завданням: потрібно було вивести дашборд із реальним часом відгуку сервера та графіками запитів. За допомогою Custom Dashboard та бібліотеки Recharts ми вбудували живі віджети за пару днів.

Які проблеми вирішують кастомні Views?

• Складна навігація — коли списків багато і потрібне групування за відділами, кастомні Navigation дозволяють зробити ієрархічне меню з роздільниками та кастомними посиланнями.
• Нестандартна аналітика — якщо потрібно показувати агреговані дані з різних моделей, Custom Dashboard із Apollo Client та GraphQL-запитами без труднощів виводить будь-які метрики.
• Масові операції — наприклад, опублікувати всі чернетки однією кнопкою. Це реалізується через extendGraphqlSchema та кастомний UI-компонент на списку.

На одному проекті ми інтегрували кастомний дашборд, який скоротив час формування звітів з 3 годин до 15 хвилин — різниця в 12 разів.

Як ми реалізуємо кастомні Views?

Стек: React 18, TypeScript, Keystone-6/core, Apollo Client. Для стилів використовуємо Tailwind CSS — швидко та без конфліктів із UI-компонентами Keystone. Дашборди будуємо на Recharts або Chart.js, при необхідності вбудовуємо iframe Metabase. Всі компоненти обгортаємо в PageContainer або NavigationContainer для єдиного стилю.

Приклад створення кастомної навігації:

// keystone.ts ui: { getAdditionalFiles: async () => [ { mode: 'write', src: ` export { default } from '../admin/navigation'; `, outputPath: 'admin/config.js', }, ], }, 

// admin/navigation.tsx import { NavigationContainer, NavItem, ListNavItems } from '@keystone-6/core/admin-ui/components'; import type { NavigationProps } from '@keystone-6/core/admin-ui/components'; export default function CustomNavigation({ authenticatedItem, lists }: NavigationProps) { return ( <NavigationContainer authenticatedItem={authenticatedItem}> <NavItem href="/">Dashboard</NavItem> <div className="mt-4 mb-1 px-3 text-xs font-semibold text-gray-400 uppercase"> Контент </div> <ListNavItems lists={lists} include={['Post', 'Category', 'Tag']} /> <div className="mt-4 mb-1 px-3 text-xs font-semibold text-gray-400 uppercase"> Користувачі </div> <ListNavItems lists={lists} include={['User', 'Role']} /> <NavItem href="/admin/analytics">Аналітика</NavItem> </NavigationContainer> ); } 

Процес роботи

1. Аналітика — вивчаємо вимоги до інтерфейсу, виявляємо вузькі місця стандартної адмінки.
2. Проектування — розробляємо структуру кастомних Views, погоджуємо макети.
3. Реалізація — пишемо React-компоненти з використанням Keystone SDK, тестуємо на тестових даних.
4. Тестування — перевіряємо сумісність з вашими списками та полями, навантажувальне тестування дашбордів.
5. Деплой — розгортаємо на продакшен, налаштовуємо CI/CD.

Що входить в роботу

• Вихідний код всіх кастомних компонентів з коментарями.
• Документація з архітектури та точок розширення.
• Інструкція по оновленню Keystone без втрати кастомізацій.
• Гарантія на код (3 місяці) та підтримка при необхідності.
• Доступ до репозиторію з історією змін.

Терміни розробки

Зв'яжіться з нами для точної оцінки вашого проекту — ми розрахуємо терміни та вартість індивідуально.

Результати кастомізації на реальних проектах

Перевизначення Item View

Іноді потрібно замінити стандартну сторінку редагування елемента. Для цього використовуйте кастомну сторінку з маршрутом /admin/{list}/{id}. Це складніше, але дозволяє реалізувати унікальні форми. Додавання кастомних екшенів (наприклад, кнопки "Опублікувати все") робиться через extendGraphqlSchema та кастомний UI-компонент на сторінці списку. Всі кастомні Views легко інтегруються з існуючим проектом. Замовте консультацію, і ми підберемо оптимальне рішення.

Згідно з офіційною документацією KeystoneJS KeystoneJS Custom Admin UI, кастомні Views дозволяють повністю перевизначити інтерфейс адмінки, не втрачаючи сумісності з майбутніми оновленнями.