# Table of Contents - [Introduction | Orchid - Laravel Admin Panel](#introduction-orchid-laravel-admin-panel) - [Orchid - Laravel Admin Panel](#orchid-laravel-admin-panel) - [Support Orchid Sustainable Development | Orchid - Laravel Admin Panel](#support-orchid-sustainable-development-orchid-laravel-admin-panel) - [Design Philosophy | Orchid - Laravel Admin Panel](#design-philosophy-orchid-laravel-admin-panel) - [User Workflow | Orchid - Laravel Admin Panel](#user-workflow-orchid-laravel-admin-panel) - [Naming Elements | Orchid - Laravel Admin Panel](#naming-elements-orchid-laravel-admin-panel) - [Navigation | Orchid - Laravel Admin Panel](#navigation-orchid-laravel-admin-panel) - [Presentation Table | Orchid - Laravel Admin Panel](#presentation-table-orchid-laravel-admin-panel) - [Providing Feedback | Orchid - Laravel Admin Panel](#providing-feedback-orchid-laravel-admin-panel) - [Quick Response Time | Orchid - Laravel Admin Panel](#quick-response-time-orchid-laravel-admin-panel) - [Writing Style | Orchid - Laravel Admin Panel](#writing-style-orchid-laravel-admin-panel) - [License | Orchid - Laravel Admin Panel](#license-orchid-laravel-admin-panel) - [Документация | Orchid - Laravel Admin Panel](#-orchid-laravel-admin-panel) - [Under the Hood | Orchid - Laravel Admin Panel](#under-the-hood-orchid-laravel-admin-panel) - [Reporting Bugs | Orchid - Laravel Admin Panel](#reporting-bugs-orchid-laravel-admin-panel) - [Community Guidelines | Orchid - Laravel Admin Panel](#community-guidelines-orchid-laravel-admin-panel) - [Contributors | Orchid - Laravel Admin Panel](#contributors-orchid-laravel-admin-panel) - [The MIT License (MIT) | Orchid - Laravel Admin Panel](#the-mit-license-mit-orchid-laravel-admin-panel) - [Promote | Orchid - Laravel Admin Panel](#promote-orchid-laravel-admin-panel) - [Connect with the Orchid Community | Orchid - Laravel Admin Panel](#connect-with-the-orchid-community-orchid-laravel-admin-panel) - [Permissions | Orchid - Laravel Admin Panel](#permissions-orchid-laravel-admin-panel) - [Notifications | Orchid - Laravel Admin Panel](#notifications-orchid-laravel-admin-panel) - [Attachments | Orchid - Laravel Admin Panel](#attachments-orchid-laravel-admin-panel) - [Authentication | Orchid - Laravel Admin Panel](#authentication-orchid-laravel-admin-panel) - [Branding | Orchid - Laravel Admin Panel](#branding-orchid-laravel-admin-panel) - [Form Builder | Orchid - Laravel Admin Panel](#form-builder-orchid-laravel-admin-panel) - [Cell Types | Orchid - Laravel Admin Panel](#cell-types-orchid-laravel-admin-panel) - [Charts | Orchid - Laravel Admin Panel](#charts-orchid-laravel-admin-panel) - [Configuration | Orchid - Laravel Admin Panel](#configuration-orchid-laravel-admin-panel) - [Controllers | Orchid - Laravel Admin Panel](#controllers-orchid-laravel-admin-panel) - [View Template | Orchid - Laravel Admin Panel](#view-template-orchid-laravel-admin-panel) - [Form Elements | Orchid - Laravel Admin Panel](#form-elements-orchid-laravel-admin-panel) - [Eloquent Filters | Orchid - Laravel Admin Panel](#eloquent-filters-orchid-laravel-admin-panel) - [Global Search | Orchid - Laravel Admin Panel](#global-search-orchid-laravel-admin-panel) - [Layers for Grouping | Orchid - Laravel Admin Panel](#layers-for-grouping-orchid-laravel-admin-panel) - [Icons | Orchid - Laravel Admin Panel](#icons-orchid-laravel-admin-panel) - [Documentation | Orchid - Laravel Admin Panel](#documentation-orchid-laravel-admin-panel) - [Installation | Orchid - Laravel Admin Panel](#installation-orchid-laravel-admin-panel) - [Legend | Orchid - Laravel Admin Panel](#legend-orchid-laravel-admin-panel) - [Use JavaScript | Orchid - Laravel Admin Panel](#use-javascript-orchid-laravel-admin-panel) - [Listener | Orchid - Laravel Admin Panel](#listener-orchid-laravel-admin-panel) - [Navigation | Orchid - Laravel Admin Panel](#navigation-orchid-laravel-admin-panel) - [Modal Dialog | Orchid - Laravel Admin Panel](#modal-dialog-orchid-laravel-admin-panel) - [Orchid CRUD for Laravel | Orchid - Laravel Admin Panel](#orchid-crud-for-laravel-orchid-laravel-admin-panel) - [Package Development | Orchid - Laravel Admin Panel](#package-development-orchid-laravel-admin-panel) - [Permissions | Orchid - Laravel Admin Panel](#permissions-orchid-laravel-admin-panel) - [Presenters | Orchid - Laravel Admin Panel](#presenters-orchid-laravel-admin-panel) - [Orchid Icon Pack | Orchid - Laravel Admin Panel](#orchid-icon-pack-orchid-laravel-admin-panel) - [Data Management | Orchid - Laravel Admin Panel](#data-management-orchid-laravel-admin-panel) - [Manage File Attachments | Orchid - Laravel Admin Panel](#manage-file-attachments-orchid-laravel-admin-panel) - [Sorting and Filtering In a Table | Orchid - Laravel Admin Panel](#sorting-and-filtering-in-a-table-orchid-laravel-admin-panel) - [Screen State | Orchid - Laravel Admin Panel](#screen-state-orchid-laravel-admin-panel) - [Quick Start for Beginners | Orchid - Laravel Admin Panel](#quick-start-for-beginners-orchid-laravel-admin-panel) - [Rows | Orchid - Laravel Admin Panel](#rows-orchid-laravel-admin-panel) - [Screens | Orchid - Laravel Admin Panel](#screens-orchid-laravel-admin-panel) - [Directory Structure | Orchid - Laravel Admin Panel](#directory-structure-orchid-laravel-admin-panel) - [Stubs | Orchid - Laravel Admin Panel](#stubs-orchid-laravel-admin-panel) - [Table | Orchid - Laravel Admin Panel](#table-orchid-laravel-admin-panel) - [Testing | Orchid - Laravel Admin Panel](#testing-orchid-laravel-admin-panel) - [Iconography | Orchid - Laravel Admin Panel](#iconography-orchid-laravel-admin-panel) - [Upgrade Guide | Orchid - Laravel Admin Panel](#upgrade-guide-orchid-laravel-admin-panel) - [Orchid - Laravel Admin Panel](#orchid-laravel-admin-panel) - [Главные принципы сообщества | Orchid - Laravel Admin Panel](#-orchid-laravel-admin-panel) - [The MIT License (MIT) | Orchid - Laravel Admin Panel](#the-mit-license-mit-orchid-laravel-admin-panel) - [Участие в разработке | Orchid - Laravel Admin Panel](#-orchid-laravel-admin-panel) - [Содействие проекту | Orchid - Laravel Admin Panel](#-orchid-laravel-admin-panel) - [Права доступа | Orchid - Laravel Admin Panel](#-orchid-laravel-admin-panel) - [Уведомления | Orchid - Laravel Admin Panel](#-orchid-laravel-admin-panel) - [Вложения | Orchid - Laravel Admin Panel](#-orchid-laravel-admin-panel) - [Строитель форм | Orchid - Laravel Admin Panel](#-orchid-laravel-admin-panel) - [Брендирование платформы | Orchid - Laravel Admin Panel](#-orchid-laravel-admin-panel) - [Графики | Orchid - Laravel Admin Panel](#-orchid-laravel-admin-panel) - [Конфигурация платформы | Orchid - Laravel Admin Panel](#-orchid-laravel-admin-panel) - [Контроллеры | Orchid - Laravel Admin Panel](#-orchid-laravel-admin-panel) - [Пользовательские поля | Orchid - Laravel Admin Panel](#-orchid-laravel-admin-panel) - [Универсальные макеты | Orchid - Laravel Admin Panel](#-orchid-laravel-admin-panel) - [Фильтры | Orchid - Laravel Admin Panel](#-orchid-laravel-admin-panel) - [Глобальный поиск | Orchid - Laravel Admin Panel](#-orchid-laravel-admin-panel) - [Элементы формы | Orchid - Laravel Admin Panel](#-orchid-laravel-admin-panel) - [Макеты группировки | Orchid - Laravel Admin Panel](#-orchid-laravel-admin-panel) - [Icons | Orchid - Laravel Admin Panel](#icons-orchid-laravel-admin-panel) - [Использование JavaScript | Orchid - Laravel Admin Panel](#-javascript-orchid-laravel-admin-panel) - [Установка платформы | Orchid - Laravel Admin Panel](#-orchid-laravel-admin-panel) - [Legend | Orchid - Laravel Admin Panel](#legend-orchid-laravel-admin-panel) - [Listener | Orchid - Laravel Admin Panel](#listener-orchid-laravel-admin-panel) - [Меню панели платформы | Orchid - Laravel Admin Panel](#-orchid-laravel-admin-panel) - [Модальные окна | Orchid - Laravel Admin Panel](#-orchid-laravel-admin-panel) - [Laravel Orchid CRUD | Orchid - Laravel Admin Panel](#laravel-orchid-crud-orchid-laravel-admin-panel) - [Представители | Orchid - Laravel Admin Panel](#-orchid-laravel-admin-panel) - [Управление данными | Orchid - Laravel Admin Panel](#-orchid-laravel-admin-panel) - [Orchid Icon Pack | Orchid - Laravel Admin Panel](#orchid-icon-pack-orchid-laravel-admin-panel) - [Управление вложенными файлами | Orchid - Laravel Admin Panel](#-orchid-laravel-admin-panel) - [Сортировка и фильтрация в таблице | Orchid - Laravel Admin Panel](#-orchid-laravel-admin-panel) - [Состояние экрана | Orchid - Laravel Admin Panel](#-orchid-laravel-admin-panel) - [Быстрый старт для начинающих | Orchid - Laravel Admin Panel](#-orchid-laravel-admin-panel) - [Строки | Orchid - Laravel Admin Panel](#-orchid-laravel-admin-panel) - [Концепция экранов | Orchid - Laravel Admin Panel](#-orchid-laravel-admin-panel) - [Таблицы | Orchid - Laravel Admin Panel](#-orchid-laravel-admin-panel) - [Тестирование | Orchid - Laravel Admin Panel](#-orchid-laravel-admin-panel) - [Orchid - Laravel Admin Panel](#orchid-laravel-admin-panel) - [Руководство по обновлению | Orchid - Laravel Admin Panel](#-orchid-laravel-admin-panel) --- # Introduction | Orchid - Laravel Admin Panel ![](https://orchid.software/img/next/docs-left-tentacli.svg) ![](https://orchid.software/img/next/docs-right-tentacli.svg) [](https://orchid.software/en/hig/# "Scroll to the top of the page") Introduction ============ [Suggest Edit](https://github.com/orchidsoftware/orchid.software/edit/master/docs/en/hig/index.md "View and edit this file on GitHub") * [Design Is Not Something You Add On After You’ve Completed a Product.](https://orchid.software/en/hig/#design-is-not-something-you-add-on-after-youve-completed-a-product) * [Design Is Not Just, Like, Your Opinion, Man](https://orchid.software/en/hig/#design-is-not-just-like-your-opinion-man) * [References](https://orchid.software/en/hig/#references) The aim of these guidelines is to assist software developers and interface designers in creating their app using Orchid. They outline specific design elements and principles, while also fostering a design philosophy that guides you in making informed decisions when deviating from the guidelines. > Keep in mind that this is a set of guidelines, not a rule book. New, amazing interaction paradigms appear every day and more are waiting to be discovered. This is a living document that can and will be changed. Before diving into the fundamentals, it’s crucial to grasp a clear definition of design. However, more importantly, we must dispel two prevalent misconceptions. [Design Is Not Something You Add On After You’ve Completed a Product.](https://orchid.software/en/hig/#design-is-not-something-you-add-on-after-youve-completed-a-product) --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Whether you realize it or not, you are constantly designing anything you build. It is an intrinsic part of creating something. Design is not just what something looks like. It’s not just the colors and fonts. Design is how it works. When you decide to add a button that does a thing, that is design. You made a decision to add a button with an icon or a label and where that button went and the size and color of that button. Decisions are designs. [Design Is Not Just, Like, Your Opinion, Man](https://orchid.software/en/hig/#design-is-not-just-like-your-opinion-man) ------------------------------------------------------------------------------------------------------------------------ Consider different types of bicycles. A folding bicycle has a different set of design goals than a mountain bicycle. Things like weight, size, and tire tread are important and competing factors in helping the intended audience reach their goals. Because we understand that design is about solving specific problems, we must also understand that we can objectively compare the effectiveness of two designs at solving those problems. [References](https://orchid.software/en/hig/#references) --------------------------------------------------------- This guide has been influenced by the following documents: * [GNOME Human Interface Guidelines](https://developer.gnome.org/hig/index.html) * [Human Interface Guidelines for elementary OS](https://docs.elementary.io/hig/) * [Photon Design System](https://design.firefox.com/photon/) * [Apple HIG](https://developer.apple.com/design/human-interface-guidelines/guidelines/overview/) * [Kontur Guides](https://guides.kontur.ru/) * [Fiori Design Guidelines](https://experience.sap.com/fiori-design-web/) * [Nielsen Norman Group](https://www.nngroup.com/) These documents offer valuable insights and best practices for designing interfaces that prioritize the user experience. By following the guidelines outlined in these resources, this guide aims to provide a comprehensive and well-informed approach to interface design specifically for Orchid apps. Our Friends [![](https://orchid.software/img/sponsors/assisted-mindfulness-logo.svg)](https://assisted-mindfulness.com/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) [![](https://orchid.software/img/sponsors/sajya.svg)](https://sajya.github.io/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) --- # Orchid - Laravel Admin Panel ![](https://orchid.software/img/next/menu-tentacli.svg) ![](https://orchid.software/img/next/main-tentacli-left.svg) ![](https://orchid.software/img/next/main-tentacli-right.svg) Enhance Your Laravel with Orchid ================================ Laravel Orchid is a powerful and easy-to-use solution for creating admin panel and line of business applications. With its code-driven approach, you can quickly and easily create efficient applications. ![](https://orchid.software/img/next/screen.jpg) Say goodbye to Tedious Development ================================== Stop wasting time building admin panels from scratch. Orchid simplifies the process, letting you focus on what matters most — your application's core features. Quick Start Orchid ship with the necessary technical documentation and examples for a quick and successful implementation [Documentation](https://orchid.software/en/docs) Screens Build modern apps that are 80% in PHP, and spend less time fiddling with tools and updating incompatible libraries. Focus on what matters most: creating exceptional features for your users. [Learn about Screens](https://orchid.software/en/docs/screens) use Orchid\Screen\Screen; class Task extends Screen { public function query(Task $task): array { return [\ 'task' => $task\ ]; } public function layout(): array { return [\ Layout::rows([\ Input::make('task.name')\ ->title('Name')\ ->placeholder('Enter task name')\ ->help('The name of the task to be created.'),\ ]),\ ]; } } UI components Orchid offers a vast selection of stunning UI components, including form inputs, dialogs, data grids, and visualizations. These components can be easily extended, and you can even create compositions directly in your code. Browse components: [Form Elements](https://orchid.software/en/docs/field) [Tables](https://orchid.software/en/docs/table) [Legend](https://orchid.software/en/docs/legend) [Charts](https://orchid.software/en/docs/charts) [Modals](https://orchid.software/en/docs/modals) ![](https://orchid.software/img/next/table.svg) Permissions Manage user permissions and ensure application security effortlessly. Backed by an intuitive interface, it's easy to set up and manage roles, without complex coding or external plugins. [Learn about Permissions](https://orchid.software/en/docs/access) Attachments Easily attach any file to a record with Orchid’s flexible attachment system. Keep your data organized and streamline workflows by associating files with any model in your app. [Learn about Attachment](https://orchid.software/en/docs/attachments) Design Guidelines Investing in a good user experience not only increases employee engagement, but also prevents expensive mistakes. That's why we place a high priority on providing detailed documentation to assist you in creating exceptional apps. [Read documentation](https://orchid.software/en/hig) ![](https://orchid.software/img/next/feature3-tentacli.svg) Never limited by the framework abstraction Relies entirely on browser and W3C standards, providing customization options to bring your vision to life. Free & Open Source for any purposes ----------------------------------- Everything that we do is 100% composed of open and free code, jointly developed by people from all over the world. [View License](https://orchid.software/en/license) ![](https://avatars.githubusercontent.com/u/5102591?v=4) ![](https://avatars.githubusercontent.com/u/33116358?v=4) ![](https://avatars.githubusercontent.com/u/29531264?v=4) ![](https://avatars.githubusercontent.com/u/3835337?v=4) ![](https://avatars.githubusercontent.com/u/349293?v=4) ![](https://avatars.githubusercontent.com/u/36058530?v=4) ![](https://avatars.githubusercontent.com/u/9349190?v=4) ![](https://avatars.githubusercontent.com/u/2122240?v=4) ![](https://avatars.githubusercontent.com/in/29110?v=4) ![](https://avatars.githubusercontent.com/u/875086?v=4) ![](https://avatars.githubusercontent.com/u/13166748?v=4) ![](https://avatars.githubusercontent.com/u/8014044?v=4) ![](https://avatars.githubusercontent.com/u/34600369?v=4) ![](https://avatars.githubusercontent.com/u/5114650?v=4) ![](https://avatars.githubusercontent.com/u/7434276?v=4) ![](https://avatars.githubusercontent.com/u/1443109?v=4) ![](https://avatars.githubusercontent.com/u/12692865?v=4) ![](https://avatars.githubusercontent.com/u/10923304?v=4) ![](https://avatars.githubusercontent.com/u/86893348?v=4) ![](https://avatars.githubusercontent.com/u/22416775?v=4) ![](https://avatars.githubusercontent.com/u/23292709?v=4) ![](https://avatars.githubusercontent.com/u/8939383?v=4) ![](https://avatars.githubusercontent.com/u/15719824?v=4) ![](https://avatars.githubusercontent.com/u/17746562?v=4) ![](https://avatars.githubusercontent.com/u/812976?v=4) ![](https://avatars.githubusercontent.com/u/1283779?v=4) ![](https://avatars.githubusercontent.com/u/6253494?v=4) ![](https://avatars.githubusercontent.com/u/451007?v=4) ![](https://avatars.githubusercontent.com/u/2318483?v=4) ![](https://avatars.githubusercontent.com/u/75082815?v=4) ![](https://avatars.githubusercontent.com/u/57477934?v=4) ![](https://avatars.githubusercontent.com/u/4312018?v=4) ![](https://avatars.githubusercontent.com/u/2137593?v=4) ![](https://avatars.githubusercontent.com/u/9845317?v=4) ![](https://avatars.githubusercontent.com/u/1786317?v=4) ![](https://avatars.githubusercontent.com/u/23408622?v=4) ![](https://avatars.githubusercontent.com/u/2639600?v=4) ![](https://avatars.githubusercontent.com/u/205923701?v=4) ![](https://avatars.githubusercontent.com/u/3649525?v=4) ![](https://avatars.githubusercontent.com/u/8565642?v=4) ![](https://avatars.githubusercontent.com/u/4540813?v=4) ![](https://avatars.githubusercontent.com/u/1327332?v=4) ![](https://avatars.githubusercontent.com/u/22668814?v=4) ![](https://avatars.githubusercontent.com/u/33565251?v=4) ![](https://avatars.githubusercontent.com/u/4404581?v=4) ![](https://avatars.githubusercontent.com/u/56652592?v=4) ![](https://avatars.githubusercontent.com/u/953022?v=4) ![](https://avatars.githubusercontent.com/u/17860942?v=4) ![](https://avatars.githubusercontent.com/u/37374594?v=4) ![](https://avatars.githubusercontent.com/u/36756531?v=4) ![](https://avatars.githubusercontent.com/u/19505875?v=4) ![](https://avatars.githubusercontent.com/u/375078?v=4) ![](https://avatars.githubusercontent.com/u/2598007?v=4) ![](https://avatars.githubusercontent.com/u/21333516?v=4) ![](https://avatars.githubusercontent.com/u/68446532?v=4) ![](https://avatars.githubusercontent.com/u/6442411?v=4) ![](https://avatars.githubusercontent.com/u/27962133?v=4) ![](https://avatars.githubusercontent.com/u/4936166?v=4) ![](https://avatars.githubusercontent.com/u/14044588?v=4) ![](https://avatars.githubusercontent.com/u/172251742?v=4) ![](https://avatars.githubusercontent.com/u/567569?v=4) ![](https://avatars.githubusercontent.com/u/13077787?v=4) ![](https://avatars.githubusercontent.com/u/930669?v=4) ![](https://avatars.githubusercontent.com/u/16915783?v=4) ![](https://avatars.githubusercontent.com/u/8665691?v=4) ![](https://avatars.githubusercontent.com/u/42704225?v=4) ![](https://avatars.githubusercontent.com/u/4679499?v=4) ![](https://avatars.githubusercontent.com/u/7902560?v=4) ![](https://avatars.githubusercontent.com/u/2084398?v=4) ![](https://avatars.githubusercontent.com/u/8360167?v=4) --- # Support Orchid Sustainable Development | Orchid - Laravel Admin Panel Your Donation Will Change Everything! ===================================== Your contribution empowers us to continue developing and maintaining these open-source packages and provide ongoing support to the community. Donate on OpenCollective Contribute to Orchid for Laravel on OpenCollective to support us financially and track project expenses transparently. Help us promote sustainable and community-driven development. [Donate on OpenCollective](https://opencollective.com/orchid) These people are already with us! ![](https://opencollective-production.s3.us-west-1.amazonaws.com/account-avatar/3d04e058-e310-4765-8cb0-230ece4778a5/IMG_2607.jpg) ![](https://opencollective-production.s3.us-west-1.amazonaws.com/97017710-a90f-11e9-b6fb-2bbe7128f780.png) ![](https://www.gravatar.com/avatar/fa1a54d9b3915e409784b543279ca355?default=404) ![](https://www.gravatar.com/avatar/b2468a37bc24e6eff500d47f65226f87?default=404) ![](https://opencollective-production.s3.us-west-1.amazonaws.com/1dc48630-220d-11eb-bf10-e17264fdf7e1.jpg) ![](https://www.gravatar.com/avatar/078194551f43a33f5110051a3faf3643?default=404) ![](https://logo.clearbit.com/5minphp.ru) ![](https://avatar.oxro.io/avatar.svg?name=Alexandr%20Taldykin) ![](https://avatar.oxro.io/avatar.svg?name=Inkognito) ![](https://avatar.oxro.io/avatar.svg?name=Roli%20Graf) ![](https://avatar.oxro.io/avatar.svg?name=Jose%20Valle) ![](https://www.gravatar.com/avatar/673f15bdd5ebd3c106e015c38e7aad18?default=404) ![](https://www.gravatar.com/avatar/cbc25b7d5d6c7bb5082fe0af1a7857e9?default=404) ![](https://www.gravatar.com/avatar/52e8737b75e302fbc2b85b54a81f50c8?default=404) ![](https://avatar.oxro.io/avatar.svg?name=Stad) ![](https://avatar.oxro.io/avatar.svg?name=Hexbyte%20Inc.) ![](https://avatar.oxro.io/avatar.svg?name=thaolt) ![](https://avatar.oxro.io/avatar.svg?name=Muhammed%20Can%20%C3%96zdemir) ![](https://opencollective-production.s3.us-west-1.amazonaws.com/0c6563f0-5df7-11ed-8e0b-a5aa541b6a71.png) ![](https://avatar.oxro.io/avatar.svg?name=Urmat%20Tilekov) ![](https://avatar.oxro.io/avatar.svg?name=Ermek%20Kulmamirov) ![](https://opencollective-production.s3.us-west-1.amazonaws.com/d61d5d80-25c0-11ec-8782-b596fa235a5d.png) ![](https://logo.clearbit.com/seo25.com) ![](https://avatar.oxro.io/avatar.svg?name=Matej%20Vehar) ![](https://avatar.oxro.io/avatar.svg?name=Swara%20Mohammed) ![](https://avatar.oxro.io/avatar.svg?name=Neftali%20Martinez) ![](https://avatar.oxro.io/avatar.svg?name=Timur) ![](https://avatar.oxro.io/avatar.svg?name=Konstantin%20Riabchenko) ![](https://avatar.oxro.io/avatar.svg?name=Juan%20Carlos%20Enrique) ![](https://avatar.oxro.io/avatar.svg?name=shubinmir) ![](https://opencollective-production.s3.us-west-1.amazonaws.com/87b1d240-f617-11ea-9960-fd7e8ab20fe4.png) ![](https://avatar.oxro.io/avatar.svg?name=Slava) ![](https://opencollective-production.s3.us-west-1.amazonaws.com/account-avatar/0f7d5aff-4cb6-4a04-ae9f-5082dee40bd3/200-max.png) ![](https://avatar.oxro.io/avatar.svg?name=dv0vd) ![](https://www.gravatar.com/avatar/8f2be393ae6ceba29ce51fa8667c1c33?default=404) ![](https://avatar.oxro.io/avatar.svg?name=Blaubit) ![](https://avatar.oxro.io/avatar.svg?name=Alex) ![](https://logo.clearbit.com/vendorati.com) ![](https://avatars.githubusercontent.com/danielh-official) ![](https://avatar.oxro.io/avatar.svg?name=Stormy) ![](https://avatar.oxro.io/avatar.svg?name=Ferdinando) ![](https://avatar.oxro.io/avatar.svg?name=Martin%20Valdez) ![](https://avatar.oxro.io/avatar.svg?name=Ievhenii) Not ready to donate? Explore countless ways to make Orchid magnificent on [our page](https://orchid.software/en/community/promote) ! --- # Design Philosophy | Orchid - Laravel Admin Panel ![](https://orchid.software/img/next/docs-left-tentacli.svg) ![](https://orchid.software/img/next/docs-right-tentacli.svg) [](https://orchid.software/en/hig/philosophy/# "Scroll to the top of the page") Design Philosophy ================= [Suggest Edit](https://github.com/orchidsoftware/orchid.software/edit/master/docs/en/hig/philosophy.md "View and edit this file on GitHub") * [Concision](https://orchid.software/en/hig/philosophy/#concision) * [Avoid Feature Bloat](https://orchid.software/en/hig/philosophy/#avoid-feature-bloat) * [Useful](https://orchid.software/en/hig/philosophy/#useful) [Concision](https://orchid.software/en/hig/philosophy/#concision) ------------------------------------------------------------------ Orchid prioritizes simplicity and user experience, ensuring key functions of the application are easily accessible through consistent and intuitive navigation and workspace. The platform offers a consistent interaction language and visual design, providing a seamless experience for tasks such as fulfilling sales orders, reviewing KPIs, or managing vacation requests. Designed for adaptability, Orchid can be used effectively on both mobile devices and desktop computers. The app provides complete information without any clipping, ensuring a seamless transition between devices and a consistent user experience. [Avoid Feature Bloat](https://orchid.software/en/hig/philosophy/#avoid-feature-bloat) -------------------------------------------------------------------------------------- Orchid places a strong emphasis on simplicity by being selective about adding new features. It is essential to understand that each new feature brings with it consequences, such as: * Slower app performance and increased resource consumption * A cluttered interface that becomes more difficult to use * Diversion of time and effort away from refining existing features * Increased code complexity, leading to a higher risk of bugs * Additional translation and localization work By focusing on a streamlined, intuitive user experience, Orchid helps you work more efficiently and effectively. Orchid is mindful of avoiding feature bloat and excessive customizations, as they can lead to several drawbacks such as slower performance, cluttered interface, increased implementation time, increased potential for bugs, and additional documentation and translation work. Therefore, before introducing any new customization, Orchid assesses its necessity in accommodating the needs of diverse user groups. This approach helps streamline the design and maintain simplicity, resulting in a more efficient and user-friendly application. [Useful](https://orchid.software/en/hig/philosophy/#useful) ------------------------------------------------------------ We strive to meet the real needs of the people visiting our app. At the same time we must meet our own needs as app creators. Any section in this documentation should prove useful, or it doesn’t belong here. Our Friends [![](https://orchid.software/img/sponsors/assisted-mindfulness-logo.svg)](https://assisted-mindfulness.com/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) [![](https://orchid.software/img/sponsors/sajya.svg)](https://sajya.github.io/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) --- # User Workflow | Orchid - Laravel Admin Panel ![](https://orchid.software/img/next/docs-left-tentacli.svg) ![](https://orchid.software/img/next/docs-right-tentacli.svg) [](https://orchid.software/en/hig/workflow/# "Scroll to the top of the page") User Workflow ============= [Suggest Edit](https://github.com/orchidsoftware/orchid.software/edit/master/docs/en/hig/workflow.md "View and edit this file on GitHub") * [Confirmation of Action](https://orchid.software/en/hig/workflow/#confirmation-of-action) * [Destructive of Action](https://orchid.software/en/hig/workflow/#destructive-of-action) * [Welcoming the User](https://orchid.software/en/hig/workflow/#welcoming-the-user) * [Leveraging Existing Resources](https://orchid.software/en/hig/workflow/#leveraging-existing-resources) * [Adopt a Modular Approach](https://orchid.software/en/hig/workflow/#adopt-a-modular-approach) Visible design is a large part of the user experience, but so is the user’s workflow, or how they interact with an app. In this section, we cover a few important steps of a typical workflow: [Confirmation of Action](https://orchid.software/en/hig/workflow/#confirmation-of-action) ------------------------------------------------------------------------------------------ When you use your mobile phone, you expect all the information you enter to be immediately saved and applied. This approach works great with individual things that only affect you. But if instead of setting the time, you were to switch the date of the press release, that would be terrible, because you could make a mistake. The situation is especially aggravated when the same object is opened for editing by multiple users at once. So we expect that saving information on demand requires an explicit acknowledgement, such as clicking on a button. [Destructive of Action](https://orchid.software/en/hig/workflow/#destructive-of-action) ---------------------------------------------------------------------------------------- Asking for user confirmation before executing a destructive action, such as deleting data, is a crucial aspect of user-centered design. This practice helps to: * **Prevent accidental data loss**: By requiring confirmation, users are given an opportunity to review their action and prevent loss of data due to miss-clicks or accidental triggers. * **Increase user control**: Asking for confirmation empowers users by giving them the final say in the deletion process. This increases their sense of control over their data and enhances the overall user experience. * **Build trust**: Systems that incorporate confirmation prompts are viewed as more trustworthy and reliable by users. Confirmation prompts help to avoid frustration and dissatisfaction caused by unintended actions. Incorporating confirmation prompts into a design helps to create a more secure and user-friendly experience. [Welcoming the User](https://orchid.software/en/hig/workflow/#welcoming-the-user) ---------------------------------------------------------------------------------- If there is no content to show the user, provide actions they can act upon. Let them create a document, import a CSV, or whatever makes sense in the context of the app. [Leveraging Existing Resources](https://orchid.software/en/hig/workflow/#leveraging-existing-resources) -------------------------------------------------------------------------------------------------------- In app development, strive to leverage existing resources and components from Orchid. This will not only save time and effort, but also ensure a seamless migration to newer versions. However, don’t compromise the integrity and functionality of the application in the process of reusing resources. Do not force it though. If it doesn’t fit, it doesn’t fit. [Adopt a Modular Approach](https://orchid.software/en/hig/workflow/#adopt-a-modular-approach) ---------------------------------------------------------------------------------------------- Keep in mind that Orchid is a package for Laravel, and therefore it’s advisable to create smaller packages that complement each other. This helps to eliminate duplication of functionality and makes these features accessible to other applications. For instance, a popular use case is to implement backups, and many users prefer to utilize the package [spatie/laravel-backup](https://github.com/spatie/laravel-backup) . However, you can take it a step further by building a package that includes a preconfigured route and a backup screen. Our Friends [![](https://orchid.software/img/sponsors/assisted-mindfulness-logo.svg)](https://assisted-mindfulness.com/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) [![](https://orchid.software/img/sponsors/sajya.svg)](https://sajya.github.io/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) --- # Naming Elements | Orchid - Laravel Admin Panel ![](https://orchid.software/img/next/docs-left-tentacli.svg) ![](https://orchid.software/img/next/docs-right-tentacli.svg) [](https://orchid.software/en/hig/naming/# "Scroll to the top of the page") Naming Elements =============== [Suggest Edit](https://github.com/orchidsoftware/orchid.software/edit/master/docs/en/hig/naming.md "View and edit this file on GitHub") * [Naming Screen](https://orchid.software/en/hig/naming/#naming-screen) * [Lorem Ipsum](https://orchid.software/en/hig/naming/#lorem-ipsum) * [Naming Menu Items](https://orchid.software/en/hig/naming/#naming-menu-items) * [Terms](https://orchid.software/en/hig/naming/#terms) Text is an interface element, like a button or an input box. It helps solve an interface problem: it explains what you don’t understand and convinces you to perform the desired action. The user has no time, he is in the flow of solving his task. So he skips long and complex chunks of text. For the user to read the text, use the necessary minimum of words. [Naming Screen](https://orchid.software/en/hig/naming/#naming-screen) ---------------------------------------------------------------------- Screen names are a vital and essential part of the user experience. Not only do they play an important practical role in communicating what an app does, but they also establish app identity and character. A good screen name should: * Consist of one or two simple nouns. * Be related to the app’s domain (for example: “Source” for a links news) * Be short (less than 15–50 characters). * Be easy to pronounce. * Be easily paired with a good app icon, such as by referencing a physical object. * Use header capitalization (for example: “Icon Preview” instead of “Icon preview”). Likewise, a good name should avoid: * Overly complicated names and/or acronyms. * Puns and inside jokes. * Non-standard punctuation or whitespace (for example: SuperWriter). * Made-up words or word combinations. > As we work on various documents and collaborate in teams, we may encounter some uncertainties regarding the proper use of Title Case or the formatting of arguments. To help with these issues, try the service [titlecaseconverter.com](https://titlecaseconverter.com/) > . For a practical example, consider the product preview screen of an online store: ![❌ This image shows an illustrative example of a bad name and description for a screen.](https://orchid.software/img/hig/screen-name-bad.png) Initially, the product name is set by the user, which can often contain many words for marketing purposes or to improve search engine optimization. This can result in an untidy and cluttered display. To address this issue, we can look at the context in which the product name is used. Typically, managers or salespeople are not familiar with all the names of their products and instead use a stock keeping unit (SKU) for efficiency. By replacing the marketing name with the SKU, we can simplify the display and provide a clearer understanding of the context. For instance, we could use a truncated version of the SKU in the description: ![✅ This image shows an illustrative example of a short and clear name and description for a screen.](https://orchid.software/img/hig/screen-name-good.png) This approach enhances the overall readability and usability of the product preview screen, making it more efficient and effective for the intended audience. [Lorem Ipsum](https://orchid.software/en/hig/naming/#lorem-ipsum) ------------------------------------------------------------------ When writing text for prototypes, it’s important to keep it realistic. Avoid using names and addresses that are too short or that only just fit in the available fields. Use real messages and errors, rather than just placeholder text like “Here is the error text”. It’s also important to avoid using “cool” or rude names, especially in prototypes that will be used for testing. Making factual or logical errors can also be problematic, as an expert in the field (such as an accountant) will immediately notice any inconsistencies. These kinds of errors can lead to discussions with the usability specialist and may interfere with the overall user experience. [Naming Menu Items](https://orchid.software/en/hig/naming/#naming-menu-items) ------------------------------------------------------------------------------ Menu items should have names that are either actions or locations, never descriptions. Make sure menu items are concise, but also fully describe the action that will be performed when they are clicked. “Settings” is acceptable as it clearly describes the action that will be performed when the item is clicked. “Software Up to Date” is not acceptable. What happens if I click this item? Where will it take me? What will it do? The outcome is uncertain. [Terms](https://orchid.software/en/hig/naming/#terms) ------------------------------------------------------ Use the same words for objects and actions on them. If the user reads “certificate” in one window, “electronic signature” in another, and “key” in a third, he will not make the connection between these words, he will not understand that they are the same thing. Although a term may be commonly used within your business circle, it’s important to recognize that not everyone may be familiar with it. As such, it’s recommended to include a small footnote alongside the term to provide an explanation: ![✅ This image shows an illustrative example of an auxiliary hint for abbreviations.](https://orchid.software/img/hig/term.png) Our Friends [![](https://orchid.software/img/sponsors/assisted-mindfulness-logo.svg)](https://assisted-mindfulness.com/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) [![](https://orchid.software/img/sponsors/sajya.svg)](https://sajya.github.io/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) --- # Navigation | Orchid - Laravel Admin Panel ![](https://orchid.software/img/next/docs-left-tentacli.svg) ![](https://orchid.software/img/next/docs-right-tentacli.svg) [](https://orchid.software/en/hig/navigation/# "Scroll to the top of the page") Navigation ========== [Suggest Edit](https://github.com/orchidsoftware/orchid.software/edit/master/docs/en/hig/navigation.md "View and edit this file on GitHub") * [Sidebar Menu](https://orchid.software/en/hig/navigation/#sidebar-menu) * [Breadcrumbs](https://orchid.software/en/hig/navigation/#breadcrumbs) * [Command Bar](https://orchid.software/en/hig/navigation/#command-bar) * [Hidden vs Disabled](https://orchid.software/en/hig/navigation/#hidden-vs-disabled) [Sidebar Menu](https://orchid.software/en/hig/navigation/#sidebar-menu) ------------------------------------------------------------------------ Menus are a crucial component of the graphical user interface, serving as the primary means of navigation for app. They provide users with a clear understanding of their current location and enable them to explore other areas of the app. Menus also indicate the user’s current profile. To ensure maximum usability, the menu should always be open and not collapsible, since few icons are universally recognized by users. ![✅ Subheadings and separators allow you to structure navigation and improve the user experience.](https://orchid.software/img/hig/navigation-menu.png) To ensure that your menus are as effective and user-friendly as possible, here are some key recommendations to keep in mind: * **Keep the menu focused on navigation:** A menu is primarily meant to provide users with a quick and easy way to navigate your app. As such, it’s important to avoid cluttering your menu with items that don’t serve this purpose, such as buttons to action forms or modal dialogs. Instead, focus on providing users with clear, easy-to-understand links that help them move seamlessly through your app. * **Put your users first:** Arrange your menu items in a way that makes the most sense for your app’s users. This means placing the most frequently used or relevant items at the top of the list, so that users can quickly find what they need. * **Keep it simple:** While vertical menus can accommodate a large number of items, it’s best to keep your menu list as short as possible. Aim for no more than 16 items, to ensure that users can easily scan and navigate the menu. * **Highlight the active item:** When a user navigates to a child screen, the active menu item should remain highlighted so that users can easily keep track of where they are in the app. This simple touch can greatly enhance the user experience and prevent confusion. If a user goes to edit their profile, the “User Management” item should still be active. * **Group items logically:** Grouping related items together in the menu can help users quickly find what they need. For instance, if you have an e-commerce app, consider grouping all product-related functions together in a “Products” or “Shop” menu. This logical grouping can greatly enhance the user experience and make your app more intuitive to use. Breadcrumbs are an important element of app design that help users navigate through nested menus and content with ease. These navigational aids appear at the top of the screen and show users their current location within the app, along with a clear path to their current page or content. ![✅ The example of appropriate use of breadcrumbs.](https://orchid.software/img/hig/breadcrumbs.png) In most cases, including breadcrumbs in your app design is highly recommended, as they enable users to quickly and easily navigate back to previous pages or content, without relying on the back button or other navigation tools. The only exception to this rule is the home page, where breadcrumbs aren’t necessary, as there are no previous pages or content to navigate back to. That being said, there may be some instances where breadcrumbs aren’t needed. For example, if your app follows a linear flow with no nested menus or pages, breadcrumbs may not add much value to the user experience. In such cases, it’s important to evaluate whether breadcrumbs are truly necessary for your app’s specific design and navigation patterns. [Command Bar](https://orchid.software/en/hig/navigation/#command-bar) ---------------------------------------------------------------------- Command Bar is a horizontal button bar with hierarchical drop-down menus. Menu items can either trigger an action or open a dropdown menu. Usage recommendations: * Use icons sparingly. Most actions are difficult to reliably represent with icons, and the benefit of icons in addition to text should be weighed against the additional visual noise this creates. * Menu items in dropdown menus should always have text labels. * Icon-only menu buttons should be primarily used for extremely common recurring actions with highly standardized, universally understood icons (for example, a cross for close). * Command Bar is not an input field! While it may resemble one in some cases, it should always be used for navigation and triggering actions, rather than accepting user input. [Hidden vs Disabled](https://orchid.software/en/hig/navigation/#hidden-vs-disabled) ------------------------------------------------------------------------------------ Hiding an unavailable action entirely is often preferable to a disabled button, as this reduces UI clutter. However, in certain situations this can be problematic: * If the user expects a button to be present, such as at the end of a form, hiding the button can cause confusion, even if the form clearly indicates the presence of one or more invalid fields. * As a hidden button doesn’t occupy any space in the UI, toggling its visibility can cause unwanted changes in the layout of other elements. Our Friends [![](https://orchid.software/img/sponsors/assisted-mindfulness-logo.svg)](https://assisted-mindfulness.com/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) [![](https://orchid.software/img/sponsors/sajya.svg)](https://sajya.github.io/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) --- # Presentation Table | Orchid - Laravel Admin Panel ![](https://orchid.software/img/next/docs-left-tentacli.svg) ![](https://orchid.software/img/next/docs-right-tentacli.svg) [](https://orchid.software/en/hig/table/# "Scroll to the top of the page") Presentation Table ================== [Suggest Edit](https://github.com/orchidsoftware/orchid.software/edit/master/docs/en/hig/table.md "View and edit this file on GitHub") * [Maintain Consistency Throughout](https://orchid.software/en/hig/table/#maintain-consistency-throughout) * [Text Hierarchy (Find Records)](https://orchid.software/en/hig/table/#text-hierarchy-find-records) * [Maximizing Cell Content](https://orchid.software/en/hig/table/#maximizing-cell-content) * [Alignment Principles](https://orchid.software/en/hig/table/#alignment-principles) * [Compare Data](https://orchid.software/en/hig/table/#compare-data) * [Accessing Single Record](https://orchid.software/en/hig/table/#accessing-single-record) * [Row Limitations](https://orchid.software/en/hig/table/#row-limitations) * [Define Perfect Width](https://orchid.software/en/hig/table/#define-perfect-width) Tables are not usually winners of a UI beauty contest — they are a utilitarian part of our designs. To take advantage of their functionality and maintain their aesthetic appearance, follow the recommendations described on this page. [Maintain Consistency Throughout](https://orchid.software/en/hig/table/#maintain-consistency-throughout) --------------------------------------------------------------------------------------------------------- Consistency is key to delivering an optimal user experience in any project. To ensure consistency, you should apply the same table format to repeating elements across different tables. Inconsistencies in date formats, for instance, can cause confusion for users. For example, using `YYYY-MM-DD` in one table and `DD-MM-YYYY` in another is not ideal. In addition to formatting, consistency should also be maintained in terms of the location of elements within tables. If a date appears as the last column in one table, it should be in the same position in other tables. Consistency in user interactions is also important. If a user expects a click to open a modal window in one table, they should expect the same action in another table with similar elements. In short, establish a standard and stick to it for consistent and seamless user experience. [Text Hierarchy (Find Records)](https://orchid.software/en/hig/table/#text-hierarchy-find-records) --------------------------------------------------------------------------------------------------- When searching for records that meet specific criteria, users may be looking for a specific item with known details or multiple items that fit certain criteria. They may filter, sort, use a search feature, or scan the table visually to find what they need. The method chosen will depend on the specifics of the data table and the user’s expectations of what will be the easiest way to find what they’re looking for. To design for this task, keep a few things in mind: * Make the first column a human-readable record identifier rather than an automatically generated ID. This makes it easier for users to find the record they’re interested in. * Order the columns based on their importance to the user, with related columns next to each other. This prevents the need to move back and forth between distant columns to view relevant data. * Place the filter as close to the table as possible. Creating text hierarchy is important in table design to ensure a clear and organized presentation of data. The size and weight of the text in each cell should reflect its level of importance, with the largest and boldest text being the most significant and the smallest and lightest text being the least important. This hierarchy guides the user’s eye through the table and helps them understand the data in an organized manner. [Maximizing Cell Content](https://orchid.software/en/hig/table/#maximizing-cell-content) ----------------------------------------------------------------------------------------- Unlike an Excel (And other) spreadsheet, a web-based table allows for seamless filtering and organization of information, so adding as much information to each cell as possible is not a problem. Additionally, the information can be divided into several columns at any time if needed, making it easy to adjust the layout to meet the user’s needs. ![❌ The cell displays only one value, which is not available for filtering or sorting, such as an image.](https://orchid.software/img/hig/table-maximizing-bad.png) ![✅ Thanks to the merging of the cell with the image and SKU, more space has become available.](https://orchid.software/img/hig/table-maximizing.png) Maximizing the information in each cell can greatly enhance the overall functionality and user experience of a table. [Alignment Principles](https://orchid.software/en/hig/table/#alignment-principles) ----------------------------------------------------------------------------------- It is recommended to follow a consistent alignment strategy throughout your interface to create a visually harmonious and easy-to-read design. In general, text should be left-aligned and numbers should be right-aligned. This standard alignment approach helps guide the reader’s eye and enhances readability. While there may be situations that warrant deviating from this rule, it is best to reserve center-aligned text for specific design elements, such as headlines and subheadings. The irregular left and right margins created by center-aligned text can be disruptive to the reader’s eye and make it difficult to scan through information efficiently. When dealing with cells that contain multiple rows, aim to use the same number of rows across all cells. If this is not possible, arrange the cells with the greatest height at the start of the row. [Compare Data](https://orchid.software/en/hig/table/#compare-data) ------------------------------------------------------------------- Tables are most effective when they allow easy comparison of data, whether between records or columns. This comparison helps detect relationships between variables or simply understand typical values. However, there are two common challenges that users face when comparing data in complex, large tables: * Understanding which cell belongs to which record due to the overwhelming volume of data on the screen. * Comparing columns that are far away from each other, requiring tedious scrolling and memorization of data. ![✅ The table already has zebra-striping and hidden columns.](https://orchid.software/img/hig/table-compare.png) To enhance the process of data comparison, Orchid offers the option to dynamically enable or disable the display of columns. This makes it easier to focus on the most important data and avoid being overwhelmed by irrelevant information. When using this feature, it’s advisable to exercise caution and only hide columns that are less crucial to your comparison goals. [Accessing Single Record](https://orchid.software/en/hig/table/#accessing-single-record) ----------------------------------------------------------------------------------------- A frequent task in tables is accessing or modifying the data in a single record. To make this task more efficient, it’s important to present the single record in a way that is easy to read and edit. In Orchid, the recommended approach is to display the record in a modal window. This approach provides a clear and organized display of the record’s data, making it easier to view or edit. [Row Limitations](https://orchid.software/en/hig/table/#row-limitations) ------------------------------------------------------------------------- It is recommended to limit the number of rows displayed in a table to a single screen view. Exceeding this limit can negatively impact the performance of the table and hinder the user’s ability to understand the data being presented. This is because long tables often result in the loss of the table headers, which provide crucial context and information about the data being displayed. To ensure an optimal user experience, aim to keep the number of rows in a table within a single screen view. [Define Perfect Width](https://orchid.software/en/hig/table/#define-perfect-width) ----------------------------------------------------------------------------------- When designing tables for your app, it’s important to consider the size of the columns to ensure that the content is displayed effectively. While some tables may have columns that can be automatically sized, this isn’t always the best option. Instead, it’s important to determine the appropriate dimensions based on the content being displayed, particularly on mobile devices where screen real estate is limited. ![Auto Width vs Fixed Width](https://orchid.software/img/hig/table-width.png) Take the time to analyze your table content and consider which columns are most important and how much space they require. For example, if you have a table that displays product information, you may want to give more space to the product name and description columns, while reducing the width of columns that contain less critical information such as date or time. By thoughtfully considering the dimensions of your table columns, you can create a more effective and user-friendly interface that helps users quickly find and understand the information they need. Our Friends [![](https://orchid.software/img/sponsors/assisted-mindfulness-logo.svg)](https://assisted-mindfulness.com/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) [![](https://orchid.software/img/sponsors/sajya.svg)](https://sajya.github.io/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) --- # Providing Feedback | Orchid - Laravel Admin Panel ![](https://orchid.software/img/next/docs-left-tentacli.svg) ![](https://orchid.software/img/next/docs-right-tentacli.svg) [](https://orchid.software/en/hig/providing-feedback/# "Scroll to the top of the page") Providing Feedback ================== [Suggest Edit](https://github.com/orchidsoftware/orchid.software/edit/master/docs/en/hig/providing-feedback.md "View and edit this file on GitHub") * [Alerts](https://orchid.software/en/hig/providing-feedback/#alerts) * [Toasts](https://orchid.software/en/hig/providing-feedback/#toasts) * [Notifications](https://orchid.software/en/hig/providing-feedback/#notifications) * [Badges](https://orchid.software/en/hig/providing-feedback/#badges) User notifications typically consist of one or two simple sentences and do not require a header. It is common for people to add unnecessary headlines such as “Dear users”, “Important announcement”, “Attention!” or “Convincing request!” However, using such headlines may suggest that the content is not relevant to users. To maximize the user’s attention, it’s important to avoid including extraneous information and get straight to the point. The most effective feedback tends to match the significance of the information with the way it’s delivered. In the Orchid app, there are various ways to provide feedback, depending on the nature and severity of the feedback. [Alerts](https://orchid.software/en/hig/providing-feedback/#alerts) -------------------------------------------------------------------- Alerts can be a useful tool for communicating persistent states that users should not miss, such as indicating that the application is in debug mode or that the user’s account is being moderated and is not yet fully accessible. Additionally, in some cases, alerts can provide supplementary information about important locations or content items. By drawing attention to these critical pieces of information, alerts can help ensure that users are aware of important updates and changes. However, it’s important to keep in mind that alerts can take up valuable space and can be distracting. If the state you want to communicate is not critical, consider using a less disruptive Toast. ![An important message that the user should not miss.](https://orchid.software/img/hig/alert-example.png) [Toasts](https://orchid.software/en/hig/providing-feedback/#toasts) -------------------------------------------------------------------- Toasts are popup banners that display a message and are always temporary and user-dismissable. They are best used for providing context-specific messages in response to a user action. Because they are transient, they are most effective for communicating individual events rather than ongoing states. ![A toast that responds to a trivial user action.](https://orchid.software/img/hig/toast-example.png) [Notifications](https://orchid.software/en/hig/providing-feedback/#notifications) ---------------------------------------------------------------------------------- Notifications in app are different from other types of feedback. They are not deleted after being viewed and can be sent to users even when they are offline. They are an excellent way to inform, for example, for a task manager application to notify an employee about a new task. ![Individual messages for employees to reaction to.](https://orchid.software/img/hig/notification-example.png) [Badges](https://orchid.software/en/hig/providing-feedback/#badges) -------------------------------------------------------------------- Badges are small graphical elements that can display important information, such as the number of items in a user’s cart, the number of unread messages, or the number of new updates available. They can also be used to draw attention to a new feature that has been added to the app. It’s important to use badges sparingly, since they cannot be hidden by the user. Avoid using more than two badges at a time, as too many badges can be distracting and overwhelming for the user. Be selective and only use badges to highlight the most important information or features that the user needs to be aware of. ![Badges are an excellent method of communicating the existence of ongoing tasks, and can also be used for a variety of other purposes.](https://orchid.software/img/hig/badge-example.png) Our Friends [![](https://orchid.software/img/sponsors/assisted-mindfulness-logo.svg)](https://assisted-mindfulness.com/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) [![](https://orchid.software/img/sponsors/sajya.svg)](https://sajya.github.io/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) --- # Quick Response Time | Orchid - Laravel Admin Panel ![](https://orchid.software/img/next/docs-left-tentacli.svg) ![](https://orchid.software/img/next/docs-right-tentacli.svg) [](https://orchid.software/en/hig/performance/# "Scroll to the top of the page") Quick Response Time =================== [Suggest Edit](https://github.com/orchidsoftware/orchid.software/edit/master/docs/en/hig/performance.md "View and edit this file on GitHub") * [Defining "Fast" and "Slow"](https://orchid.software/en/hig/performance/#defining-fast-and-slow) * [Avoiding a Long Response](https://orchid.software/en/hig/performance/#avoiding-a-long-response) A speedy interface promotes a sense of control and ease of use. Slow performance is frustrating, leads to errors, and increases the likelihood that users will seek technical support rather than attempting to solve the issue themselves. [Defining "Fast" and "Slow"](https://orchid.software/en/hig/performance/#defining-fast-and-slow) ------------------------------------------------------------------------------------------------- The definition of “Fast” and “Slow” is context-dependent. In urgent situations, seconds may seem longer than normal. However, here is a general guideline: * A response time of 100 milliseconds is perceived as immediate, and is the expected response for interface elements such as hover, mouse movement, or clicks. * A delay of 1 second is noticeable, but it does not interrupt the user’s flow. A page or list loading in 1 second is acceptable, but a 1-second lag between a click and a menu opening is considered slow. * Processes lasting longer than 1 second must be optimized. [Avoiding a Long Response](https://orchid.software/en/hig/performance/#avoiding-a-long-response) ------------------------------------------------------------------------------------------------- The speed of a desktop application depends solely on the power of your computer, but the responsiveness of web applications is also affected by server performance and the quality of your Internet connection. Here are some tips to help improve the speed and performance of your web application: * **Optimize Database Queries**: Minimize the use of complex database queries and ensure the use of proper indexes. * **Caching**: Use caching techniques such as opcode caching and data caching to store frequently used data and reduce the number of database queries. * **Preloading Cheat**: Load only the portion of the content needed for the first display of the page and the most likely user actions at once. For example, if there is a lot of information on the screen, consider splitting it into several screens with a common `TabMenu`. This allows for a more optimized experience and can improve the overall speed of your web application. * **Caching on the Browser Side**: Cache data and re-download it only if there are changes. This allows for instant switching between downloaded pages. For example, use the HTTP response header `Etag`. * **Data Preparation**: Generate responses to “heavy” requests on the server in advance. For example, update the aggregate tables of the database on schedule. * **Background Processing**: If a long response is unavoidable, do not block the user. Instead, run the operation in the background and notify the user that they will be notified on the system and by email when the operation is complete. By following these tips, you can help ensure a faster and more optimized experience for your users. Our Friends [![](https://orchid.software/img/sponsors/assisted-mindfulness-logo.svg)](https://assisted-mindfulness.com/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) [![](https://orchid.software/img/sponsors/sajya.svg)](https://sajya.github.io/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) --- # Writing Style | Orchid - Laravel Admin Panel ![](https://orchid.software/img/next/docs-left-tentacli.svg) ![](https://orchid.software/img/next/docs-right-tentacli.svg) [](https://orchid.software/en/hig/text/# "Scroll to the top of the page") Writing Style ============= [Suggest Edit](https://github.com/orchidsoftware/orchid.software/edit/master/docs/en/hig/text.md "View and edit this file on GitHub") * [Creating a Consistent User Experience](https://orchid.software/en/hig/text/#creating-a-consistent-user-experience) * [Localization](https://orchid.software/en/hig/text/#localization) [Creating a Consistent User Experience](https://orchid.software/en/hig/text/#creating-a-consistent-user-experience) -------------------------------------------------------------------------------------------------------------------- Maintaining a consistent style and language throughout the user interface is crucial when developing a product. Just as sticking to a style guide is essential in documentation, it also plays an equally important role in the app itself. Consistency in style and language is vital for establishing a unified and professional user experience. Users should perceive every interaction within the app as aligned with their expectations and reflective of the brand’s identity. To achieve this, it is recommended to refer to reputable industry resources like the [Microsoft Style Guide](https://docs.microsoft.com/en-us/style-guide/) and Google Material Design. These style guides offer valuable insights from experienced writers and designers, allowing you to leverage their expertise and save time in the process. For instance, the Microsoft Style Guide suggests capitalizing only the first word of headings and titles to maintain a clean and modern aesthetic. Similarly, Google Material Design emphasizes the importance of using concise and clear language that aligns with user expectations. Now that you have knowledge about the style guides that tech writers follow, the question arises: how can you apply these recommendations effectively? Reading the entire Microsoft Manual of Style or any other style guide cover to cover, memorizing useful recommendations, and taking notes can be quite time-consuming. With the Microsoft Manual of Style alone spanning nearly 500 pages, this approach can seem overwhelming. Even experienced tech writers, who may have key recommendations memorized, can still make mistakes or overlook issues during the editing process because, after all, we are all human. > Fortunately, there are tools available to automate the process of checking texts against the recommendations provided in style guides such as Microsoft and Google. The [Vale](https://vale.sh/) > linter is one such tool that assists in verifying compliance with style guide recommendations. [Localization](https://orchid.software/en/hig/text/#localization) ------------------------------------------------------------------ * **Make it translatable.** Always, always make your text translatable using the built-in methods. It can’t be translated if you don’t make it translatable. Include punctuation in translatable strings. * **Avoid culture-specific references.** Remember that users of another language are going to be using your app. Specific metaphors or references will likely be lost on or downright confusing to other those users. Instead, use universal text. Our Friends [![](https://orchid.software/img/sponsors/assisted-mindfulness-logo.svg)](https://assisted-mindfulness.com/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) [![](https://orchid.software/img/sponsors/sajya.svg)](https://sajya.github.io/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) --- # License | Orchid - Laravel Admin Panel Quick Summary ============= At our core, we value the vibrant community of individuals who make each line of code possible. Behind every piece of software lies the dedication, expertise, and passion of talented individuals. With pride, we champion a license that embodies the spirit of freedom and openness. Our license is renowned as one of the most liberal in the industry, empowering users to unleash their creativity, explore new possibilities, and shape their digital experiences. #### Can * ✅ You may use the work commercially. * ✅ You may make changes to the work. * ✅ You may distribute the compiled code and/or source. * ✅ You may incorporate the work into something that has a more restrictive license. * ✅ You may use the work for private use. #### Must * ✍️ You must include the copyright notice in all copies or substantial uses of the work. * ✍️ You must include the license notice in all copies or substantial uses of the work. #### Cannot * ❌ The work is provided “as is”. You may not hold the author liable. MIT License ----------- Copyright © Chernyaev Alexandr Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. Join us as we celebrate collaboration, innovation, and the boundless potential of open source. Together, we can build a future defined by limitless possibilities. --- # Документация | Orchid - Laravel Admin Panel ![](https://orchid.software/img/next/docs-left-tentacli.svg) ![](https://orchid.software/img/next/docs-right-tentacli.svg) [](https://orchid.software/ru/docs/# "Scroll to the top of the page") Документация ============ [Suggest Edit](https://github.com/orchidsoftware/orchid.software/edit/master/docs/ru/docs/index.md "View and edit this file on GitHub") * [Введение](https://orchid.software/ru/docs/#vvedenie) * [Чем не является пакет?](https://orchid.software/ru/docs/#cem-ne-iavliaetsia-paket) * [В чём отличие от остальных библиотек?](https://orchid.software/ru/docs/#v-cem-otlicie-ot-ostalnyx-bibliotek) * [Почему разработка станет быстрее?](https://orchid.software/ru/docs/#pocemu-razrabotka-stanet-bystree) * [Как установить платформу?](https://orchid.software/ru/docs/#kak-ustanovit-platformu) [Введение](https://orchid.software/ru/docs/#vvedenie) ------------------------------------------------------ **Laravel Orchid** — это пакет с открытым исходным кодом (лицензия MIT) для ускорения разработки и создания приложений в стиле администрирования. Он абстрагирует общие шаблоны бизнес-приложений, чтобы разработчики могли быстро реализовать красивые и элегантные интерфейсы без особых усилий. Некоторые особенности: * **Конструктор форм** – нет необходимости каждый раз описывать HTML-поля одного и того же типа.. * **Экраны** – удобный баланс между генерацией CRUD и утомительным написанием кода. * **Поля** – более сорока вариантов. * **Права доступа** – удобное управление при разработке и поддержке. * Меню, графики, уведомления и т. д. Поставляется как пакет Laravel и взаимодействует с другими компонентами. Он может выступать в качестве основы для backoffice-приложений, админ-панелей или системы управления контентом. > **Обратите внимание!** Руководство содержит информацию по использованию пакета, при этом не поясняет использование фреймворка. Настоятельно рекомендуется ознакомиться с документацией [«Laravel»](https://laravel.com/docs/) > . [Чем не является пакет?](https://orchid.software/ru/docs/#cem-ne-iavliaetsia-paket) ------------------------------------------------------------------------------------ Laravel Orchid – это не «коробочное решение под ключ». Для его использования необходимы соответствующие навыки программирования. Он разработан, чтобы облегчить жизнь разработчикам при создании сложных систем, а не предоставлять вам одну из стандартных. Кроме того, важно понимать, что не все разработчики могут быть открыты к использованию новым для себя инструментов, и насильственное внедрение его может привести к сопротивлению или даже саботажу. Если вы столкнулись с сопротивлением со стороны вашей команды разработчиков, необходимо провести открытый и честный разговор, чтобы по возможности уладить их опасения. Поиск совета у опытного профессионала может быть полезным для нахождения взаимоприемлемого решения, которое удовлетворит все стороны. [В чём отличие от остальных библиотек?](https://orchid.software/ru/docs/#v-cem-otlicie-ot-ostalnyx-bibliotek) -------------------------------------------------------------------------------------------------------------- Экосистема Laravel богата на различные админ-панели. Возможно, вы уже решаете свои задачи, используя Nova, Voyager, BackPack, QuickAdminPanel или т.п., а сюда вас привело желание узнать, не позволит ли платформа упростить и улучшить вашу работу. На этот вопрос мы и надеемся ответить. Предыдущие пакеты разработаны для упрощения `CRUD` операций с базой данных и их можно разделить на несколько методов: * **Scaffolding** – метод строительных лесов, заключается в генерации физических файлов по заданным спецификациям, тем самым являясь самым быстрым на начальном этапе разработки приложения. Как правило, после генерации, разработчики удаляют такие пакеты, так как они не способны обновить файлы с ручными изменениями для обновлённых критериев. * **Визуальное программирование** – метод при котором разработчик перетаскивает или выбирает заранее подготовленные объекты, таким образом строят приложение, вместо написания программного кода. Такой вид исходит из предположения, что большинство программ являются простыми процедурными последовательностями. Однако как только программа становится больше, чем довольно тривиальный пример, ее сложность скоро сокрушает программиста новичка. Новички обнаруживают, что очень сложно рассуждать о большой базе кода и увязают в попытках создания стабильного и эффективного программного обеспечения большого масштаба. * **Один файл** – метод который предлагает разработчику описать все базовые действия в одном единственном файле (Resource, Section, CrudController), который привязывается к модели Eloquent. Это ещё одно очень хорошее решение, но если мы попробуем выйти за рамки CRUD приложения, то библиотеки, сосредоточенные в такой парадигме, нам не помогут, из-за того, что мы не работаем с тем единственным классом. В отличие от строительных лесов, этот пакет будет полезен на любом этапе разработки, а не только вначале, оставаясь быстрым для разработки за счёт готового набора компонентов. Без визуального программирования, а значит вам необходимо писать код на клавиатуре, а не клацать мышкой. И вместо одного, основного класса, предоставляет множество небольших компонентов для инкапсуляции и повторного использования. [Почему разработка станет быстрее?](https://orchid.software/ru/docs/#pocemu-razrabotka-stanet-bystree) ------------------------------------------------------------------------------------------------------- Классическое веб-приложение представляет собой подсистему с общей трёхъярусной архитектурой, которая включает в себя: * **Презентационный уровень** – графический интерфейс, представленный пользователю (браузеру), включая javascript сценарии, стили и ресурсы. * **Уровень прикладной логики** – в нашем случае это фреймворк – связующее звено, где сосредоточена большая часть бизнес-логики, работа с базой данных (Eloquent), отправка ресурсов и различная обработка. * **Уровень управления ресурсами** – обеспечивает хранение данных, как правило, реализуется средствами систем управления базами данных (MySQL,PostgreSQL, Microsoft SQL Server, SQLite). ![Architecture](https://orchid.software/img/scheme/architecture.jpg) Сокращение времени разработки непосредственно связано с распределением обязанностей между каждым из уровней. Это особенно заметно, когда необходимо создавать вспомогательный код, в то время как, большую часть действительно полезной работы берёт на себя прикладной слой. Как различные примеры противопоставления обязанностями можно привести: * Генерация `HTML` шаблонизатором `Blade` или фреймворком `Vue`. * Использование `ORM` или хранимых процедур. В зависимости от выбора решений будут и распределены обязанности, где у каждого решения есть как плюсы так и минусы. Точно так же, платформа наделяет прикладной уровень новыми обязанностями по управлению отображением и прокладыванию моста к данным. Classic | Orchid ├── Route | ├── Route ├── Model | ├── Model ├── Controller | └── Screen └── View | ├── HTML | ├── CSS | └── JS | [Как установить платформу?](https://orchid.software/ru/docs/#kak-ustanovit-platformu) -------------------------------------------------------------------------------------- Платформа свободно распространяется через интернет, [исходные коды](https://github.com/orchidsoftware/platform) и [информация о выпусках](https://github.com/orchidsoftware/platform/releases) опубликованы на GitHub. В руководстве по [установке](https://orchid.software/ru/docs/installation/) содержатся подробные инструкции. > Для предложения улучшений этого руководства, [создайте новый issue](https://github.com/orchidsoftware/platform/issues) > . При появлении вопросов или нахождения ошибки по документации, пожалуйста, укажите главу и сопутствующий текст, чтобы указать на ошибку. Our Friends [![](https://orchid.software/img/sponsors/assisted-mindfulness-logo.svg)](https://assisted-mindfulness.com/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) [![](https://orchid.software/img/sponsors/sajya.svg)](https://sajya.github.io/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) [![](https://orchid.software/img/sponsors/laravelsu.png)](https://laravel.su/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) --- # Under the Hood | Orchid - Laravel Admin Panel ![](https://orchid.software/img/next/docs-left-tentacli.svg) ![](https://orchid.software/img/next/docs-right-tentacli.svg) [](https://orchid.software/en/community/background/# "Scroll to the top of the page") Under the Hood ============== [Suggest Edit](https://github.com/orchidsoftware/orchid.software/edit/master/docs/en/community/background.md "View and edit this file on GitHub") * [Orchid Wasn't Built Overnight](https://orchid.software/en/community/background/#orchid-wasnt-built-overnight) * [The Right Tool for the Right Job](https://orchid.software/en/community/background/#the-right-tool-for-the-right-job) * [Simplicity and Maintainability](https://orchid.software/en/community/background/#simplicity-and-maintainability) [Orchid Wasn't Built Overnight](https://orchid.software/en/community/background/#orchid-wasnt-built-overnight) --------------------------------------------------------------------------------------------------------------- While working at an agency, we realized that modern frameworks are great for development but lack a convenient web interface for administration. At the time, some solutions existed, but they were either too complex or cumbersome to use. In 2016, while developing a large travel portal, we saw an opportunity to simultaneously create a Laravel-based CMS that would solve these issues and streamline routine tasks. This led to the first version of the package. Over time, we realized the product was too specialized. In 2017, we removed everything directly related to CMS functionality, leaving only the tools for building UI interfaces. This transformation allowed Orchid to be used for developing any kind of administrative application. Our inspiration came from Microsoft’s approach with Visual Studio LightSwitch, where developers define screens, and the system automatically generates interfaces. This concept shaped Orchid into what it is today. [The Right Tool for the Right Job](https://orchid.software/en/community/background/#the-right-tool-for-the-right-job) ---------------------------------------------------------------------------------------------------------------------- Orchid is designed for building intranet applications (Admin panels, dashboards, LOB applications, etc.). It is not intended for developing websites or marketing landing pages but can be used as an administration panel for them. [Simplicity and Maintainability](https://orchid.software/en/community/background/#simplicity-and-maintainability) ------------------------------------------------------------------------------------------------------------------ Orchid follows a declarative approach to UI design, making it easy to create interfaces without deep knowledge of HTML, CSS, JavaScript, or complex build tools. We want you to write most of your code in PHP, without getting distracted by unnecessary tools or dealing with breaking library updates. This way, you can focus on creating unique value for your users. Achieving this goal requires continuous improvement. We adhere to best practices from established frameworks to keep implementation precise, avoiding unnecessary complexity and code bloat. That’s why we don’t add new features unless they are truly essential for the majority of users. Our Friends [![](https://orchid.software/img/sponsors/assisted-mindfulness-logo.svg)](https://assisted-mindfulness.com/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) [![](https://orchid.software/img/sponsors/sajya.svg)](https://sajya.github.io/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) --- # Reporting Bugs | Orchid - Laravel Admin Panel ![](https://orchid.software/img/next/docs-left-tentacli.svg) ![](https://orchid.software/img/next/docs-right-tentacli.svg) [](https://orchid.software/en/community/bug-report/# "Scroll to the top of the page") Reporting Bugs ============== [Suggest Edit](https://github.com/orchidsoftware/orchid.software/edit/master/docs/en/community/bug-report.md "View and edit this file on GitHub") * [Using the GitHub Issues Tracker](https://orchid.software/en/community/bug-report/#using-the-github-issues-tracker) * [Filing a New Issue](https://orchid.software/en/community/bug-report/#filing-a-new-issue) * [Be Specific in the Summary](https://orchid.software/en/community/bug-report/#be-specific-in-the-summary) * [Avoid Subjective or Ambiguous Language](https://orchid.software/en/community/bug-report/#avoid-subjective-or-ambiguous-language) * [Be Concise, But Explain the Issue](https://orchid.software/en/community/bug-report/#be-concise-but-explain-the-issue) * [Be Prepared to Provide More Information](https://orchid.software/en/community/bug-report/#be-prepared-to-provide-more-information) Thank you for your interest in contributing to the project! Public bug tracking is an essential part of the open development process. To ensure effective bug reporting, please follow the guidelines below: [Using the GitHub Issues Tracker](https://orchid.software/en/community/bug-report/#using-the-github-issues-tracker) -------------------------------------------------------------------------------------------------------------------- We utilize the public issue tracker, [GitHub Issues Tracker](https://github.com/orchidsoftware/platform/issues) , to keep track of current and resolved issues. Before filing a new bug report, it’s advisable to search the issue list to check if your report has already been filed. If you find an existing report for your issue, please add a reaction to indicate that you are also affected. Only provide additional information in the comments if it can help identify the source of the issue. Comments like “I have this problem too” or “This is a really important issue” are not necessary. [Filing a New Issue](https://orchid.software/en/community/bug-report/#filing-a-new-issue) ------------------------------------------------------------------------------------------ If your bug report has not been filed yet, you can proceed to create a new issue. To fill out the “New Issue” page effectively, keep the following points in mind: ### [Be Specific in the Summary](https://orchid.software/en/community/bug-report/#be-specific-in-the-summary) The summary of your bug report will serve as the title in the bug tracker. Make sure it is specific to accurately describe the issue. A specific summary helps developers and bug managers easily search for existing reports and avoids duplicate reports. Avoid vague summaries like “App Not Working” or requests like “Increase Performance.” Instead, use a summary such as “Notification not sent when process finishes.” ### [Avoid Subjective or Ambiguous Language](https://orchid.software/en/community/bug-report/#avoid-subjective-or-ambiguous-language) To increase the chances of having your report confirmed, provide objective details rather than using subjective or ambiguous language. Instead of labeling something as “jarring” or “unintuitive, ” describe what happened and how it contrasts with your expectations. For example, you can say “The Toast suddenly appeared instead of being animated in, ” which provides actionable and objective information about the problem. ### [Be Concise, But Explain the Issue](https://orchid.software/en/community/bug-report/#be-concise-but-explain-the-issue) Bug reports should be written in English, with attention to language and grammar. It is crucial to provide enough information for the developer to reproduce the issue. Include clear and numbered steps to reproduce the bug if necessary. Remember, bug reports aim to gather users facing similar problems to work together towards a solution. While your report may lead to collaboration, do not expect others to solely fix your problem. Use the bug report as a starting point for joint problem-solving efforts. ### [Be Prepared to Provide More Information](https://orchid.software/en/community/bug-report/#be-prepared-to-provide-more-information) Insufficient information in your report may result in it being marked as “Incomplete.” Developers might request specific additional details through comments. Failing to provide the requested information may lead to your report being closed. If you accidentally report your issue against the wrong app, it may be marked as “Invalid.” If the correct app is known, a developer may ask you to re-file the report accordingly. Otherwise, you should find the correct app and re-file the report yourself. For “Wishlist” issues like feature requests, the developer may mark it as “Opinion” or “Won’t Fix.” Remember that developers are often open to discussing these topics, but it is essential to respect their decision and not harass them for marking your report in this way. Thank you for contributing to the project! Your bug reports are invaluable in making our software better for everyone. Our Friends [![](https://orchid.software/img/sponsors/assisted-mindfulness-logo.svg)](https://assisted-mindfulness.com/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) [![](https://orchid.software/img/sponsors/sajya.svg)](https://sajya.github.io/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) --- # Community Guidelines | Orchid - Laravel Admin Panel ![](https://orchid.software/img/next/docs-left-tentacli.svg) ![](https://orchid.software/img/next/docs-right-tentacli.svg) [](https://orchid.software/en/community/code-of-conduct/# "Scroll to the top of the page") Community Guidelines ==================== [Suggest Edit](https://github.com/orchidsoftware/orchid.software/edit/master/docs/en/community/code-of-conduct.md "View and edit this file on GitHub") * [Introduction](https://orchid.software/en/community/code-of-conduct/#introduction) * [Mutual Respect](https://orchid.software/en/community/code-of-conduct/#mutual-respect) * [Content Guidelines](https://orchid.software/en/community/code-of-conduct/#content-guidelines) * [Rumors and Speculation](https://orchid.software/en/community/code-of-conduct/#rumors-and-speculation) * [Meaningful Discussions](https://orchid.software/en/community/code-of-conduct/#meaningful-discussions) * [Conflict Resolution](https://orchid.software/en/community/code-of-conduct/#conflict-resolution) * [Departing with Grace](https://orchid.software/en/community/code-of-conduct/#departing-with-grace) * [Consequences](https://orchid.software/en/community/code-of-conduct/#consequences) [Introduction](https://orchid.software/en/community/code-of-conduct/#introduction) ----------------------------------------------------------------------------------- The Laravel Orchid community offers a remarkable experience where you can collaborate with individuals from around the world, shaping unique computing experiences together. To ensure a comfortable and inclusive environment for all participants, it is essential to adhere to the following rules in all community-related spaces such as GitHub, community resources, face-to-face conversations, and more. [Mutual Respect](https://orchid.software/en/community/code-of-conduct/#mutual-respect) --------------------------------------------------------------------------------------- Being part of the Laravel Orchid community means being part of something big. However, it also comes with the responsibility to respect everyone involved. By following these guidelines, you contribute to an environment where each participant feels valued and included. Whether you are posting online or engaging in a chat, always keep the following rules in mind. [Content Guidelines](https://orchid.software/en/community/code-of-conduct/#content-guidelines) ----------------------------------------------------------------------------------------------- As the Laravel Orchid community encompasses users of different backgrounds, ages, and maturity levels, it is crucial to consider the content you create and the comments you leave. To maintain a positive atmosphere, please refrain from sharing adult materials, using offensive language, discussing political or religious subjects, or sharing any other inappropriate content. Ultimately, the Laravel Orchid moderators have the final say in determining whether content is appropriate. When in doubt, imagine that your audience includes children and elderly individuals from around the world. It is always best to err on the side of caution and abstain from posting potentially inappropriate content. Furthermore, screenshots shared within Laravel Orchid communities should not include themes that imitate other web systems, photos or images targeting specific individuals, or any other content that violates our Code of Conduct. [Rumors and Speculation](https://orchid.software/en/community/code-of-conduct/#rumors-and-speculation) ------------------------------------------------------------------------------------------------------- While the Laravel Orchid community thrives on excitement and constant progress, we kindly request that you refrain from spreading rumors or speculation. Discussing future plans is acceptable, as long as it is clear that they are not confirmed facts but rather speculative ideas. Spreading inaccurate information can be harmful to the community, especially when it is done in a negative manner. [Meaningful Discussions](https://orchid.software/en/community/code-of-conduct/#meaningful-discussions) ------------------------------------------------------------------------------------------------------- Laravel Orchid is the result of the collaborative efforts of many individuals who contribute their free time for a common goal – creating something extraordinary. It is vital to always remember this and actively engage in beneficial and substantial discussions. Whether attending meetings, commenting on blog posts, or participating in discussions over mail or Telegram, please ensure your contributions are directly related to the topics under discussion. Avoid asking unnecessary questions or engaging in conversations that divert attention from the development process. By doing so, you will help maintain the clarity and effectiveness of conversations while respecting the time and effort put into the discussion by everyone involved. As an online community, it is our responsibility to minimize the negative aspects that are often associated with virtual networks. Refrain from engaging in trolling, which includes engaging in verbal skirmishes or making comments with the sole purpose of ridiculing others. Additionally, avoid spamming the community with unrelated links or repeatedly posting the same web page. If you come across a user who is engaging in trolling or spamming, simply ignore them and report their behavior to the moderators. [Conflict Resolution](https://orchid.software/en/community/code-of-conduct/#conflict-resolution) ------------------------------------------------------------------------------------------------- If you encounter someone, whether a newcomer or an established member, who is behaving rudely, we encourage you to politely address the issue. It is crucial to address problems promptly to prevent them from escalating into bigger conflicts. Every community member plays a vital role in ensuring smooth communication in our unique (and sometimes quirky) work environment. [Departing with Grace](https://orchid.software/en/community/code-of-conduct/#departing-with-grace) --------------------------------------------------------------------------------------------------- Priorities, interests, and hobbies change over time. If you are involved in a Laravel Orchid-related project and find yourself needing to step away, please make the transition as seamless as possible for the community. When we collaborate, the fruits of our labor and ideas belong to the Laravel Orchid community as a whole. Inform other team members of your intentions to retire and, if feasible, arrange for someone to continue your work. At the very least, ensure that your work can continue even after you leave. [Consequences](https://orchid.software/en/community/code-of-conduct/#consequences) ----------------------------------------------------------------------------------- Failure to comply with the aforementioned rules of behavior or engaging in behavior that disrupts the community may result in the following consequences: * Content you have published may be changed or deleted. * Your account on third-party websites may be disabled or blocked. * Any other necessary measures may be taken to prevent your further interaction with the community. * * * _Code of Conduct is distributed under the [Creative Commons Attribution-Share Alike 3.0 license](http://creativecommons.org/licenses/by-sa/3.0/) . Some points were inspired by the [Ubuntu Code of Conduct](http://www.ubuntu.com/about/about-ubuntu/conduct) ._ Our Friends [![](https://orchid.software/img/sponsors/assisted-mindfulness-logo.svg)](https://assisted-mindfulness.com/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) [![](https://orchid.software/img/sponsors/sajya.svg)](https://sajya.github.io/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) --- # Contributors | Orchid - Laravel Admin Panel ![](https://orchid.software/img/next/docs-left-tentacli.svg) ![](https://orchid.software/img/next/docs-right-tentacli.svg) [](https://orchid.software/en/community/contributors/# "Scroll to the top of the page") Contributors ============ [Suggest Edit](https://github.com/orchidsoftware/orchid.software/edit/master/docs/en/community/contributors.md "View and edit this file on GitHub") * [Contribute and Collaborate](https://orchid.software/en/community/contributors/#contribute-and-collaborate) * [Writing Effective Bug Reports](https://orchid.software/en/community/contributors/#writing-effective-bug-reports) * [Security Concerns](https://orchid.software/en/community/contributors/#security-concerns) * [Debugging and Submitting Change Requests](https://orchid.software/en/community/contributors/#debugging-and-submitting-change-requests) * [Development Installation](https://orchid.software/en/community/contributors/#development-installation) * [Preparing code for submitting](https://orchid.software/en/community/contributors/#preparing-code-for-submitting) * [Submitting a Change Request](https://orchid.software/en/community/contributors/#submitting-a-change-request) * [Help Translate Orchid into Different Languages!](https://orchid.software/en/community/contributors/#help-translate-orchid-into-different-languages) [Contribute and Collaborate](https://orchid.software/en/community/contributors/#contribute-and-collaborate) ------------------------------------------------------------------------------------------------------------ The Orchid project thrives on community collaboration. We invite you to participate in open discussions, ask questions, and propose ideas in our [GitHub discussions](https://github.com/orchidsoftware/platform/discussions) . Your input can shape the future of Orchid! If you encounter any bugs or have specific feature requests, please check our [issues tracker](https://github.com/orchidsoftware/platform/issues) . You can find unresolved issues and indicate your intention to work on a specific problem by leaving a comment on the relevant task. For active development, we encourage you to use `pull requests` instead of solely reporting bugs. This collaborative approach helps us work together efficiently to resolve issues and enhance Orchid. [![Users who have made significant contributions to Orchid. Alone we can do so little, together we can do so much.](https://opencollective.com/orchid/contributors.svg?width=800&button=false)](https://github.com/orchidsoftware/platform) [Writing Effective Bug Reports](https://orchid.software/en/community/contributors/#writing-effective-bug-reports) ------------------------------------------------------------------------------------------------------------------ When submitting a bug report, it is crucial to provide concise yet comprehensive details. To ensure your report is helpful for developers, make sure they can easily reproduce the issue. Be sure to include step-by-step instructions to replicate the problem. We kindly ask you to report bugs in English, while keeping an eye on your grammar and language usage. Remember, bug reports are meant to encourage collaboration and allow other users with similar issues to participate in finding solutions. While we appreciate your enthusiasm, it’s important to note that others may not be able to immediately drop their work and address your specific problem. Bug reports serve as a starting point for cooperative problem-solving. [Security Concerns](https://orchid.software/en/community/contributors/#security-concerns) ------------------------------------------------------------------------------------------ If you discover any security vulnerabilities within the platform, please promptly send an email to `bliz48rus@gmail.com`. We take all security concerns seriously and will promptly address them. [Debugging and Submitting Change Requests](https://orchid.software/en/community/contributors/#debugging-and-submitting-change-requests) ---------------------------------------------------------------------------------------------------------------------------------------- When contributing to the project, you might encounter issues related to debugging and installation. This section aims to assist you in submitting your first change request. ### [Development Installation](https://orchid.software/en/community/contributors/#development-installation) To install the Laravel Orchid package as a developer, you’ll need to have a Laravel framework installation. > Before making changes, fork the [GitHub repository](https://github.com/orchidsoftware/platform) > and create a clone of it. Navigate to the root directory of your fresh Laravel installation and execute the following command: git clone https://github.com/yourname/platform.git Next, add a local repository to the `composer.json` file of your Laravel project to point the Orchid platform to your locally cloned fork: "repositories": [\ {\ "type": "path",\ "url": "./platform"\ }\ ] Lastly, include our package by executing the following command: composer require orchid/platform:@dev Composer will add the package from the repository you specified. Follow the rest of the installation instructions in the “Installation” section. To collect JavaScript and CSS resources and apply them immediately, use the following command: npm run dev --prefix platform && php artisan orchid:publish ### [Preparing code for submitting](https://orchid.software/en/community/contributors/#preparing-code-for-submitting) First you need to check the code style ([Laravel Pint](https://laravel.com/docs/10.x/pint) is used for this) Run check and fix: ./vendor/bin/pint Run on specific files or directories: ./vendor/bin/pint src/Platform ./vendor/bin/pint src/Platform/Dashboard.php Next you need to check the execution of unit tests: ./vendor/bin/phpunit ### [Submitting a Change Request](https://orchid.software/en/community/contributors/#submitting-a-change-request) Create a new branch that indicates the added functionality or fixes the issue. Use the following command: git checkout -b feature/issue_001 This branch name will signify that you’re addressing a specific functionality related to message number 001. Make your changes and commit them: git commit -am 'ref #001 [Docs] Fix typo' To submit your branch for review, execute the following command: git push origin feature/issue_001 [Help Translate Orchid into Different Languages!](https://orchid.software/en/community/contributors/#help-translate-orchid-into-different-languages) ----------------------------------------------------------------------------------------------------------------------------------------------------- We appreciate your contributions in translating Orchid into multiple languages. Visit the [Make Orchid (more) International](https://github.com/orchidsoftware/platform/discussions/1545) conversation on the Discussion tab for more details. Translation files can be found in the [resources/lang](https://github.com/orchidsoftware/platform/tree/master/resources/lang) directory. To begin translating, follow the steps outlined in the “Development Installation” section to create a development installation. Create a new branch for your translation: git checkout -b feature/translation_nl Copy one of the existing JSON files from the [resources/lang](https://github.com/orchidsoftware/platform/tree/master/resources/lang) directory and name your file according to the codes mentioned in the [List of ISO\_639–1 codes](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) page. Once you’ve completed the translation, submit it as a change request following the instructions mentioned earlier. We appreciate your dedication to making Orchid accessible to a broader audience. Your translations will help us reach more users around the world. We hope this detailed documentation helps you contribute effectively and participate in the growth of Orchid. We value your time and effort in making Orchid better and more user-friendly. Thank you for being part of our community! Our Friends [![](https://orchid.software/img/sponsors/assisted-mindfulness-logo.svg)](https://assisted-mindfulness.com/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) [![](https://orchid.software/img/sponsors/sajya.svg)](https://sajya.github.io/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) --- # The MIT License (MIT) | Orchid - Laravel Admin Panel ![](https://orchid.software/img/next/docs-left-tentacli.svg) ![](https://orchid.software/img/next/docs-right-tentacli.svg) [](https://orchid.software/en/community/license/# "Scroll to the top of the page") The MIT License (MIT) ===================== [Suggest Edit](https://github.com/orchidsoftware/orchid.software/edit/master/docs/en/community/license.md "View and edit this file on GitHub") * [MIT License](https://orchid.software/en/community/license/#mit-license) * [Quick Summary](https://orchid.software/en/community/license/#quick-summary) * [Can](https://orchid.software/en/community/license/#can) * [Cannot](https://orchid.software/en/community/license/#cannot) * [Must](https://orchid.software/en/community/license/#must) [MIT License](https://orchid.software/en/community/license/#mit-license) ------------------------------------------------------------------------- Copyright © Chernyaev Alexandr Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. * * * [Quick Summary](https://orchid.software/en/community/license/#quick-summary) ----------------------------------------------------------------------------- ### [Can](https://orchid.software/en/community/license/#can) * You may use the work commercially. * You may make changes to the work. * You may distribute the compiled code and/or source. * You may incorporate the work into something that has a more restrictive license. * You may use the work for private use. ### [Cannot](https://orchid.software/en/community/license/#cannot) * The work is provided “as is”. You may not hold the author liable. ### [Must](https://orchid.software/en/community/license/#must) * You must include the copyright notice in all copies or substantial uses of the work. * You must include the license notice in all copies or substantial uses of the work. Our Friends [![](https://orchid.software/img/sponsors/assisted-mindfulness-logo.svg)](https://assisted-mindfulness.com/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) [![](https://orchid.software/img/sponsors/sajya.svg)](https://sajya.github.io/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) --- # Promote | Orchid - Laravel Admin Panel ![](https://orchid.software/img/next/docs-left-tentacli.svg) ![](https://orchid.software/img/next/docs-right-tentacli.svg) [](https://orchid.software/en/community/promote/# "Scroll to the top of the page") Promote ======= [Suggest Edit](https://github.com/orchidsoftware/orchid.software/edit/master/docs/en/community/promote.md "View and edit this file on GitHub") * [Help Improve the Website](https://orchid.software/en/community/promote/#help-improve-the-website) * [Utilize Your Graphic Skills](https://orchid.software/en/community/promote/#utilize-your-graphic-skills) * [Support Your Fellow Users](https://orchid.software/en/community/promote/#support-your-fellow-users) * [Spread the Word!](https://orchid.software/en/community/promote/#spread-the-word) * [Sponsor the Development](https://orchid.software/en/community/promote/#sponsor-the-development) * [Backers](https://orchid.software/en/community/promote/#backers) We greatly appreciate your interest in contributing to the growth and promotion of Laravel Orchid. Even if you don’t possess technical or programming skills, there are numerous ways you can still make a meaningful impact: [Help Improve the Website](https://orchid.software/en/community/promote/#help-improve-the-website) --------------------------------------------------------------------------------------------------- We always welcome assistance in enhancing our website. While a basic knowledge of HTML is required, you don’t need to be an expert in web development. By cloning the site from our Git repository and submitting your changes, you can actively contribute to making our website more polished and user-friendly. [Utilize Your Graphic Skills](https://orchid.software/en/community/promote/#utilize-your-graphic-skills) --------------------------------------------------------------------------------------------------------- If you have graphic design skills, your talents can greatly benefit the entire Laravel Orchid community. There are several ways you can contribute: * **Create new icon sets:** Develop unique icon sets that align with the vision of Laravel Orchid. Once you’ve created them, you can add them to the appropriate repository and make them available to the entire community. * **Revamp the user interface:** Have an idea for a better design or an entire user interface overhaul? We’re open to experimentation! Share your concepts and let’s work together to create an exceptional user experience. [Support Your Fellow Users](https://orchid.software/en/community/promote/#support-your-fellow-users) ----------------------------------------------------------------------------------------------------- At Laravel Orchid, fostering a strong and supportive community is a top priority. You can directly contribute to this goal by providing assistance to other users. Here are some ways you can help: * **Create tutorials:** Regardless of your expertise level, we welcome tutorials from beginners to advanced users. Cover a range of topics, including introductory Laravel Orchid content or even more specialized development topics like creating your own extensions. * **Engage in forums:** Join the discussions where users ask questions, provide helpful answers, and troubleshoot issues. Share tips, tricks, and best practices. Participate in sweepstakes or contests to showcase your skills, and also expand your network by making new friends along the way. [Spread the Word!](https://orchid.software/en/community/promote/#spread-the-word) ---------------------------------------------------------------------------------- To ensure our community remains friendly, helpful, and polite, it’s crucial that we all encourage positive behavior. Here’s how you can help promote Laravel Orchid: * **Write articles about Laravel Orchid:** Share your insights and experiences by publishing articles in online magazines, blogs, or even print publications. Don’t forget to include the current link or URL for easy reference. * **Capture screenshots:** If you’re aware of a new feature under development, consider creating one or more screenshots to illustrate its functionality. Visual representations can greatly benefit users and attract more attention to our project. * **Bring in more developers:** If you come across individuals with programming skills, introduce them to the Laravel Orchid community. Ask if they might be interested in contributing to the development of Laravel Orchid. Increasing our developer base will ensure the project’s continued growth and success. [Sponsor the Development](https://orchid.software/en/community/promote/#sponsor-the-development) ------------------------------------------------------------------------------------------------- If you run a business and utilize Laravel Orchid in a revenue-generating product, consider sponsoring the development. By doing so, you contribute to the health and continuous support of the project upon which your product relies. Additionally, this investment can provide you with valuable insights into the Laravel Orchid community, making it easier to engage developers. If you’re an individual user who appreciates the product, you can also show your support by donating as a token of your appreciation, such as occasionally buying us a coffee ☕️. [Backers](https://orchid.software/en/community/promote/#backers) ----------------------------------------------------------------- We extend our heartfelt gratitude to all our backers! Your support means the world to us. If you’d like to become a backer, please visit our [Open Collective page](https://opencollective.com/orchid#backer) . ![Backers](https://opencollective.com/orchid/backers.svg?width=780) Thank you for considering how you can contribute to the Laravel Orchid community. Together, we can create an exceptional experience for all users and continue to grow our vibrant community. Our Friends [![](https://orchid.software/img/sponsors/assisted-mindfulness-logo.svg)](https://assisted-mindfulness.com/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) [![](https://orchid.software/img/sponsors/sajya.svg)](https://sajya.github.io/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) --- # Connect with the Orchid Community | Orchid - Laravel Admin Panel ![](https://orchid.software/img/next/docs-left-tentacli.svg) Discussions =========== Join our user groups, where community members have created vibrant and interactive spaces for discussions. Don't hesitate to actively participate and feel free to share your thoughts, ask questions, or even engage in some friendly banter or "flud" with fellow Orchid enthusiasts. #### GitHub For questions or in-depth discussions, we recommend utilizing the power of GitHub. It allows you to publicly reference the conversation history and track progress with all participants. Create [issues](https://github.com/orchidsoftware/platform/issues) to report problems or participate in [discussions](https://github.com/orchidsoftware/platform/discussions) to ask questions, share ideas, and give opinions. ##### \+ Community Groups * [Telegram](https://t.me/orchid_community) * [Discord](https://discord.gg/NxXhSHa5tq) Locale groups * [Telegram Russian Community](https://t.me/orchid_russian_community) * [Telegram Spanish Community](https://t.me/esLaravelOrchid) ![](https://orchid.software/img/next/feature3.svg) Some great topics: ![Arkokeando](https://github.com/Arkokeando.png) ###### Arkokeando Paginate table records. ![m-pastuszek](https://github.com/m-pastuszek.png) ###### m-pastuszek Relation `fromModel` custom name ![Muratcol](https://github.com/Muratcol.png) ###### Muratcol How can I make a newly created controller available for public access? [New Issue](https://github.com/orchidsoftware/platform/issues) [New Discussion](https://github.com/orgs/orchidsoftware/discussions) --- # Permissions | Orchid - Laravel Admin Panel ![](https://orchid.software/img/next/docs-left-tentacli.svg) ![](https://orchid.software/img/next/docs-right-tentacli.svg) [](https://orchid.software/en/docs/access/# "Scroll to the top of the page") Page Moved ========== This page has been moved to a new address. If you were not automatically redirected, please click the button below to go to the new location. [Go to the new address](https://orchid.software/en/docs/permissions) Our Friends [![](https://orchid.software/img/sponsors/assisted-mindfulness-logo.svg)](https://assisted-mindfulness.com/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) [![](https://orchid.software/img/sponsors/sajya.svg)](https://sajya.github.io/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) --- # Notifications | Orchid - Laravel Admin Panel ![](https://orchid.software/img/next/docs-left-tentacli.svg) ![](https://orchid.software/img/next/docs-right-tentacli.svg) [](https://orchid.software/en/docs/alert/# "Scroll to the top of the page") Notifications ============= [Suggest Edit](https://github.com/orchidsoftware/orchid.software/edit/master/docs/en/docs/alert.md "View and edit this file on GitHub") * [Flash Messages](https://orchid.software/en/docs/alert/#flash-messages) * [Alert Messages](https://orchid.software/en/docs/alert/#alert-messages) * [Toast Messages](https://orchid.software/en/docs/alert/#toast-messages) * [Persistent Notification](https://orchid.software/en/docs/alert/#persistent-notification) **Notifications** are a powerful tool that allows you to keep your users informed and engaged with your app. They can be used to alert users of important events, such as the completion of a long process or the arrival of a new message. In this guide, we will show you how to use notifications in your app using Laravel Orchid. > Please take a moment to [review our recommendations for providing feedback](https://orchid.software/en/hig/providing-feedback) > to ensure that your application looks exceptional. [Flash Messages](https://orchid.software/en/docs/alert/#flash-messages) ------------------------------------------------------------------------ A flash notification is a one-time message that is automatically deleted after the user views it. Designed to inform the user of a recent event—such as the successful saving of data—flash notifications provide quick, concise feedback without cluttering the interface. If you need to retain notification data, consider using persistent notifications instead. ### [Alert Messages](https://orchid.software/en/docs/alert/#alert-messages) To create a flash notification, you can use the following code: use Orchid\Support\Facades\Alert; Alert::message('Welcome Aboard!'); You can also use a shorter version of this code: alert('Your action has been completed.'); In addition to displaying a message, Laravel Orchid also allows you to visually indicate the type of notification using different colors. You can do this using the following methods: Alert::info('Welcome to our website!'); Alert::success('Your message has been sent.'); Alert::error('Please fill in all required fields.'); Alert::warning('Your account will be permanently deleted.'); If you want to prevent the automatic escaping of data in your alerts, you can use the `withoutEscaping` method. By default, data passed to the alert is escaped to prevent XSS attacks. Calling this method will disable that behavior: use Orchid\Support\Facades\Alert; Alert::info('This is bold text.') ->withoutEscaping(); This will render the HTML content in the message without escaping it. If you want to use a custom template for your notifications, you can use the `view` method. This method takes three arguments: the path/name of the `Blade` template, the color of the notification, and an array of variables to be passed to the template: use Orchid\Support\Facades\Alert; use Orchid\Support\Color; Alert::view('alert', Color::INFO(), [\ 'name' => 'Alexandr'\ ]); The `Blade` template would look like this: {{-- resources/views/alert.blade.php --}} Hello {{ $name }} ### [Toast Messages](https://orchid.software/en/docs/alert/#toast-messages) Toast messages are small pop-up notifications that appear in the upper right corner of the screen. They are designed to briefly notify the user of the result of an action or event, such as the successful completion of a task. Toast messages are similar to flash notifications, but have a different appearance and a few additional features. To create a toast message, you can use the following code: use Orchid\Support\Facades\Toast; Toast::warning('Invalid input. Please check your form.'); One of the additional features of toast messages is the ability to specify whether the message should automatically hide after a certain period of time. By default, toast messages will automatically hide after a few seconds, but you can disable this behavior by using the `persistent` method: Toast::warning('Invalid input. Please check your form.') ->persistent(); To re-enable auto-hide, simply call the `autoHide` method again. You can also specify the delay in milliseconds before hiding the toast message by using the `delay` method. This method takes one argument, which is the number of milliseconds to wait before hiding the message: Toast::warning('Invalid input. Please check your form.') ->delay(2000); The `seconds` method allows you to set the delay before hiding the toast message, but in seconds instead of milliseconds. This makes it easier to configure the delay in a more human-readable format: Toast::info('Your data has been saved!') ->seconds(5); // 5 seconds delay before hiding If you want to prevent the automatic escaping of data in your toasts, you can use the `withoutEscaping` method. By default, data passed to the toast is escaped to prevent XSS attacks. Calling this method will disable that behavior: use Orchid\Support\Facades\Toast; Toast::info('This is bold text.') ->withoutEscaping(); This will render the HTML content in the message without escaping it. [Persistent Notification](https://orchid.software/en/docs/alert/#persistent-notification) ------------------------------------------------------------------------------------------ Persistent notification are different from flash messages, they are not deleted after being viewed and can be sent to users even when they are offline. They are an excellent way to inform, for example, for a task manager application to notify an employee about a new task. You can view these notifications by clicking the “Notification Bell icon” in the application navigation bar. If there are unread notifications, a counter will be displayed. Before using this feature, it’s important to check out the [Laravel notification documentation](https://laravel.com/docs/notifications) as it provides more details and examples on how to use this feature. To send a notification, you can simply pass a `DashboardMessage` instance to a user’s `notify` method. Before proceeding, ensure that your user model implements the `Notifiable` trait: use Orchid\Platform\Notifications\DashboardMessage; use Orchid\Support\Color; $user->notify(DashboardMessage::make() ->title('New Task: January Report') ->message('Please review the task details and deadline.') ->action('https://example.com/reports/january') ->type(Color::INFO) ); You can also create a custom notification class using the following Artisan command: php artisan make:notification TaskCompleted This command will create a new class in your `app/Notifications` directory. To send the notification, you must add the `DashboardChannel` to the `via` notification method: use Orchid\Platform\Notifications\DashboardChannel; public function via($notifiable) { return [\ DashboardChannel::class\ ]; } Before sending the notification, you must also define a `toDashboard` method in the notification class. This method will receive a `$notifiable` object and must return a `DashboardMessage` object: use Orchid\Platform\Notifications\DashboardMessage; public function toDashboard($notifiable) { return (new DashboardMessage) ->title('New Task: January Report') ->message('Please review the task details and deadline.') ->action(url('/')); } Notifications can be sent in two ways: by using the `notify` method in the `Notifiable` trait or by using the `Notification` facade. You can take a look at [Laravel Notification Documentation](https://laravel.com/docs/notifications#sending-notifications) to learn more about these two approaches to sending notifications. Here is an example of how to send notifications to a user using the 'notify’ method: $user = User::find(1); $user->notify(new TaskCompleted); Our Friends [![](https://orchid.software/img/sponsors/assisted-mindfulness-logo.svg)](https://assisted-mindfulness.com/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) [![](https://orchid.software/img/sponsors/sajya.svg)](https://sajya.github.io/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) --- # Attachments | Orchid - Laravel Admin Panel ![](https://orchid.software/img/next/docs-left-tentacli.svg) ![](https://orchid.software/img/next/docs-right-tentacli.svg) [](https://orchid.software/en/docs/attachments/# "Scroll to the top of the page") Attachments =========== [Suggest Edit](https://github.com/orchidsoftware/orchid.software/edit/master/docs/en/docs/attachments.md "View and edit this file on GitHub") * [Attachments](https://orchid.software/en/docs/attachments/#attachments) * [Uploading a File via HTTP](https://orchid.software/en/docs/attachments/#uploading-a-file-via-http) * [Uploading a File via the Console](https://orchid.software/en/docs/attachments/#uploading-a-file-via-the-console) * [Duplicate Uploaded Files](https://orchid.software/en/docs/attachments/#duplicate-uploaded-files) * [Allowing Duplicate Files](https://orchid.software/en/docs/attachments/#allowing-duplicate-files) * [Customizing the Upload Path](https://orchid.software/en/docs/attachments/#customizing-the-upload-path) * [Remove](https://orchid.software/en/docs/attachments/#remove) * [Default Configuration](https://orchid.software/en/docs/attachments/#default-configuration) * [Optimizing Images](https://orchid.software/en/docs/attachments/#optimizing-images) * [Event Subscription](https://orchid.software/en/docs/attachments/#event-subscription) [Attachments](https://orchid.software/en/docs/attachments/#attachments) ------------------------------------------------------------------------ Attachments are files of various formats and extensions that are related to a specific record. They can be attached to any model in your application by adding the `Attachable` trait to the model and using the `attachments()` relationship. For example, to attach files to a `Hostel` model: namespace App; use Illuminate\Database\Eloquent\Model; use Orchid\Attachment\Attachable; class Hostel extends Model { use Attachable; // } To retrieve the attachments for a particular hostel, you can use the `attachments()` relationship: $item = Hostel::find(42); $item->attachments()->get(); [Uploading a File via HTTP](https://orchid.software/en/docs/attachments/#uploading-a-file-via-http) ---------------------------------------------------------------------------------------------------- To upload a file via HTTP, you can use the `File` class and the `load()` method. Here’s an example of a controller method that handles file uploads: use Orchid\Attachment\File; public function upload(Request $request) { $file = new File($request->file('photo')); $attachment = $file->load(); return response()->json($attachment); } This will automatically upload the file to the default repository (usually `public`) and create an entry in the database. To retrieve the URL of an attachment, you can use the `url()` method: $image = $item->attachments()->first(); // Get the URL of the file $image->url(); > **Note.** The `url()` method will first check for the path existence, and then get the URL. When using external storage like `s3`, this will make two calls. To improve performance you can use the [caching adapter](https://laravel.com/docs/filesystem#driver-prerequisites) > recommended by `Laravel` to improve performance. You can also simply override this method and adjust to your needs. [Uploading a File via the Console](https://orchid.software/en/docs/attachments/#uploading-a-file-via-the-console) ------------------------------------------------------------------------------------------------------------------ Sometimes the necessary files are already on the server, and you can use the following code to upload them to the desired storage: use Illuminate\Http\UploadedFile; use Orchid\Attachment\File; $file = new UploadedFile($path, $originalName); $attachment = (new File($file))->load(); [Duplicate Uploaded Files](https://orchid.software/en/docs/attachments/#duplicate-uploaded-files) -------------------------------------------------------------------------------------------------- To prevent unnecessary duplication and save resources, Laravel Orchid uses a hashing algorithm to check for existing files before uploading a new attachment. If a file with the same hash already exists in storage, a link to the existing file is created in the database instead of uploading a duplicate copy. This allows for efficient storage and management of attachments. The file will only be deleted from storage when all links to it are destroyed. This means that if multiple records are associated with the same attachment, the file will not be deleted until all records are deleted or the attachment is removed from all of them. This feature not only improves the performance and reduces the storage space, but also eliminates the chance of having multiple copies of the same file in the storage. ### [Allowing Duplicate Files](https://orchid.software/en/docs/attachments/#allowing-duplicate-files) While the hashing algorithm in Laravel Orchid is designed to prevent the duplication of files, in some cases, you may want to keep duplicate files and generate different links to request different physical files. To do this, you can use the `allowDuplicates()` method. use Orchid\Attachment\File; public function upload(Request $request) { $file = new File($request->file('photo')); $attachment = $file->allowDuplicates()->load(); return response()->json() } Keep in mind that allowing duplicate files may increase storage usage and affect your application’s performance. Therefore, it should be used with caution and only when necessary. [Customizing the Upload Path](https://orchid.software/en/docs/attachments/#customizing-the-upload-path) -------------------------------------------------------------------------------------------------------- By default, Laravel Orchid uses a default upload path for all files of `Y/m/d`, for example: `2022/06/11`. This path is used to organize and structure the uploaded files in the storage. However, you may want to customize the path to suit your specific needs. You can change the default path by using the `path(string $path)` method: use Orchid\Attachment\File; public function upload(Request $request) { $path = "photos" $file = new File($request->file('photo')); $attachment = $file->path($path)->load(); return response()->json() } In this example, the `path()` method is used to set the path to `photos` before loading the file. This will change the default path and all files will be uploaded to the `photos` folder. You can also use dynamic parameters like `path('photos/'.$user->id)` or `path('photos/'.$file->name)` to create specific folders for each user or file type. [Remove](https://orchid.software/en/docs/attachments/#remove) -------------------------------------------------------------- Attachments won’t be removed after model removal automatically. In case when your attachments can’t exist without a model, you should remove them on model `deleting` events manually. If you delete a row from the `attachments` table, the file won’t be deleted. To clear your attachments, you need to use `delete()` function on the `Attachment` model. In that case, an additional check will proceed. If there no link to the file – it will be deleted. You can do it using [relationships](https://laravel.com/docs/master/eloquent-relationships) and [observers](https://laravel.com/docs/master/eloquent#observers) . Let’s come back to our example with `hero` relation from [“Manage file attachments”](https://orchid.software/en/docs/quickstart-files) // app/Post.php use Orchid\Attachment\Models\Attachment; public function hero() { return $this->hasOne(Attachment::class, 'id', 'hero') ->withDefault(); } If you call your relation like function `$post->hero()` it will return `Illuminate\Database\Eloquent\Builder` class, that also has `delete()` function. But, it will execute sql query. If you call your relation like attribute `$post->hero` it will return model class. `Attachment` model class. $post->hero()->delete(); > **Note.** You should build your relation using `withDefault()` function to avoid the null pointer exception. Let’s generate [observer](https://laravel.com/docs/master/eloquent#observers) for our example model. php artisan make:observer PostObserver In PostObserver we create `deleting` function public function deleting(Post $post) { $post->hero()->delete(); } When you have multiple attachments, you should use `attachments` relation from the `Attachable` trait. public function deleting(Post $post) { //load attachments as collection and not query attachments() $post->attachments->each->delete(); } > **Note.** An experienced Laravel developer will see that there is an `N+1` problem here. It is intentionally done to access the filesystem to delete a file (The database won’t do it for us). Subscribe example model to the observer in `AppServiceProvider` public function boot() { // ... Post::observe(PostObserver::class); } Occasionally, users may upload image files without properly establishing a relationship with them. These models and files may end up remaining in the system indefinitely, taking up valuable storage space. To address this issue, you can create a console command that clears out any unassociated image files on a set schedule. For example, you might schedule the command to run once a week or once a month, depending on the frequency of uploads and the amount of storage space available. namespace App\Console\Commands; use Illuminate\Console\Command; use Orchid\Attachment\Models\Attachment; class AttachmentClear extends Command { /** * The name and signature of the console command. */ protected $signature = 'attachment:clear'; /** * The console command description. */ protected $description = 'Remove dont relation attachment'; /** * Execute the console command. * * @return int */ public function handle() { $unrelatedAttachments = Attachment::doesntHave('relationships') ->whereDate('created_at', '<', now()->subDays(2)) ->get(); $unrelatedAttachments->each->delete(); return Command::SUCCESS; } } [Default Configuration](https://orchid.software/en/docs/attachments/#default-configuration) -------------------------------------------------------------------------------------------- When you upload files using Laravel Orchid, the package uses a default configuration that is defined in the `config/platform.php` file. This configuration specifies the disk and generator that will be used to handle the files. /* |------------------------------------------------------------------ | Default configuration for attachments. |------------------------------------------------------------------ | | Strategy properties for the file and storage used. | */ 'attachment' => [\ 'disk' => 'public',\ 'generator' => \Orchid\Attachment\Engines\Generator::class,\ ], * **disk** – The name of the storage disk that will be used to store the files. The disk should be defined in the `/config/filesystems.php` file. * **generator** – The generator class that defines how the files will be named, where they will be located in the storage, and how to avoid duplicating them. By default, Orchid uses the `\Orchid\Attachment\Engines\Generator` class, which uses a hash of the file’s contents to avoid duplicating files. You can modify these settings to suit your needs, for example, you can change the disk and generator to customize the way files are handled and stored. [Optimizing Images](https://orchid.software/en/docs/attachments/#optimizing-images) ------------------------------------------------------------------------------------ Optimizing images can be an important step in improving the performance and user experience of your application. However, it is important to be mindful of how and when images are optimized. Modifying the original images can lead to a loss of quality, especially if the images are modified multiple times with different resolutions or quality settings. One way to optimize images on demand is to use a third-party package such as [https://github.com/Intervention/image](https://github.com/Intervention/image) or its alternatives. This approach allows you to optimize images only when necessary and keep the original images in their original quality, which can be useful in situations where the image requirements change over time or if you want to keep the original image for other purposes. [Event Subscription](https://orchid.software/en/docs/attachments/#event-subscription) -------------------------------------------------------------------------------------- Orchid allows you to subscribe to event that are triggered when a file is uploaded. This feature enables you to execute additional tasks like video compression, image optimization, or other file processing operations. To subscribe to an event, you can use [Laravel’s event listening mechanism](https://laravel.com/docs/11.x/events#defining-listeners) . In the example below, an anonymous function is registered to listen for the `UploadFileEvent`: use Orchid\Platform\Events\UploadFileEvent; use Illuminate\Support\Facades\Event; /** * Bootstrap any application services. */ public function boot(): void { Event::listen(function (UploadFileEvent $event) { // Your logic here to handle the event // $event->attachment // $event->time }); } When the `UploadFileEvent` is triggered, the anonymous function registered with `Event::listen` will be called. Inside this function, you can define your logic to handle the event, such as processing the uploaded file, performing validations, or triggering additional actions. Our Friends [![](https://orchid.software/img/sponsors/assisted-mindfulness-logo.svg)](https://assisted-mindfulness.com/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) [![](https://orchid.software/img/sponsors/sajya.svg)](https://sajya.github.io/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) --- # Authentication | Orchid - Laravel Admin Panel ![](https://orchid.software/img/next/docs-left-tentacli.svg) ![](https://orchid.software/img/next/docs-right-tentacli.svg) [](https://orchid.software/en/docs/authentication/# "Scroll to the top of the page") Authentication ============== [Suggest Edit](https://github.com/orchidsoftware/orchid.software/edit/master/docs/en/docs/authentication.md "View and edit this file on GitHub") * [Guard](https://orchid.software/en/docs/authentication/#guard) * [Customizing the Authentication Process](https://orchid.software/en/docs/authentication/#customizing-the-authentication-process) [Guard](https://orchid.software/en/docs/authentication/#guard) --------------------------------------------------------------- Orchid provides support for different types of users (e.g. customers and sellers) who have their own authentication portals. To configure Orchid to work with a specific type of user, you can change the value of the `guard` option in the `config/platform.php` configuration file: 'guard' => 'sellers', Keep in mind that the value of `guard` must be one of the authentication guards listed in Laravel’s [authentication configuration](https://github.com/laravel/laravel/blob/9.x/config/auth.php) . [Customizing the Authentication Process](https://orchid.software/en/docs/authentication/#customizing-the-authentication-process) --------------------------------------------------------------------------------------------------------------------------------- The package does not provide any specific implementation of user authentication. The needs of different applications can vary significantly, from using email or phone numbers for authentication to sending one-time passwords by email. To customize the authentication process, you can write your own controllers following the guidelines in the [Laravel documentation](https://laravel.com/docs/authentication) . Before doing so, it is recommended to disable the built-in login page provided by Orchid. To do this, set the auth option in the config/platform.php configuration file to `false`: 'auth' => false, This will remove the availability of the built-in authorization routes and allow you to write your own > **Note:** The built-in login page provided by Orchid has only the most basic functionality, with email and password fields. If you need more advanced features such as password recovery, registration, and 2FA with time-based one-time password algorithms, consider using the [Fortify theme](https://github.com/orchidsoftware/fortify) > , which is based on [Laravel Fortify](https://laravel.com/docs/fortify) > . Our Friends [![](https://orchid.software/img/sponsors/assisted-mindfulness-logo.svg)](https://assisted-mindfulness.com/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) [![](https://orchid.software/img/sponsors/sajya.svg)](https://sajya.github.io/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) --- # Branding | Orchid - Laravel Admin Panel ![](https://orchid.software/img/next/docs-left-tentacli.svg) ![](https://orchid.software/img/next/docs-right-tentacli.svg) [](https://orchid.software/en/docs/brand/# "Scroll to the top of the page") Branding ======== [Suggest Edit](https://github.com/orchidsoftware/orchid.software/edit/master/docs/en/docs/brand.md "View and edit this file on GitHub") There are times when you want the visual style of the platform to match your brand. After installation, two settings are provided that are located in `config/platform.php`: 'template' => [\ 'header' => null,\ 'footer' => null,\ ], To change the page header or footer, you must specify your own `blade` templates. [Change Logo and Name](https://orchid.software/en/docs/brand/#change-logo-and-name) ------------------------------------------------------------------------------------ Create a new directory in the `brand` template section and the `header.blade.php` file. Then the full path will look like `/resources/views/brand/header.blade.php`. resources └── views └── brand └── header.blade.php Make changes to the file just created: @push('head') @endpush
@auth @endauth

{{ config('app.name') }}

In order for the created template to be used instead of the standard one, you must specify it in the configuration file, just as if passing an argument in the `view('brand.header')` helper: 'template' => [\ 'header' => 'brand.header',\ 'footer' => null,\ ], > **Note.** The configuration file may be cached, and the changes will not take effect until the `php artisan config:clear` command is executed In the same way, we can change the bottom of the page, again create a new file `/resources/views/brand/footer.blade.php` with the following contents:

© Copyright {{date('Y')}} {{ config('app.name') }}

Also making changes to the configuration file: 'template' => [\ 'header' => 'brand.header',\ 'footer' => 'brand.footer',\ ], > **Note**. If you want the text or images to be different for the login and panel pages, you can use [Authentication Directives](https://laravel.com/docs/blade#authentication-directives) > . Our Friends [![](https://orchid.software/img/sponsors/assisted-mindfulness-logo.svg)](https://assisted-mindfulness.com/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) [![](https://orchid.software/img/sponsors/sajya.svg)](https://sajya.github.io/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) --- # Form Builder | Orchid - Laravel Admin Panel ![](https://orchid.software/img/next/docs-left-tentacli.svg) ![](https://orchid.software/img/next/docs-right-tentacli.svg) [](https://orchid.software/en/docs/builder/# "Scroll to the top of the page") Form Builder ============ [Suggest Edit](https://github.com/orchidsoftware/orchid.software/edit/master/docs/en/docs/builder.md "View and edit this file on GitHub") * [Introduction](https://orchid.software/en/docs/builder/#introduction) * [Data Binding](https://orchid.software/en/docs/builder/#data-binding) * [Creating a Field](https://orchid.software/en/docs/builder/#creating-a-field) [Introduction](https://orchid.software/en/docs/builder/#introduction) ---------------------------------------------------------------------- Describing form fields can be a challenging task, but with `Orchid\Screen\Builder`, you can easily modify and reuse form fields using a single builder that generates `HTML` code. To build a form, you need to provide the field definitions and possibly a data source: use Orchid\Screen\Builder; use Orchid\Screen\Fields\Input; // Initialize the form builder with the field definitions $builder = new Builder([\ Input::make('name'),\ ]); // Generate HTML code for the form $html = $builder->generateForm(); [Data Binding](https://orchid.software/en/docs/builder/#data-binding) ---------------------------------------------------------------------- To specify the value of an element, you must specify the data source. By providing the specified key, the data will automatically replace the corresponding field. For example: use Orchid\Screen\Builder; use Orchid\Screen\Fields\Input; use Orchid\Screen\Repository; $fields = [\ Input::make('name'),\ ]; $repository = new Repository([\ 'name' => 'Alexandr Chernyaev',\ ]); $builder = new Builder($fields, $repository); $html = $builder->generateForm(); It is also possible to access nested objects using `dot`\-notation. $fields = [\ Input::make('name.ru'),\ ]; $repository = new Repository([\ 'name' => [\ 'en' => 'Alexandr Chernyaev',\ 'ru' => 'Александр Черняев',\ ],\ ]); $builder = new Builder($fields, $repository); $html = $builder->generateForm(); You can also set the desired language and prefix using the `setLanguage` method: $fields = [\ Input::make('name'),\ ]; $repository = new Repository([\ 'en' => [\ 'name' => 'Alexandr Chernyaev',\ ],\ 'ru' => [\ 'name' => 'Александр Черняев',\ ]\ ]); $builder = new Builder($fields, $repository); $builder->setLanguage('en'); $html = $builder->generateForm(); [Creating a Field](https://orchid.software/en/docs/builder/#creating-a-field) ------------------------------------------------------------------------------ Every field is just a setting above the view that passes data to the template. Here is an example of how to create custom input fields by using the `Field` class. namespace App\Orchid\Fields; use Orchid\Screen\Field; class CustomField extends Field { /** * Blade template * * @var string */ protected $view = ''; /** * Default attributes value. * * @var array */ protected $attributes = []; /** * Attributes available for a particular tag. * * @var array */ protected $inlineAttributes = []; } The `view` property is determined by the blade. `attributes` lists default values, and `inlineAttributes` define keys in html format, for example: First name:
In this example, the inline attribute is type and name specified directly in the tag. And the `make()` method is only for quick and convenient initialization, since any form that should add or modify data must possess it. We only update that the created class and add the blade template, using the example above: {{ $title }}:
In order to try a new field, you must use the built-in `render()` method: $input = CustomField::make('name'); $html = $input->render(); // html string The `html` variable will contain the template just specified, try adding some elements: $input = CustomField::make('name') ->title('How your name?') ->placeholder('Sheldon Cooper') ->value('Alexandr Chernyaev'); $html = $input->render(); After we refresh the page, a new title is displayed on it, instead of the default, but neither placeholder nor value was applied. It is because they were not specified in the `inlineAttributes`, fix this: /** * Attributes available for a particular tag. * * @var array */ protected $inlineAttributes = [\ 'name',\ 'type',\ 'placeholder',\ 'value'\ ]; After that, each attribute will be drawn in our template. Our Friends [![](https://orchid.software/img/sponsors/assisted-mindfulness-logo.svg)](https://assisted-mindfulness.com/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) [![](https://orchid.software/img/sponsors/sajya.svg)](https://sajya.github.io/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) --- # Cell Types | Orchid - Laravel Admin Panel ![](https://orchid.software/img/next/docs-left-tentacli.svg) ![](https://orchid.software/img/next/docs-right-tentacli.svg) [](https://orchid.software/en/docs/cell-types/# "Scroll to the top of the page") Cell Types ========== [Suggest Edit](https://github.com/orchidsoftware/orchid.software/edit/master/docs/en/docs/cell-types.md "View and edit this file on GitHub") * [Introduction](https://orchid.software/en/docs/cell-types/#introduction) * [DateTimeSplit](https://orchid.software/en/docs/cell-types/#datetimesplit) * [Number](https://orchid.software/en/docs/cell-types/#number) * [Boolean](https://orchid.software/en/docs/cell-types/#boolean) * [Percentage](https://orchid.software/en/docs/cell-types/#percentage) * [Currency](https://orchid.software/en/docs/cell-types/#currency) [Introduction](https://orchid.software/en/docs/cell-types/#introduction) ------------------------------------------------------------------------- When working on your project, you’ll often encounter the need to present various data types such as currency, numbers, or dates. Orchid makes this task easier by providing built-in components that handle these common data types, similar to popular spreadsheet software like Microsoft Excel or Apple Numbers. Orchid’s components help you avoid code duplication and allow you to effortlessly format and display your data. **These components can be used for both [table cells](https://orchid.software/en/docs/table) (using the `TD` class) and [legends](https://orchid.software/en/docs/legend) (using the `Sight` class)**. In this documentation, we will primarily cover the usage of `TD` components. [DateTimeSplit](https://orchid.software/en/docs/cell-types/#datetimesplit) --------------------------------------------------------------------------- The `DateTimeSplit` component is specifically designed to display dates in a two-line format. The top line shows the formatted date, while the bottom line provides additional details such as the day of the week and the time. To use the `DateTimeSplit` component, you can specify the attribute that contains the date information and include it in your table cell definition: TD::make('created_at') ->usingComponent(DateTimeSplit::class), By default, Orchid provides sensible formatting options for the upper and lower parts of the cell. However, you can also customize these options to match your specific requirements. For example, you can change the format of the date or adjust the timezone: use Orchid\Screen\Components\Cells\DateTimeSplit; TD::make('created_at') ->usingComponent(DateTimeSplit::class, upperFormat: 'Y-m-d', lowerFormat: 'H:i:s.uP', timeZone: 'Europe/Madrid'), In the above example, we set the `upperFormat` option to `'Y-m-d'` to display the date in the format 'YYYY-MM-DD’. The `lowerFormat` option is set to `'H:i:s.uP'`, which shows the time in the format 'HH:MM:SS.microseconds+timezone’. Feel free to adjust these formats and the `timeZone` option to suit your project’s needs. > **Note:** This documentation assumes familiarity with the PHP [Named Arguments](https://www.php.net/manual/en/functions.arguments.php#functions.named-arguments) > feature. [Number](https://orchid.software/en/docs/cell-types/#number) ------------------------------------------------------------- The `Number` component simplifies the formatting and display of numerical data. It allows you to present numbers in a desired format, such as with thousands separators for improved readability. To use the `Number` component, specify the attribute containing the numerical value within your table cell definition: use Orchid\Screen\Components\Cells\Number; TD::make('value') ->usingComponent(Number::class), When the component encounters a large number, it automatically adds thousands separators to enhance readability. For example, the value `100400500.75` will be rendered as `100 400 500,8`. In addition to the default behavior, you can customize the `Number` component by specifying options such as the number of decimal places, decimal separators, and thousands separators: TD::make('value') ->usingComponent(Number::class, decimals: 1, decimal_separator: ',', thousands_separator: ' '), [Boolean](https://orchid.software/en/docs/cell-types/#boolean) --------------------------------------------------------------- The `Boolean` component is designed to represent boolean values in a concise and visually clear manner. It allows you to display boolean data with appropriate labels. Here’s an example of using the `Boolean` component: use Orchid\Screen\Components\Cells\Boolean; TD::make('value') ->usingComponent(Boolean::class), By default, the `Boolean` component will display boolean values as “true” or “false”. However, you can easily customize the labels to match the semantics of your data: TD::make('value') ->usingComponent(Boolean::class, true: 'Enabled', false: 'Disabled'), [Percentage](https://orchid.software/en/docs/cell-types/#percentage) --------------------------------------------------------------------- The `Percentage` component simplifies the presentation of values as percentages. It automatically formats the values and adds the percentage symbol for clear visual representation. To use the `Percentage` component, specify the attribute that contains the numerical value within your table cell definition: use Orchid\Screen\Components\Cells\Percentage; TD::make('value') ->usingComponent(Percentage::class), The `Percentage` component provides a clear and concise representation of the numeric value as a percentage. You can also customize the component by specifying the number of decimal places to display: TD::make('value') ->usingComponent(Percentage::class, decimals: 2), [Currency](https://orchid.software/en/docs/cell-types/#currency) ----------------------------------------------------------------- The `Currency` component simplifies the formatting and display of currency values. It ensures consistent formatting and provides options for customization. To use the `Currency` component, specify the field and use the `usingComponent` method: use Orchid\Screen\Components\Cells\Currency; TD::make('value') ->usingComponent(Currency::class), The `Currency` component automatically formats the currency value using the appropriate currency symbol and decimal separators. However, you can also customize the formatting by specifying additional options. For example: TD::make('value') ->usingComponent(Currency::class, decimals: 1, decimal_separator: ',', thousands_separator: ' '), If you need to use custom currency symbols, you can specify them using the `before` and `after` options. For example: TD::make('value') ->usingComponent(Currency::class, before: '$', after: '₽'), In this case, the currency value is displayed with a dollar sign before the value and a ruble symbol after the value. Adjust these options to match the currency symbols used in your project. Our Friends [![](https://orchid.software/img/sponsors/assisted-mindfulness-logo.svg)](https://assisted-mindfulness.com/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) [![](https://orchid.software/img/sponsors/sajya.svg)](https://sajya.github.io/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) --- # Charts | Orchid - Laravel Admin Panel ![](https://orchid.software/img/next/docs-left-tentacli.svg) ![](https://orchid.software/img/next/docs-right-tentacli.svg) [](https://orchid.software/en/docs/charts/# "Scroll to the top of the page") Charts ====== [Suggest Edit](https://github.com/orchidsoftware/orchid.software/edit/master/docs/en/docs/charts.md "View and edit this file on GitHub") * [Basic Configuration](https://orchid.software/en/docs/charts/#basic-configuration) * [Adjusting Height](https://orchid.software/en/docs/charts/#adjusting-height) * [Customizing Colors](https://orchid.software/en/docs/charts/#customizing-colors) * [Exporting Images](https://orchid.software/en/docs/charts/#exporting-images) * [Adding Markers](https://orchid.software/en/docs/charts/#adding-markers) * [Eloquent Model](https://orchid.software/en/docs/charts/#eloquent-model) * [Grouped Data](https://orchid.software/en/docs/charts/#grouped-data) * [Working with Time Periods](https://orchid.software/en/docs/charts/#working-with-time-periods) * [Value Query Types](https://orchid.software/en/docs/charts/#value-query-types) Chart layout may be generated using the `orchid:chart` Artisan command. By default, all new metrics will be placed in the `app/Orchid/Layouts` directory: php artisan orchid:chart ChartsLayout Once your chart class has been generated, you’re ready to customize it. Example: namespace App\Orchid\Layouts; use Orchid\Screen\Layouts\Chart; class ChartsLayout extends Chart { /** * Available options: * 'bar', 'line', * 'pie', 'percentage' * * @var string */ protected $type = 'bar'; } By creating and setting up a visual representation of the class, we can use it in the future. But before using chart, we need to prepare the data we want to display. To do this, let’s set the `query` value of the screen: public function query() : array { $dataset = [\ [\ 'labels' => ['12am-3am', '3am-6am', '6am-9am', '9am-12pm', '12pm-3pm', '3pm-6pm', '6pm-9pm'],\ 'name' => 'Some Data',\ 'values' => [25, 40, 30, 35, 8, 52, 17, -4],\ ],\ [\ 'labels' => ['12am-3am', '3am-6am', '6am-9am', '9am-12pm', '12pm-3pm', '3pm-6pm', '6pm-9pm'],\ 'name' => 'Another Set',\ 'values' => [25, 50, -10, 15, 18, 32, 27, 14],\ ],\ [\ 'labels' => ['12am-3am', '3am-6am', '6am-9am', '9am-12pm', '12pm-3pm', '3pm-6pm', '6pm-9pm'],\ 'name' => 'Yet Another',\ 'values' => [15, 20, -3, -15, 58, 12, -17, 37],\ ],\ ]; return [\ 'dataset' => $dataset,\ ]; } Now we can use the layout class by calling the static method `make` and specifying the target key for the data: use App\Orchid\Layouts\ChartsLayout; public function layout(): iterable { return [\ ChartsLayout::make('dataset', 'Header for our dataset'),\ ]; } Often datasets need a little explanation, we can add a description for that: use App\Orchid\Layouts\ChartsLayout; public function layout(): iterable { return [\ ChartsLayout::make('dataset', 'Header for our dataset'),\ ->description('Description of the chart')\ ]; } [Basic Configuration](https://orchid.software/en/docs/charts/#basic-configuration) ----------------------------------------------------------------------------------- The configuration is used to change how the chart behaves. There are properties to control styling, height, etc. ### [Adjusting Height](https://orchid.software/en/docs/charts/#adjusting-height) Set the height of the chart in pixels by specifying the property: /** * @var int */ protected $height = 250; ### [Customizing Colors](https://orchid.software/en/docs/charts/#customizing-colors) Set the colors that will be used for each individual unit type, depending on the type of chart by specifying a property: /** * Colors used. * * @var array */ protected $colors = [\ '#2274A5',\ '#F75C03',\ '#F1C40F',\ '#D90368',\ '#00CC66',\ ]; ### [Exporting Images](https://orchid.software/en/docs/charts/#exporting-images) Charts can be exported in the `SVG` format, in which they are displayed initially. To do this, specify the property: /** * Determines whether to display the export button. * * @var bool */ protected $export = true; ### [Adding Markers](https://orchid.software/en/docs/charts/#adding-markers) Some graphs are difficult to interpret without more information. For example, show the average value. For this you can define the `markers` method: /** * To highlight certain values on the Y axis, markers can be set. * They will show as dashed lines on the graph. */ protected function markers(): ?array { return [\ [\ 'label' => 'Medium',\ 'value' => 40,\ ],\ ]; } [Eloquent Model](https://orchid.software/en/docs/charts/#eloquent-model) ------------------------------------------------------------------------- In order to use the methods of obtaining data for charts from the model, you need to add the trait `Chartable`: namespace App; use Orchid\Metrics\Chartable; use Orchid\Platform\Models\User as Authenticatable; class User extends Authenticatable { use Chartable; // ... } This will add several new methods specifically for charting: * Grouped data * A period of time [Grouped Data](https://orchid.software/en/docs/charts/#grouped-data) --------------------------------------------------------------------- For example, you might want to build a chart showing the proportion of users who have enabled two-factor authentication. namespace App\Orchid\Layouts; use Orchid\Screen\Layouts\Chart; class BasicPieChart extends Chart { /** * Available options: * 'bar', 'line', * 'pie', 'percentage'. * * @var string */ protected $type = 'pie'; } Then the model query will serve as a data source `countForGroup()` public function query(): array { $userUsageTwoFactorAuth = User::countForGroup('uses_two_factor_auth')->toChart(); return [\ 'userUsageTwoFactorAuth' => $userUsageTwoFactorAuth,\ ]; } public function layout(): array { return [\ BasicPieChart::make('userUsageTwoFactorAuth', 'Usage two-factor authentication'),\ ]; } In order to change the text of headers, you can pass the closure function as the first argument: User::countForGroup('uses_two_factor_auth') ->toChart(fn(bool $value) => $value ? 'Enabled' : 'Disabled'), [Working with Time Periods](https://orchid.software/en/docs/charts/#working-with-time-periods) ----------------------------------------------------------------------------------------------- Receives data for a certain period of time, filling in the missing values. For example, let’s display a graph of new users and roles: namespace App\Orchid\Layouts; use Orchid\Screen\Layouts\Chart; class BasicLineChart extends Chart { /** * Available options: * 'bar', 'line', * 'pie', 'percentage'. * * @var string */ protected $type = 'line'; } Then the data source will be: public function query(): array { return [\ 'members' => [\ User::countByDays()->toChart('Users'),\ Role::countByDays()->toChart('Roles'),\ ]\ ]; } public function layout(): array { return [\ BasicLineChart::make('members', 'New members'),\ ]; } By default, the data will be taken for one month; to set your own period, you need to pass the arguments: $start = Carbon::now()->subDay(7); $end = Carbon::now()->subDay(1); User::countByDays($start, $end)->toChart('Users') By default, data is grouped by the `created_at` column, to change it: $start = Carbon::now()->subDay(7); $end = Carbon::now()->subDay(1); User::countByDays($start, $end, 'updated_at')->toChart('Users') ### [Value Query Types](https://orchid.software/en/docs/charts/#value-query-types) Value metrics don’t just ship with a `countByDays` method. You may also use a variety of other aggregate functions when building your metric. The `average` method may be used to calculate the average of a given column Order::averageByDays('price')->toChart('Order'), The `sum` method may be used to calculate the sum of a given column: Order::sumByDays('price')->toChart('Order'), The `min` method may be used to calculate the min of a given column: Order::minByDays('price')->toChart('Order'), The `max` method may be used to calculate the max of a given column: Order::maxByDays('price')->toChart('Order'), Our Friends [![](https://orchid.software/img/sponsors/assisted-mindfulness-logo.svg)](https://assisted-mindfulness.com/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) [![](https://orchid.software/img/sponsors/sajya.svg)](https://sajya.github.io/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) --- # Configuration | Orchid - Laravel Admin Panel ![](https://orchid.software/img/next/docs-left-tentacli.svg) ![](https://orchid.software/img/next/docs-right-tentacli.svg) [](https://orchid.software/en/docs/configuration/# "Scroll to the top of the page") Configuration ============= [Suggest Edit](https://github.com/orchidsoftware/orchid.software/edit/master/docs/en/docs/configuration.md "View and edit this file on GitHub") * [Domain](https://orchid.software/en/docs/configuration/#domain) * [Prefix](https://orchid.software/en/docs/configuration/#prefix) * [Middleware](https://orchid.software/en/docs/configuration/#middleware) * [Login Page](https://orchid.software/en/docs/configuration/#login-page) * [Home Page](https://orchid.software/en/docs/configuration/#home-page) * [Asset Resources](https://orchid.software/en/docs/configuration/#asset-resources) * [Appearance Patterns](https://orchid.software/en/docs/configuration/#appearance-patterns) * [Model Classes](https://orchid.software/en/docs/configuration/#model-classes) * [Overriding Blade Templates](https://orchid.software/en/docs/configuration/#overriding-blade-templates) The package uses the standard configuration system for Laravel. It stores the main parameters in the `config` directory, and the main file for the platform is the file `platform.php`. Each setting comes with a comment explaining its purpose. > **Note.** After caching your configuration files, don’t forget to clear the cache if you make changes. Use the `php artisan config:clear` command to refresh it. In this section, we will delve into the configuration file and provide a detailed description of each parameter. [Domain](https://orchid.software/en/docs/configuration/#domain) ---------------------------------------------------------------- 'domain' => env('PLATFORM_DOMAIN', null), For many projects, the address of the location of the administration panel plays an important role. For example, the application is located at `example.com`, and the platform is at `admin.example.com` or on a third-party domain. To specify the address you would like to use for the platform, you can set the `domain` parameter in the configuration file: 'domain' => 'admin.example.com', It is important to note that your web server settings must be configured correctly for this to work. For example, if you are using Apache, you will need to set up a virtual host for the domain you specified in the configuration file. [Prefix](https://orchid.software/en/docs/configuration/#prefix) ---------------------------------------------------------------- 'prefix' => env('PLATFORM_PREFIX', 'admin'), The `prefix` parameter allows you to change the default `admin` prefix to any other name, such as `orchid` or `administrator`. This is useful if you want to use a different prefix for your admin panel or if the default prefix is already in use by another part of your application. For example, if you set the prefix to `dashboard`, the URL for the admin login page would be `https://example.com/dashboard/login` instead of `https://example.com/admin/login`. To change the prefix, you can update the prefix parameter in the configuration file: 'prefix' => 'dashboard', It’s worth noting that changing the prefix will also change the URL of all routes within the admin panel, so make sure to update any links or redirects that reference the old prefix. [Middleware](https://orchid.software/en/docs/configuration/#middleware) ------------------------------------------------------------------------ 'middleware' => [\ 'public' => [\ 'web', \ 'cache.headers:private;must_revalidate;etag'\ ],\ 'private' => [\ 'web',\ 'platform',\ 'cache.headers:private;must_revalidate;etag'\ ],\ ], The `middleware` parameter allows you to add or change the middleware (intermediate layers) used for the admin panel. By default, the platform comes with two groups of middleware: `public` and `private`. The `public` middleware is applied to routes that can be accessed by an unauthorized user, such as the login page. The `private` middleware, on the other hand, is applied to routes that can only be accessed by authorized users, such as the dashboard page. You can add as many new middleware as you like. For example, you can add a middleware that filters requests from a specific IP address range or a middleware that checks for a valid API token. [Login Page](https://orchid.software/en/docs/configuration/#login-page) ------------------------------------------------------------------------ 'auth' => true, The `auth` parameter controls whether the package uses its own simple login interface or not. By default, it is set to `true`, which means the platform will use its own login interface. If you require more advanced features such as password recovery or two-factor authentication, you can set auth to false and use a package like [Jetstream](https://laravel.com/docs/authentication#authentication-quickstart) or roll your own login interface. To use a package like Jetstream, you will need to install it and configure it according to its documentation. If you roll your own login interface, you will need to create the necessary controllers, views, and routes for the login process. 'auth' => false, [Home Page](https://orchid.software/en/docs/configuration/#home-page) ---------------------------------------------------------------------- The `index` parameter controls the main page of the admin panel that the user will see when they first log in or click on the logo or links in the navigation bar. 'index' => 'platform.main', The default value for this parameter is `platform.main`, which corresponds to the main dashboard page of the platform. You can change this to any other route you have defined in your application. For example, if you want to redirect users to a custom dashboard page, you can update the `index` parameter to point to that route: 'index' => 'custom.dashboard', It’s worth noting that you will need to create the corresponding route and controller for the new home page. [Asset Resources](https://orchid.software/en/docs/configuration/#asset-resources) ---------------------------------------------------------------------------------- 'resource' => [\ 'stylesheets' => [],\ 'scripts' => [],\ ], The `resource` parameter allows you to add your own stylesheets or javascript scripts to the admin panel. You can globally add paths to the corresponding arrays in the configuration file. For example, if you want to include a custom stylesheet on every page of the admin panel, you can add the path to the `stylesheets` array: 'resource' => [\ 'stylesheets' => [\ '/path/to/custom.css'\ ],\ 'scripts' => [\ '/path/to/custom.js', // Local path in the public directory\ 'https://cdn.example.com/app.js', // CDN path\ ],\ ], It’s worth noting that the resource file must be present in the `public` directory to be able to access it. [Appearance Patterns](https://orchid.software/en/docs/configuration/#appearance-patterns) ------------------------------------------------------------------------------------------ To change some templates, it is unnecessary to publish the entire package; you can customize a part of the user interface to specify a logo, accompanying documents, etc. 'template' => [\ 'header' => null,\ 'footer' => null,\ ], [Model Classes](https://orchid.software/en/docs/configuration/#model-classes) ------------------------------------------------------------------------------ The desire to change the behavior of some classes from the standard delivery is quite normal. For the platform to use your model classes instead of its own, it is necessary to register their substitution in advance using: namespace App\Providers; use Illuminate\Support\ServiceProvider; use Orchid\Platform\Dashboard; class AppServiceProvider extends ServiceProvider { /** * Bootstrap any application services. * * @return void */ public function boot() { Dashboard::useModel( \Orchid\Platform\Models\User::class, \App\Models\User::class ); } } [Overriding Blade Templates](https://orchid.software/en/docs/configuration/#overriding-blade-templates) -------------------------------------------------------------------------------------------------------- Backend pages are created using [Blade](https://laravel.com/docs/blade) . You can change these using Laravel’s template override mechanism (this is the same for all Laravel packages, not just Orchid); > 🚨 **Alert!** Overridden templates do not receive updates or bug fixes. Think of this as turning off the autopilot. Following Laravel’s mechanism for overriding templates from packages is to create the `/resources/views/vendor/platform/` directory in your application and create new templates with the same path as the original templates. For example, to override `/vendor/orchid/platform/resources/views/partials/search.blade.php`, create a new template at `/resources/views/vendor/platform/partials/search.blade.php`. An illustrative example: your-project/ ├─ ... └─ resources/ └─ views/ └─ vendor/ └─ platform/ └─ partials/ └─ search.blade.php Our Friends [![](https://orchid.software/img/sponsors/assisted-mindfulness-logo.svg)](https://assisted-mindfulness.com/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) [![](https://orchid.software/img/sponsors/sajya.svg)](https://sajya.github.io/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) --- # Controllers | Orchid - Laravel Admin Panel ![](https://orchid.software/img/next/docs-left-tentacli.svg) ![](https://orchid.software/img/next/docs-right-tentacli.svg) [](https://orchid.software/en/docs/controllers/# "Scroll to the top of the page") Controllers =========== [Suggest Edit](https://github.com/orchidsoftware/orchid.software/edit/master/docs/en/docs/controllers.md "View and edit this file on GitHub") There is usually no need to create custom controllers to do anything outside the package’s scope since you can place [your views on the screen](https://orchid.software/en/docs/custom-template/#views) , no matter how complex they are. But if, for example, you already have an implementation of the admin panel and you already have many of your controllers, then rewriting the working code is not at all necessary. By following the steps below, you will understand how to show them in the Orchid interface. Ultimately, this will shorten the transition time and allow you to upgrade in small increments. To create a new controller, use the `make:controller` Artisan command: php artisan make:controller OrchidController This will generate a new class in the `app/Http/Controllers` directory. You can then modify the class as needed: namespace App\Http\Controllers; class OrchidController extends Controller { /** * @return \Illuminate\View\View */ public function index() { return view('custom'); } } The `index` method of your controller should return a view template, which will be rendered using the Orchid package’s style. Here is an example of a view template: @extends('platform::dashboard') @section('title','title') @section('description', 'description') @section('navbar')
Navbar
@stop @section('content')

Content

@stop To make the controller accessible through the Orchid interface, you need to declare a route for it in the route file (e.g. `routes/platform`). This will ensure that common rules such as authorization apply to the controller. Here is an example of how to declare a route for the `OrchidController`: use App\Http\Controllers\OrchidController; Route::get('custom', [OrchidController::class, 'index']); You can now access your custom controller by visiting the custom route in your Orchid app. Our Friends [![](https://orchid.software/img/sponsors/assisted-mindfulness-logo.svg)](https://assisted-mindfulness.com/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) [![](https://orchid.software/img/sponsors/sajya.svg)](https://sajya.github.io/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) --- # View Template | Orchid - Laravel Admin Panel ![](https://orchid.software/img/next/docs-left-tentacli.svg) ![](https://orchid.software/img/next/docs-right-tentacli.svg) [](https://orchid.software/en/docs/custom-template/# "Scroll to the top of the page") View Template ============= [Suggest Edit](https://github.com/orchidsoftware/orchid.software/edit/master/docs/en/docs/custom-template.md "View and edit this file on GitHub") * [Views](https://orchid.software/en/docs/custom-template/#views) * [Blade Components](https://orchid.software/en/docs/custom-template/#blade-components) * [Wrapper](https://orchid.software/en/docs/custom-template/#wrapper) * [Browsing](https://orchid.software/en/docs/custom-template/#browsing) [Views](https://orchid.software/en/docs/custom-template/#views) ---------------------------------------------------------------- Sometimes you may want to display your own `blade` template in your application. To do this, you can use the `Layout::view` method and pass it a string containing the name of your template. use Orchid\Support\Facades\Layout; public function layout(): array { return [\ Layout::view('greeting'),\ ]; } Any data returned by the `query` method will be passed to your template and can be accessed using Blade syntax. For example: // ... Screen public function query(): array { return [\ 'name' => 'Alexandr Chernyaev',\ ]; } public function layout(): array { return [\ Layout::view('greeting'),\ ]; } In the `hello.blade.php` template, you can display the contents of the `name` variable like this: {{-- ... /views/greeting.blade.php --}} Hello, {{ $name }}. Note that the `layout` method should return an array of views to be displayed in the final layout. If you want to include multiple custom templates, you can add them to the array like this: public function layout(): array { return [\ Layout::view('dashboard'),\ Layout::view('users'),\ Layout::view('settings'),\ ]; } [Blade Components](https://orchid.software/en/docs/custom-template/#blade-components) -------------------------------------------------------------------------------------- Blade components are a way to reuse templates in your Laravel application. To create a new blade component, you can use the `artisan` command: php artisan make:component Hello --inline This will create a new class called `Hello` in the `App\View\Components` namespace. The class should look something like this: namespace App\View\Components; use Illuminate\View\Component; class Hello extends Component { /** * @var string */ public $name; /** * Create a new component instance. * * @param string $name */ public function __construct(string $name) { $this->name = $name; } /** * Get the view / contents that represent the component. * * @return \Illuminate\View\View|string */ public function render() { return <<<'blade'
Hello {{ $name }}!
blade; } } To use the component in your screens, you can pass its lowercase representation to the `Layout::component` method: /** * Query data. * * @return array */ public function query(): array { return [\ 'name' => 'Sheldon Cooper',\ ]; } /** * Views. * * @return Layout[] */ public function layout(): array { return [\ Layout::component(Hello::class),\ ]; } The values returned by the `query` method will be passed to the component and can be accessed using blade syntax. For example, in the `Hello` component class, you can access the name variable like this: Hello {{ $name }}! If you want to pass additional variables to the component, you can do so by modifying the constructor and adding them as arguments. For example: namespace App\View\Components; use Illuminate\Contracts\Foundation\Application; use Illuminate\View\Component; class Hello extends Component { /** * @var string */ public $name; /** * @var Application */ public $application; /** * Create a new component instance. * * @param Application $application * @param string $name */ public function __construct(Application $application, string $name) { $this->application = $application; $this->name = $name; } /** * Get the view / contents that represent the component. * * @return \Illuminate\View\View|string */ public function render() { return <<<'blade'
Hello {{ $name }}!
Version {{ $application->version() }}
blade; } } You can learn more about blade components in the [Laravel documentation](https://laravel.com/docs/blade#components) . [Wrapper](https://orchid.software/en/docs/custom-template/#wrapper) -------------------------------------------------------------------- A “Wrapper” is an intermediate link between a custom template and the standard layout layers. It allows you to specify where other layout layers should be displayed within your custom template. To use a wrapper, you can pass an array of views to the `Layout::wrapper` method, along with the name of your custom template. The array should contain keys representing the variables that will be available in the template, and the values should be the views to be rendered. public function layout(): array { return [\ Layout::wrapper('settings', [\ 'foo' => [\ RowLayout::class,\ RowLayout::class,\ ],\ 'bar' => RowLayout::class,\ ]),\ ]; } In the `settings.blade.php` template, you can access the `foo` and `bar` variables and display the views they contain like this:
@foreach($foo as $row) {!! $row !!} @endforeach
{!! $bar !!}
Note that the variables returned by the `query` method will also be available in the template and can be accessed using blade syntax. public function query(): array { return [\ 'name' => 'Alexandr Chernyaev',\ ]; } You can display the contents of the name variable in your template like this: Hello, {{ $name }}. [Browsing](https://orchid.software/en/docs/custom-template/#browsing) ---------------------------------------------------------------------- Sometimes it can be inconvenient to switch between multiple browser tabs when working in the admin panel. To avoid this, you can use the `Layout::browsing` method to display the contents of a different web page within an iframe in your application. For example: use Orchid\Support\Facades\Layout; public function layout(): array { return [\ Layout::browsing('http://127.0.0.1:8000/telescope'),\ ]; } You can also specify various attributes for the iframe element by chaining method calls onto the `Layout::browsing` method. For example: Layout::browsing('http://127.0.0.1:8000/telescope') ->allow('...') ->loading('...') ->csp('...') ->name('...') ->referrerpolicy('...') ->sandbox('...') ->src('...') ->srcdoc('...'); Refer to the [HTML specification](https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element) for a complete list of available attributes. Our Friends [![](https://orchid.software/img/sponsors/assisted-mindfulness-logo.svg)](https://assisted-mindfulness.com/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) [![](https://orchid.software/img/sponsors/sajya.svg)](https://sajya.github.io/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) --- # Form Elements | Orchid - Laravel Admin Panel ![](https://orchid.software/img/next/docs-left-tentacli.svg) ![](https://orchid.software/img/next/docs-right-tentacli.svg) [](https://orchid.software/en/docs/field/# "Scroll to the top of the page") Form Elements ============= [Suggest Edit](https://github.com/orchidsoftware/orchid.software/edit/master/docs/en/docs/field.md "View and edit this file on GitHub") * [Introduction to Input](https://orchid.software/en/docs/field/#introduction-to-input) * [Designing Input Interfaces](https://orchid.software/en/docs/field/#designing-input-interfaces) * [Required Fields](https://orchid.software/en/docs/field/#required-fields) * [Hiding Input Fields](https://orchid.software/en/docs/field/#hiding-input-fields) * [Types of Input](https://orchid.software/en/docs/field/#types-of-input) * [Masking Input Values](https://orchid.software/en/docs/field/#masking-input-values) * [TextArea](https://orchid.software/en/docs/field/#textarea) * [CheckBox](https://orchid.software/en/docs/field/#checkbox) * [Select](https://orchid.software/en/docs/field/#select) * [Relation](https://orchid.software/en/docs/field/#relation) * [DateTime](https://orchid.software/en/docs/field/#datetime) * [Direct Input](https://orchid.software/en/docs/field/#direct-input) * [Date Format](https://orchid.software/en/docs/field/#date-format) * [Time Selection](https://orchid.software/en/docs/field/#time-selection) * [Time Selection Only](https://orchid.software/en/docs/field/#time-selection-only) * [Range Selection](https://orchid.software/en/docs/field/#range-selection) * [Quick Date Selection](https://orchid.software/en/docs/field/#quick-date-selection) * [Allow Empty Values](https://orchid.software/en/docs/field/#allow-empty-values) * [Multiple Selection](https://orchid.software/en/docs/field/#multiple-selection) * [DateRange](https://orchid.software/en/docs/field/#daterange) * [TimeZone](https://orchid.software/en/docs/field/#timezone) * [Quill WYSIWYG Editor](https://orchid.software/en/docs/field/#quill-wysiwyg-editor) * [Toolbar Controls](https://orchid.software/en/docs/field/#toolbar-controls) * [Extensibility](https://orchid.software/en/docs/field/#extensibility) * [Markdown Editor](https://orchid.software/en/docs/field/#markdown-editor) * [Matrix](https://orchid.software/en/docs/field/#matrix) * [Customizing Column Headers](https://orchid.software/en/docs/field/#customizing-column-headers) * [Limiting Rows](https://orchid.software/en/docs/field/#limiting-rows) * [Custom Fields](https://orchid.software/en/docs/field/#custom-fields) * [Code editor](https://orchid.software/en/docs/field/#code-editor) * [Picture](https://orchid.software/en/docs/field/#picture) * [Cropper](https://orchid.software/en/docs/field/#cropper) * [Width and Height](https://orchid.software/en/docs/field/#width-and-height) * [File Size Limit](https://orchid.software/en/docs/field/#file-size-limit) * [Value](https://orchid.software/en/docs/field/#value) * [Attach](https://orchid.software/en/docs/field/#attach) * [File Upload Limitations](https://orchid.software/en/docs/field/#file-upload-limitations) * [File Grouping](https://orchid.software/en/docs/field/#file-grouping) * [File Storage](https://orchid.software/en/docs/field/#file-storage) * [Explicit File Path Configuration](https://orchid.software/en/docs/field/#explicit-file-path-configuration) * [File Validation and Sorting on the Server](https://orchid.software/en/docs/field/#file-validation-and-sorting-on-the-server) * [Error Handling and Message Display](https://orchid.software/en/docs/field/#error-handling-and-message-display) * [Group](https://orchid.software/en/docs/field/#group) * [Column Width](https://orchid.software/en/docs/field/#column-width) * [Column Alignment](https://orchid.software/en/docs/field/#column-alignment) * [Button](https://orchid.software/en/docs/field/#button) * [Action Confirmation](https://orchid.software/en/docs/field/#action-confirmation) * [Submission URL](https://orchid.software/en/docs/field/#submission-url) * [File Download](https://orchid.software/en/docs/field/#file-download) * [Link](https://orchid.software/en/docs/field/#link) * [Opening Link in a New Tab](https://orchid.software/en/docs/field/#opening-link-in-a-new-tab) * [File Download](https://orchid.software/en/docs/field/#file-download) * [Dropdown Menu](https://orchid.software/en/docs/field/#dropdown-menu) * [NumberRange](https://orchid.software/en/docs/field/#numberrange) * [Custom Fields Creation](https://orchid.software/en/docs/field/#custom-fields-creation) Fields are used to generate the output of the fill and edit form template. Form elements are the building blocks of a user interface, and they allow you to create different parts of the interface and provide interaction with the user. In this section, we will cover of the most common form elements and their usage. > Feel free to add your fields, for example, to use the convenient editor for you or any components. [Introduction to Input](https://orchid.software/en/docs/field/#introduction-to-input) -------------------------------------------------------------------------------------- Input is one of the most versatile form elements. It allows you to create text fields, as well as other types of input such as number, email, password, etc. Here is an example of creating a simple text input field: ![This image shows a simple text input box. It is a common user interface element that allows users to enter text or other data into a web form. ](https://orchid.software/img/fields/input.png) Example: use Orchid\Screen\Fields\Input; Input::make('name'); ### [Designing Input Interfaces](https://orchid.software/en/docs/field/#designing-input-interfaces) Empty and expressionless input fields can confuse the user, but you can help by specifying a title. The title should be a short and descriptive label that clearly communicates the purpose of the field. Here is an example of how to add a title to an input field: Input::make('name') ->title('First name'); If you need to provide additional context or instructions for the field, you can use the `help` method to add a hint or brief description. The hint should be a short and concise message that helps the user understand the purpose or format of the field. Here is an example of how to add a hint to an input field: Input::make('name') ->help('What is your name?'); If the field requires a more detailed explanation or guidance, you can use the `popover` method to add a tooltip that will be displayed as a pop-up when the user hovers over the field. The tooltip should provide additional information or instructions that help the user complete the field correctly. Here is an example of how to add a tooltip to an input field: Input::make('name') ->popover('Tooltip - hint that user opens himself.'); By default, form elements are displayed in a horizontal layout, with the label and input field side by side. However, you can change the layout to a vertical arrangement by using the `vertical()` method: Input::make('name')->vertical(); If you prefer the horizontal layout, you can use the `horizontal()` method to restore it: Input::make('name')->horizontal(); ### [Required Fields](https://orchid.software/en/docs/field/#required-fields) Sometimes you may need to specify that a field is required, meaning that the user must enter a value in the field before they can submit the form. To mark a field as required, you can use the `required()` method: Input::make('name') ->type('text') ->required(); You can also use the `required()` method on other types of form elements, such as select, radio buttons, and checkboxes. ### [Hiding Input Fields](https://orchid.software/en/docs/field/#hiding-input-fields) There may be times when you want to hide a form element from the user interface, either temporarily or permanently. To hide a form element, you can use the `canSee()` method and pass a value of false: Input::make('name')->canSee(false); If you want to show a previously hidden form element, you can use the canSee() method and pass a value of true: Input::make('name')->canSee(true); > Note that many methods, such as `canSee`, `required`, `title`, `help`, `vertical`, `horizontal` and many others, are available in almost every `field` of the system. ### [Types of Input](https://orchid.software/en/docs/field/#types-of-input) One of the most universal fields is the `input` field, which allows you to specify a variety of types such as text, file, hidden, color, email, number, range, and url. The type attribute determines the kind of input field you want to create and the kind of data it will accept. Here are some examples of using the `type` method: Input::make('name')->type('text'); A field for entering the name of the file that is sent to the server. Input::make('name')->type('file'); Hidden field. Input::make('name')->type('hidden'); Widget for choosing a color. Input::make('name')->type('color'); For email addresses. Input::make('name')->type('email'); Entering numbers. Input::make('name')->type('number'); Slider to select numbers in the specified range. Input::make('name')->type('range'); To specify web addresses. Input::make('name')->type('url'); > **Please note**. Please note that support for new HTML5 attributes such as `color` and `range` is dependent on the browser being used. You can learn more about attribute types at [Mozilla’s website](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input) > . ### [Masking Input Values](https://orchid.software/en/docs/field/#masking-input-values) A mask is a useful tool for enforcing a specific format for user input. For example, you might want to use a mask to ensure that phone numbers are entered in a standard format, or that currency values are entered with the correct number of decimal places. To use a mask with an input field, you can use the `mask()` method and pass a string that defines the format of the input. The string should contain placeholders for the allowed characters and any fixed characters that should be included. Here is an example of using a mask to enforce a standard phone number format: Input::make('phone') ->mask('(999) 999-9999') ->title('Phone number'); You can also pass an array of options to the `mask()` method to customize the behavior of the mask. For example, you can use the `numericInput` option to specify that only numeric characters should be accepted: Input::make('price') ->title('Price') ->mask([\ 'mask' => '999 999 999.99',\ 'numericInput' => true\ ]); You can also use the `alias` option to use a predefined mask, such as `currency`, which automatically formats the input as a currency value: Input::make('price') ->title('Price') ->mask([\ 'alias' => 'currency',\ 'prefix' => ' ',\ 'groupSeparator' => ' ',\ 'digitsOptional' => true,\ ]); You can view all of the available options for the Inputmask library [here](https://github.com/RobinHerbots/Inputmask#options) . [TextArea](https://orchid.software/en/docs/field/#textarea) ------------------------------------------------------------ The `textarea` field is a form element that allows the user to enter multiple lines of text. It is similar to the input field, but it is designed to accept longer pieces of text and to preserve line breaks. To create a `textarea` field, you can use the `TextArea` class: use Orchid\Screen\Fields\TextArea; TextArea::make('description'); By default, the `textarea` field will expand to fit the amount of text that is entered. However, you can use the `rows` method to specify a minimum number of rows: TextArea::make('description') ->rows(5); This can be useful for providing a clear visual indication of the amount of text that is expected. As with other form elements, you can use methods such as `title()`, `help()`, and `popover()` to add additional context and guidance for the user. You can also use the `required()` method to mark the textarea field as `required` and the `canSee()` method to show or hide the field. [CheckBox](https://orchid.software/en/docs/field/#checkbox) ------------------------------------------------------------ A checkbox is a graphical user interface element that allows the user to control a parameter with two states – checked and unchecked. Checkboxes are often used to represent binary choices, such as whether a particular feature is enabled or disabled. To create a checkbox field, you can use the `CheckBox` class: use Orchid\Screen\Fields\CheckBox; CheckBox::make('free') ->value(1) ->title('Free') ->placeholder('Event for free') ->help('Event for free'); The `value` attribute determines the value that will be sent to the server when the checkbox is checked. The `title` attribute provides a label for the checkbox, and the `placeholder` attribute can be used to provide a default value or a short description. The `help` attribute can be used to provide additional context or instructions for the user. By default, browsers do not send the value of an unchecked checkbox when the form is submitted. This can make it difficult to use checkboxes with simple Boolean values. To solve this problem, you can use the `sendTrueOrFalse()` method, which will send the value `false` to the server when the checkbox is unchecked: CheckBox::make('enabled') ->sendTrueOrFalse(); This can be useful for ensuring that the server receives a clear indication of the state of the checkbox. [Select](https://orchid.software/en/docs/field/#select) -------------------------------------------------------- The select field is a form element that allows the user to choose an option from a dropdown list. It is useful for presenting a limited set of options and allowing the user to make a selection. To create a select field, you can use the `Select` class: use Orchid\Screen\Fields\Select; Select::make('select') ->options([\ 'index' => 'Index',\ 'noindex' => 'No index',\ ]) ->title('Select tags') ->help('Allow search bots to index'); The `options` attribute is an array that defines the options that will be presented in the dropdown list. The keys of the array are the values that will be sent to the server, and the values are the labels that will be displayed to the user. In addition to using an array of options, you can also use a data source to populate the options of a select field. For example, you can use a model to retrieve the options: Select::make('user') ->fromModel(User::class, 'email'); This will retrieve all records from the `User` model and use the email field as the label for each option. You can also use a custom query to retrieve the options: Select::make('user') ->fromQuery(User::where('balance', '!=', '0'), 'email'); This will retrieve all records from the `User` model where the `balance` field is not equal to `0`, and use the `email` field as the label for each option. You can also specify a different field to use as the key for each option using the `fromModel()` and `fromQuery()` methods: Select::make('user') ->fromModel(User::class, 'email', 'uuid'); This will use the `uuid` field as the key for each option, rather than the default primary key. If you want to provide an option that represents an unselected state, you can use the `empty()` method: // For array Select::make('user') ->options([\ 1 => 'Option 1',\ 2 => 'Option 2',\ ]) ->empty('No select'); // For model Select::make('user') ->fromModel(User::class, 'name') ->empty('No select'); The `empty` method also accepts the second argument, which is responsible for the value: Select::make('user') ->empty('No select', 0) ->options([\ 1 => 'Option 1',\ 2 => 'Option 2',\ ]); Allow custom values with the `allowAdd` method: Select::make('type') ->allowAdd() ->options([\ 'Option 1',\ 'Option 2',\ ]); [Relation](https://orchid.software/en/docs/field/#relation) ------------------------------------------------------------ Relations fields can load dynamic data, this is a good solution if you need connections. use Orchid\Screen\Fields\Relation; Relation::make('idea') ->fromModel(Idea::class, 'name') ->title('Choose your idea'); For multiple selections, use the `multiple()` method. Relation::make('ideas.') ->fromModel(Idea::class, 'name') ->multiple() ->title('Choose your ideas'); > **Note.** Note the dot at the end of the name. It is necessary in order to show the expectedness of the array. As if it were `HTML` code `` To modify the load, you can use the reference to the `scope` model, for example, take only active: namespace App; use Illuminate\Database\Eloquent\Model; class Idea extends Model { /** * @param Builder $query * * @return Builder */ public function scopeActive(Builder $query) { return $query->where('active', true); } } Relation::make('idea') ->fromModel(Idea::class, 'name') ->applyScope('active') ->title('Choose your idea'); You can also pass additional parameters to the method: Relation::make('idea') ->fromModel(Idea::class, 'name') ->applyScope('status', 'active') ->title('Choose your idea'); You can add one or several fields, which will be additionally searched for: Relation::make('idea') ->fromModel(Idea::class, 'name') ->searchColumns('author', 'description') ->title('Choose your idea'); To set the number of items that will be listed as a result of a search, you can chain the method chunk, passing the number of search results as a param: Relation::make('users.') ->fromModel(User::class, 'name') ->chunk(20); Selection options can work with calculated fields, but only to display the result, the search will occur only on one column in the database. To do this, use the `displayAppend` method. namespace App; use Illuminate\Database\Eloquent\Model; class User extends Model { public function getFullAttribute(): string { return sprintf('%s (%s)', $this->name, $this->email); } } To indicate the displayed field you must: Relation::make('users.') ->fromModel(User::class, 'name') ->displayAppend('full') ->multiple() ->title('Select users'); [DateTime](https://orchid.software/en/docs/field/#datetime) ------------------------------------------------------------ The DateTime field provides a streamlined interface for selecting both date and time within your Laravel applications, leveraging the robust functionality of the `flatpickr` JavaScript library. ![DateTime](https://orchid.software/img/ui/datatime.png) To create a DateTime field, utilize the `DateTimer` class: use Orchid\Screen\Fields\DateTimer; DateTimer::make('open') ->title('Opening date'); ### [Direct Input](https://orchid.software/en/docs/field/#direct-input) Enable direct input to allow users to manually enter: DateTimer::make('open') ->title('Opening date') ->allowInput(); **Note:** Enabling direct input can also make the field mandatory: DateTimer::make('open') ->title('Opening date') ->allowInput() ->required(); ### [Date Format](https://orchid.software/en/docs/field/#date-format) Customize the date format using the `format()` method: DateTimer::make('open') ->title('Opening date') ->format('Y-m-d'); Define the format for transmitting values to the frontend with the `serverFormat()` method: DateTimer::make('open') ->serverFormat('Y-m-d H:i:s'); Opt to display time in 24-hour format: DateTimer::make('open') ->title('Opening date') ->format24hr(); ### [Time Selection](https://orchid.software/en/docs/field/#time-selection) Enable selection of both date and time using the `enableTime()` method: DateTimer::make('open') ->title('Opening time') ->enableTime(); ### [Time Selection Only](https://orchid.software/en/docs/field/#time-selection-only) If only time selection is required: DateTimer::make('open') ->title('Opening time') ->noCalendar() ->format('h:i K'); // Specify time format ### [Range Selection](https://orchid.software/en/docs/field/#range-selection) Allow users to select a range for dates and times: DateTimer::make('open') ->format('Y-m-d H:i') ->enableTime() ->format24hr() ->range(); ### [Quick Date Selection](https://orchid.software/en/docs/field/#quick-date-selection) Facilitate easy selection with predefined quick date options: DateTimer::make('open') ->format('Y-m-d H:i') ->enableTime() ->format24hr() ->range() ->withQuickDates([\ 'Today' => now(),\ 'Yesterday' => now()->subDay(),\ 'Last Week' => [now()->startOfDay()->subWeek(), now()->endOfDay()],\ ]); ### [Allow Empty Values](https://orchid.software/en/docs/field/#allow-empty-values) Allow the field to remain empty: DateTimer::make('open') ->format('Y-m-d') ->allowEmpty() ->multiple(); ### [Multiple Selection](https://orchid.software/en/docs/field/#multiple-selection) Permit multiple date selections: DateTimer::make('open') ->format('Y-m-d') ->allowEmpty() ->multiple(); [DateRange](https://orchid.software/en/docs/field/#daterange) -------------------------------------------------------------- Allows you to select a range of date (and time). Example: use Orchid\Screen\Fields\DateRange; DateRange::make('open') ->title('Opening between'); Default value / result is an array with keys of `start`, `end`. DateRange::make('open') ->title('Opening between') ->value(['start' => now()->subDays(30), 'end' => now()]), [TimeZone](https://orchid.software/en/docs/field/#timezone) ------------------------------------------------------------ The `TimeZone` field is a form element that allows the user to choose a time zone from a dropdown list. It is useful for selecting the time zone in which an event or action will take place. use Orchid\Screen\Fields\TimeZone; TimeZone::make('time'); This will create a dropdown list of all available time zones. You can also specify a specific set of time zones to include in the list using the `listIdentifiers()` method: use DateTimeZone; TimeZone::make('time') ->listIdentifiers(DateTimeZone::ALL); The `listIdentifiers()` method takes a constant from the DateTimeZone class as an argument. The default value is `DateTimeZone::ALL`, which includes all available time zones. Other possible values are: DateTimeZone::AFRICA; DateTimeZone::AMERICA; DateTimeZone::ANTARCTICA; DateTimeZone::ARCTIC; DateTimeZone::ASIA; DateTimeZone::ATLANTIC; DateTimeZone::AUSTRALIA; DateTimeZone::EUROPE; DateTimeZone::INDIAN; DateTimeZone::PACIFIC; DateTimeZone::UTC; DateTimeZone::ALL_WITH_BC; DateTimeZone::PER_COUNTRY; The representation of variable zones can be found in the documentation [PHP](https://www.php.net/manual/en/class.datetimezone.php) . [Quill WYSIWYG Editor](https://orchid.software/en/docs/field/#quill-wysiwyg-editor) ------------------------------------------------------------------------------------ The Quill WYSIWYG (What You See Is What You Get) editor offers a seamless solution for integrating rich text editing capabilities into your web applications. With Quill, users can effortlessly insert images, apply text styling, embed videos, and more. To create a Quill editor instance, simply utilize the `Quill` field. Here’s an example of how to implement it in your code: use Orchid\Screen\Fields\Quill; Quill::make('html'); ### [Toolbar Controls](https://orchid.software/en/docs/field/#toolbar-controls) Quill provides a comprehensive set of controls organized into six groups, empowering users with diverse editing functionalities. These groups include: * **Text**: Tools for basic text formatting such as bold, italic, underline, and strikethrough. * **Color**: Options for adjusting text and background color. * **Header**: Tools for styling text as headers. * **List**: Controls for creating ordered and unordered lists. * **Format**: Additional formatting options like alignment and indentation. * **Media**: Features for inserting multimedia content such as images and videos. You can customize the toolbar by specifying which groups of controls to display. Here’s how you can configure the toolbar in your code: Quill::make('html') ->toolbar(["text", "color", "header", "list", "format", "media"]); ### [Extensibility](https://orchid.software/en/docs/field/#extensibility) One of the strengths of Quill is its extensibility through plugins. You can enhance the editor’s functionality by installing additional plugins. This can be easily accomplished using a JavaScript file. document.addEventListener('orchid:quill', (event) => { // Object for registering plugins event.detail.quill; // Parameter object for initialization event.detail.options; }); **Note**: You can add custom scripts and stylesheets through the `platform.php` config file Example for [quill-image-compress](https://github.com/benwinding/quill-image-compress) : Add the following in `config/platform.php` into the `resource.scripts` array "https://unpkg.com/quill-image-compress@1.2.11/dist/quill.imageCompressor.min.js", "/js/admin/quill.imagecropper.js", create a `quill.imagecropper.js` in `public/js/admin` with the following content document.addEventListener('orchid:quill', (event) => { // Object for registering plugins event.detail.quill.register("modules/imageCompressor", imageCompressor); // Parameter object for initialization event.detail.options.modules = { imageCompressor: { quality: 0.9, maxWidth: 1000, // default maxHeight: 1000, // default imageType: 'image/jpeg' } }; }); [Markdown Editor](https://orchid.software/en/docs/field/#markdown-editor) -------------------------------------------------------------------------- The Markdown editor field is a powerful tool for creating and editing text using the Markdown markup language. Markdown offers a simple and intuitive syntax that allows users to focus on content creation without getting bogged down by complex formatting. ![Markdown](https://orchid.software/img/ui/markdown.png) ![Markdown Editor Preview](https://orchid.software/img/ui/markdown2.png) To create a Markdown editor field, you can use the `SimpleMDE` class: use Orchid\Screen\Fields\SimpleMDE; SimpleMDE::make('markdown'); [Matrix](https://orchid.software/en/docs/field/#matrix) -------------------------------------------------------- The Matrix field provides a user-friendly interface for editing tabular data, offering flexibility and convenience. It’s particularly useful for scenarios where you need to manage structured data within a flat table format, such as storing information in a JSON column type. You can easily create a Matrix field by specifying the column headers. Here’s an example of how to define a Matrix field with columns: use Orchid\Screen\Fields\Matrix; Matrix::make('options') ->columns([\ 'Attribute',\ 'Value',\ 'Units',\ ]); ### [Customizing Column Headers](https://orchid.software/en/docs/field/#customizing-column-headers) In some cases, the values of the columns may differ from what needs to be displayed in the headers. You can address this by specifying keys for the columns: Matrix::make('options') ->columns([\ 'Attribute' => 'attr',\ 'Value' => 'product_value',\ ]); ### [Limiting Rows](https://orchid.software/en/docs/field/#limiting-rows) You can also set a maximum number of rows, after which the add button will be disabled: Matrix::make('options') ->columns(['id', 'name']) ->maxRows(10); ### [Custom Fields](https://orchid.software/en/docs/field/#custom-fields) By default, each cell in the Matrix field contains a textarea element. However, you can customize the field types according to your requirements: Matrix::make('users') ->title('Users list') ->columns(['id', 'name']) ->fields([\ 'id' => Input::make()->type('number'),\ 'name' => TextArea::make(),\ ]); > It’s important to note that the Matrix field performs field copying on the client side. While this works seamlessly for simple input and select fields, it may encounter limitations with complex or compound fields. [Code editor](https://orchid.software/en/docs/field/#code-editor) ------------------------------------------------------------------ A field for writing program code with the ability to highlight. ![Code](https://orchid.software/img/ui/code.png) Example: use Orchid\Screen\Fields\Code; Code::make('code'); To specify code highlighting for a specific programming language, you can use the `language()` method. Code::make('code') ->language(Code::CSS); The following languages are available: * Markup – `markup`, `html`, `xml`, `svg`, `mathml` * CSS – `css` * C-like – `clike` * JavaScript – `javascript`, `js` The number of lines is supported: Code::make('code') ->lineNumbers(); [Picture](https://orchid.software/en/docs/field/#picture) ---------------------------------------------------------- Allows you to upload an image. Example: use Orchid\Screen\Fields\Picture; Picture::make('picture'); You can specify the storage backend for the uploaded image using the `storage` method: Picture::make('picture') ->storage('s3'); Use the `acceptedFiles` method to define the types of files that the field should accept. This is done using unique [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers) . For example, to only allow JPEG images, you can use the following code: Picture::make('picture') ->acceptedFiles('.jpg'); [Cropper](https://orchid.software/en/docs/field/#cropper) ---------------------------------------------------------- Extends Picture and allows you to upload an image and crop to the desired format. ![Cropper](https://orchid.software/img/fields/cropper.png) Example: use Orchid\Screen\Fields\Cropper; Cropper::make('picture'); ### [Width and Height](https://orchid.software/en/docs/field/#width-and-height) In order to control the format, you can specify the width and height of the desired image: Cropper::make('picture') ->width(500) ->height(300); Or you can impose specific limits using `minWidth` / `maxWidth` or `minHeight` / `maxHeight` or use convenience methods `minCanvas` / `maxCanvas` Cropper::make('picture') ->minCanvas(500) ->maxWidth(1000) ->maxHeight(800); ### [File Size Limit](https://orchid.software/en/docs/field/#file-size-limit) To limit the size of the downloaded file, you must set the maximum value in `MB`. Cropper::make('picture') ->maxFileSize(2); ### [Value](https://orchid.software/en/docs/field/#value) The control of the return value is carried out using the methods: Cropper::make('picture') ->targetId(); The sequence number (`id`) of the `Attachment` record will be returned. Cropper::make('picture') ->targetRelativeUrl(); Will return the relative path to the image. Cropper::make('picture') ->targetUrl(); Will return the absolute path to the image. [Attach](https://orchid.software/en/docs/field/#attach) -------------------------------------------------------- The `Attach` field provides an intuitive interface for uploading images and files, including support for grouping and sorting. To create a file upload element, use the `make` method of the `Attach` class and specify the field name: use Orchid\Screen\Fields\Attach; Attach::make('attachments'); To allow multiple file uploads, use the `multiple()` method: Attach::make('attachments') ->multiple(); ### [File Upload Limitations](https://orchid.software/en/docs/field/#file-upload-limitations) For multiple file uploads, you can set a maximum number of files that can be uploaded using the `maxCount` method: Attach::make('attachments') ->multiple() ->maxCount(3); // 3 files You can also limit the file size using the `maxSize()` method. The size is specified in megabytes (MB): Attach::make('attachments') ->maxSize(1024); // Size in MB > **Maximum file upload size:** By default, the values for `upload_max_filesize` and `post_max_size` are set to 2M. You can change these settings in `php.ini` to allow file uploads larger than 2M. Use the `accept` method to specify which file types the field should accept, for example: Attach::make('upload') ->accept('image/*,application/pdf,.psd'); The provided string is a list of [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers) , separated by commas. ### [File Grouping](https://orchid.software/en/docs/field/#file-grouping) You can group files by different categories using the `group` method. This is particularly useful if you need to upload different types of files, such as documents and images. Attach::make('docs') ->group('documents'); Attach::make('images') ->group('photo'); To work with uploaded files that are grouped through model relationships, use the following syntax: use Orchid\Attachment\Models\Attachment; /** * Returns the attached "hero" (one-to-one). */ public function hero(): HasOne { return $this->hasOne(Attachment::class, 'id', 'hero') ->withDefault(); } /** * Returns documents (many-to-many). * Upload is handled via the group() method. */ public function documents(): MorphToMany { return $this->attachments('documents'); } ### [File Storage](https://orchid.software/en/docs/field/#file-storage) The upload field can work with different repositories. To do this, specify the repository key defined in `config/filesystems.php`: Attach::make('upload') ->storage('s3'); By default, the `public` storage is used. ### [Explicit File Path Configuration](https://orchid.software/en/docs/field/#explicit-file-path-configuration) If you need to override the standard file storage rules and explicitly define the upload path, use the `path` method: Attach::make('upload') ->path('/custom/path'); ### [File Validation and Sorting on the Server](https://orchid.software/en/docs/field/#file-validation-and-sorting-on-the-server) It’s important to validate files on the server side. For example, check that the file is an image with a specific aspect ratio or file type. To do this, use the `uploadUrl` method to specify the endpoint for file uploads: Attach::make('upload') ->uploadUrl(route('my.upload.endpoint')); Similarly, you can specify an endpoint for sorting files: Attach::make('upload') ->sortUrl(route('my.sort.endpoint')); ### [Error Handling and Message Display](https://orchid.software/en/docs/field/#error-handling-and-message-display) To ensure that users don’t encounter unclear errors, it’s important to provide clear and informative error messages. Use the `errorMaxSizeMessage` and `errorTypeMessage` methods to specify custom messages: Attach::make('upload') ->errorMaxSizeMessage("File size is too large") ->errorTypeMessage("Invalid file type"); [Group](https://orchid.software/en/docs/field/#group) ------------------------------------------------------ The `Group` component is used to combine multiple fields into a single line, allowing for more compact and organized interfaces. This is especially useful for grouping related data, such as first and last names. Group::make([\ Input::make('first_name'),\ Input::make('last_name'),\ ]), ### [Column Width](https://orchid.software/en/docs/field/#column-width) By default, fields will take up the full available width of the screen when you use the `fullWidth` method. This option is suitable for most scenarios where you need elements to fill the entire space: Group::make([\ // ...\ ])->fullWidth(); However, there may be cases where you want fields to occupy only the necessary space. The `autoWidth` method is perfect for situations where fields contain varying amounts of data. For example, when using radio buttons: Group::make([\ Radio::make('agreement')\ ->placeholder('Yes')\ ->value(1),\ \ Radio::make('contact')\ ->placeholder('No')\ ->value(0),\ ])->autoWidth(); For greater flexibility in configuring column widths, you can use the `widthColumns()` method, which supports CSS Grid. This method allows you to specify column widths using values for the `grid-template-columns` property: Group::make([\ // ...\ ])->widthColumns('2fr 1fr'); Accepted values for `widthColumns()` include: * Percentages (e.g., `30%`) * Pixels (e.g., `120px`) * Fractional units (e.g., `2fr`) * Other values such as `max-content` and `auto` > **Important:** The number of specified values must not be less than the number of elements in the group. The width settings apply only on desktop devices. On mobile devices, each field will be displayed on a new line, enhancing the responsiveness of the interface and improving user experience. ### [Column Alignment](https://orchid.software/en/docs/field/#column-alignment) Columns within a group can have different heights, especially when a header is present in only one of them. To create a more visually appealing interface, it is essential to utilize column alignment. When one of the columns has a header, aligning all columns to the bottom of the parent container will create a more harmonious look. To achieve this, use the `alignEnd` method: Group::make([\ // ...\ ])->alignEnd(); If you want all elements to align at the top, apply the `alignStart` method: Group::make([\ // ...\ ])->alignStart(); To ensure that the columns are aligned along the baseline of the text for consistency in content display, use the `alignBaseLine` method: Group::make([\ // ...\ ])->alignBaseLine(); For a symmetrical appearance, center the columns using the `alignCenter` method: Group::make([\ // ...\ ])->alignCenter(); [Button](https://orchid.software/en/docs/field/#button) -------------------------------------------------------- Buttons are used to submit a form filled out by the user to the server. To create a button that calls the `handler` method defined in the current screen, use `Button::make()`: Button::make('Submit') ->method('handler'); > The method must be available in the screen where the button is located. If you need to pass specific data to the method, specify it as the second argument: Button::make('Submit') ->method('handler', [\ 'user' => 1,\ ]); ### [Action Confirmation](https://orchid.software/en/docs/field/#action-confirmation) To prevent accidental actions, add the `confirm()` method. This will display a confirmation dialog before executing the action. It is particularly useful for irreversible actions, such as data deletion. Button::make('Delete') ->method('deleteItem') ->confirm('You will lose access to this item.'); > **Tip:** Use clear and concise messaging in `confirm()` so the user understands the consequences. ### [Submission URL](https://orchid.software/en/docs/field/#submission-url) To specify the URL where the form data should be sent, use the `action()` method. Typically, this will be the URL of a controller within your application where the request is processed after the button is clicked. Button::make('Submit') ->action('https://orchid.software'); Button::make('Submit') ->action(route('controller.method')); ### [File Download](https://orchid.software/en/docs/field/#file-download) To initiate a file download when clicking a button, use the `download()` method. This signals the system that the result of the method execution will be a downloadable file rather than simply displaying it in the browser. Button::make('Download Report') ->method('export') ->download(); [Link](https://orchid.software/en/docs/field/#link) ---------------------------------------------------- Links (`Link`) are used to direct the user to another page or to perform an action, such as downloading a file. To create a link to a specific URL, use `Link::make()` with the link text and the `href()` method: Link::make('Visit Orchid') ->href('https://orchid.software'); ### [Opening Link in a New Tab](https://orchid.software/en/docs/field/#opening-link-in-a-new-tab) To open a link in a new tab, add the `target('_blank')` method. This is useful for external sites or resources you want to open alongside the current page. Link::make('Documentation') ->href('https://orchid.software/docs') ->target('_blank'); ### [File Download](https://orchid.software/en/docs/field/#file-download) If the link should initiate a file download, use the `download()` method. This informs the browser that the link points to a downloadable file. Link::make('Download Report') ->href('/path/to/report.pdf') ->download(); > **Note:** Ensure the file is accessible at the specified path to avoid download errors. [Dropdown Menu](https://orchid.software/en/docs/field/#dropdown-menu) ---------------------------------------------------------------------- The `Dropdown` component allows you to create a button with a dropdown list of actions, which is convenient for grouping related actions, such as a three-dot menu for managing an item. To create a dropdown menu, list all actions in the `list()` method: DropDown::make() ->icon('bs.options-vertical') ->list([\ Link::make('Edit')\ ->route('platform.systems.users.edit', $user->id),\ \ Button::make('Delete')\ ->method('remove')\ ->icon('trash'),\ ]); [NumberRange](https://orchid.software/en/docs/field/#numberrange) ------------------------------------------------------------------ You can create ranges of numbers. Especially useful for filters. NumberRange::make(); Usage with filters: TD::make()->filter(NumberRange::make()); //or TD::make()->filter(TD::FILTER_NUMBER_RANGE); Result is an array with keys of `min`, `max`. [Custom Fields Creation](https://orchid.software/en/docs/field/#custom-fields-creation) ---------------------------------------------------------------------------------------- To create custom fields, refer to the “Builder” page in the documentation. This page provides a straightforward guide on how to create and customize fields according to your requirements. Access the “Builder” page by clicking here: [Builder](https://orchid.software/en/docs/builder) . Our Friends [![](https://orchid.software/img/sponsors/assisted-mindfulness-logo.svg)](https://assisted-mindfulness.com/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) [![](https://orchid.software/img/sponsors/sajya.svg)](https://sajya.github.io/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) --- # Eloquent Filters | Orchid - Laravel Admin Panel ![](https://orchid.software/img/next/docs-left-tentacli.svg) ![](https://orchid.software/img/next/docs-right-tentacli.svg) [](https://orchid.software/en/docs/filters/# "Scroll to the top of the page") Eloquent Filters ================ [Suggest Edit](https://github.com/orchidsoftware/orchid.software/edit/master/docs/en/docs/filters.md "View and edit this file on GitHub") * [Introduction](https://orchid.software/en/docs/filters/#introduction) * [Using Filters for Different Models](https://orchid.software/en/docs/filters/#using-filters-for-different-models) * [Running the Filter Always](https://orchid.software/en/docs/filters/#running-the-filter-always) * [Parameter Patterns](https://orchid.software/en/docs/filters/#parameter-patterns) * [Customizing Filter Display Values](https://orchid.software/en/docs/filters/#customizing-filter-display-values) * [Selection](https://orchid.software/en/docs/filters/#selection) * [Displaying on a Screen](https://orchid.software/en/docs/filters/#displaying-on-a-screen) * [Customization with Templates](https://orchid.software/en/docs/filters/#customization-with-templates) * [Handling HTTP Parameters](https://orchid.software/en/docs/filters/#handling-http-parameters) * [Filtering](https://orchid.software/en/docs/filters/#filtering) * [Query Examples](https://orchid.software/en/docs/filters/#query-examples) * [Sorting](https://orchid.software/en/docs/filters/#sorting) * [Default Sorting](https://orchid.software/en/docs/filters/#default-sorting) [Introduction](https://orchid.software/en/docs/filters/#introduction) ---------------------------------------------------------------------- Eloquent Filters are powerful tools for creating complex queries in Laravel. They allow you to easily manage and customize your search criteria. You can use Eloquent filters to filter your product catalog based on attributes, brands, and other criteria. To create a new Eloquent filter, you can use the `php artisan orchid:filter` command followed by the desired filter name. This command will generate a new filter class in the `app/Orchid/Filters` folder. Here’s an example of creating an `EmailFilter`: php artisan orchid:filter EmailFilter The generated filter class will look like this: namespace App\Http\Filters; use Orchid\Filters\Filter; use Illuminate\Database\Eloquent\Builder; class EmailFilter extends Filter { /** * The array of matched parameters. * * @var array */ public $parameters = ['email']; /** * Apply filter if the request parameters were satisfied. * * @param Builder $builder * * @return Builder */ public function run(Builder $builder): Builder { return $builder->where('email', $this->request->get('email')); } /** * Get the display fields. * * @return Field[] */ public function display(): array { return [\ Input::make('email')\ ->type('text')\ ->value($this->request->get('email'))\ ->placeholder('Search...')\ ->title('Search')\ ]; } } To use filters in your own models, you need to connect the trait `Orchid\Filters\Filterable` and pass an array of classes to the `filters` function: use App\Model; Model::filters([EmailFilter::class])->simplePaginate(); ### [Using Filters for Different Models](https://orchid.software/en/docs/filters/#using-filters-for-different-models) One of the great advantages of filters is that you can reuse the same filter class for different models. This allows you to define a filter once and apply it to multiple models, reducing code duplication. Simply specify the filter class when applying filters to your models: $filters = [\ EmailFilter::class,\ ]; User::filters($filters) ->simplePaginate(); Customer::filters($filters) ->simplePaginate(); ### [Running the Filter Always](https://orchid.software/en/docs/filters/#running-the-filter-always) By default, filters are applied only when the corresponding parameters are specified. However, if you want a filter to run on every request, you can leave the `$parameters` property as an empty array in your filter class. This way, the filter will be applied to all queries. For instance: public $parameters = []; Additionally, if the array returned by the `display` method is empty, the filter will not appear in the interface but will still remain functional in queries. This allows for flexible configurations where certain filters operate silently in the background. ### [Parameter Patterns](https://orchid.software/en/docs/filters/#parameter-patterns) Filter provides the capability to define parameter patterns using a convenient syntax. This allows you to create custom patterns and perform advanced filtering based on specific patterns. For example: /** * The array of matched parameters. * * @var null|array */ public $parameters = [\ 'pattern.*',\ ]; In the above example, the filter will match any parameter that follows the pattern `pattern.*`. This allows you to handle a wide range of dynamic parameters in your filters. ### [Customizing Filter Display Values](https://orchid.software/en/docs/filters/#customizing-filter-display-values) By default, the filter value is displayed in the format `name:value`, which works well for a wide range of filters. However, when dealing with IDs or system names, you might prefer to display a more user-friendly value. To achieve this, you can define a `value` method that returns a string. For example: public function value(): string { return 'Your custom value'; } If the filter is applied, this string will be displayed in the user interface. This approach is particularly useful when using filters that rely on IDs or system-specific names, allowing you to provide more meaningful or descriptive output for the end user. [Selection](https://orchid.software/en/docs/filters/#selection) ---------------------------------------------------------------- The “Selection” layer provides a convenient way to group and organize filters for both displaying and applying them to a model. This layer acts as an intermediary between the user interface and the model, simplifying the process of managing filters. To create a “Selection” layer, you can use the following command: php artisan orchid:selection MailingSelection This command will generate a new PHP file called `MailingSelection` in the `App\Orchid\Layouts` directory. Inside this class, you will find a single method called `filters()`. This method is where you should list all the filters that need to be displayed and applied. For example, let’s say you want to display and apply two filters: a email filter and a created filter. Your `MailingSelection` class would look like this: namespace App\Orchid\Layouts; use App\Orchid\Filters\EmailFilter; use App\Orchid\Filters\CreatedFilter; use Orchid\Screen\Layouts\Selection; class MailingSelection extends Selection { /** * @return Filter[] */ public function filters(): array { return [\ EmailFilter::class,\ CreatedFilter::class\ ]; } } Once you have defined your filters in the `MailingSelection` class, you can apply them to a model by using the `filters()` method. For example: Model::filters(MailingSelection::class)->simplePaginate(); By calling the `filters()` method on your model and passing `MailingSelection::class` as the argument, you can apply the filters defined in the `MailingSelection` class to the model. ### [Displaying on a Screen](https://orchid.software/en/docs/filters/#displaying-on-a-screen) The “Selection” layer can also be used to display filters on a [screen](https://orchid.software/en/docs/screens) . In the `layout()` method of your screen, you can include the `MailingSelection` class to display the filters on the screen. For example: use App\Orchid\Layouts\MailingSelection; public function layout(): array { return [\ MailingSelection::class,\ ]; } > Please note that filters with empty fields will not be rendered, ensuring a clean and user-friendly interface. ### [Customization with Templates](https://orchid.software/en/docs/filters/#customization-with-templates) The appearance of the selection layer can vary, such as being displayed as a drop-down list (the default) or as a form. You can define this using the `template` property. For instance: class MailingSelection extends Selection { /** * Template for rendering the selection. * * You can use any Blade template. Defaults: * - `self::TEMPLATE_LINE` for a linear layout * - `self::TEMPLATE_DROP_DOWN` for a dropdown menu */ public $template = self::TEMPLATE_DROP_DOWN; /** * @return Filter[] */ public function filters(): array { return [\ //...\ ]; } } Moreover, you have the flexibility to define your own `Blade` template within this property. [Handling HTTP Parameters](https://orchid.software/en/docs/filters/#handling-http-parameters) ---------------------------------------------------------------------------------------------- To automatically filter and sort your application’s data based on user-supplied HTTP parameters, the package provides a powerful and flexible set of tools. The key to effectively utilizing these tools is to ensure that your model includes the `Filterable` trait and implements a whitelist of acceptable filter and sort parameters. To make your `App\Models\Post` model filterable, follow these steps: namespace App\Models; use Illuminate\Database\Eloquent\Model; use Orchid\Filters\Filterable; use Orchid\Filters\Types\Like; use Orchid\Filters\Types\Where; use Orchid\Filters\Types\WhereDate; use Orchid\Filters\Types\WhereMaxMin; use Orchid\Filters\Types\WhereDateStartEnd; class Post extends Model { use Filterable; } ### [Filtering](https://orchid.software/en/docs/filters/#filtering) As mentioned before, any filtering action can only be performed on an allowed list of filters, which is specified using the `allowedFilters` property as a key-value pair. The key represents the name of your columns, and the value is the handling class. Here’s an example: namespace App\Models; use Illuminate\Database\Eloquent\Model; use Orchid\Filters\Filterable; use Orchid\Filters\Types\Like; use Orchid\Filters\Types\Where; use Orchid\Filters\Types\WhereDate; use Orchid\Filters\Types\WhereMaxMin; use Orchid\Filters\Types\WhereDateStartEnd; class Post extends Model { use Filterable; /** * The attributes for which you can use filters in url. * * @var array */ protected $allowedFilters = [\ 'id' => Where::class,\ 'user_id' => WhereIn::class,\ 'rating' => WhereMaxMin::class,\ 'content' => Like::class,\ 'publish_at' => WhereDate::class,\ 'created_at' => WhereDateStartEnd::class,\ 'deleted_at' => WhereDateStartEnd::class,\ ]; } Once you have specified the list, using automatic filtering is straightforward. Simply call the `filters()` method, for example: Post::filters()->paginate(); By leveraging this approach, you can easily apply filters to your query and paginate the results. This code will automatically apply any filters or sorting rules that were included in the user’s HTTP request. #### [Query Examples](https://orchid.software/en/docs/filters/#query-examples) In order to use this feature effectively, it’s important to have a solid understanding of how the HTTP parameters are translated into database queries. For example: http://example.com/demo?filter[id]=1 $model->where('id', '=', 1) This query will apply a `where` clause to the `id` column of your model, filtering out any records that don’t match the value provided by the user. http://example.com/demo?filter[name]=A $model->where('name', 'like', '%A%') This query will apply a `like` clause to the `name` column of your model, searching for any records that contain the letter “A” in their name. http://example.com/demo?filter[id]=1,2,3,4,5 $model->whereIn('id', [1,2,3,4,5]); This query will apply a `wherein` clause to the `id` column of your model, filtering for any records that match one of the specified IDs. http://example.com/demo?filter[id][min]=1&filter[id][max]=5 $model->whereBetween('id', [1,5]); This query will apply a `wherebetween` clause to the `id` column of your model, filtering for records where the ID is between 1 and 5. http://example.com/demo?filter[id][]=1&filter[id][]=2&filter[id][]=3 $model->whereIn('id', [1,2,3]); This query will apply a `whereIn` clause to the `id` column of your model, filtering for records where the ID is one of the specified values. http://example.com/demo?filter[rating][min]=1&filter[rating][max]=5 $model->where('rating', '>=', 1) ->where('rating', '<=', 5); This query will apply two separate `where` clauses to the `rating` column of your model, filtering for records where the rating is between 1 and 5. http://example.com/demo?filter[rating][min]=1 $model->where('rating', '>=', 1); This query will apply a single `where` clause to the `rating` column of your model, filtering for records where the rating is greater than or equal to 1. http://example.com/demo?filter[publish_at]=2023-02-02 $model->where('publish_at', '2023-02-02') This query will apply a single `where` clause to the `publish_at` column of your model, filtering for records where the `publish_at` date is exactly equal to February 2, 2023. http://example.com/demo?filter[created_at][start]=2023-01-01&filter[created_at][end]=2023-02-02 $model->whereDate('created_at', '>=', '2023-01-01') ->whereDate('created_at', '<=', '2023-02-02'); This query will apply two separate `whereDate` clauses to the `created_at` column of your model, filtering for records where the `created_at` date falls within the specified range. http://example.com/demo?filter[created_at][start]=2023-01-01 $model->whereDate('created_at', '>=', '2023-01-01') This query will apply a single `whereDate` clause to the `created_at` column of your model, filtering for records where the `created_at` date is greater than or equal to January 1, 2023. > HTTP filters or sorting do not have separate display templates. You can see an example of this [use in the table headers](https://orchid.software/en/docs/table/#sorting) > . ### [Sorting](https://orchid.software/en/docs/filters/#sorting) To enable sorting functionality, you need to specify a list of columns in the `allowedSorts` property. This list represents the columns in your database table that can be used for sorting. Here’s an example: namespace App\Models; use Illuminate\Database\Eloquent\Model; use Orchid\Filters\Filterable; class Post extends Model { use Filterable; /** * The attributes for which can use sort in url. * * @var array */ protected $allowedSorts = [\ 'id',\ 'user_id',\ 'rating',\ 'publish_at',\ 'created_at',\ 'deleted_at',\ ]; } Once you have defined the allowed sortable columns, you can easily enable sorting by calling the `filters()` method. This method will handle the sorting based on the provided HTTP parameter. For instance: Post::filters()->paginate(); Now, when you make an HTTP request, the sorting behavior will be as follows: http://example.com/demo?sort=created_at $model->orderBy('created_at', 'asc'); http://example.com/demo?sort=-created_at $model->orderBy('created_at', 'desc'); ### [Default Sorting](https://orchid.software/en/docs/filters/#default-sorting) If you want to specify a default sorting order for your data, you can use the `defaultSort` method. This method allows you to set a default column for sorting when no specific sorting parameter is provided via the HTTP request. For example: Post::filters()->defaultSort('id')->paginate(); You can also specify the sort direction as a second parameter. For instance: Post::filters()->defaultSort('id', 'desc')->paginate(); Automatic sorting and filtering of HTTP requests will not work with fields of models obtained through relationships. If you need sorting or filtering based on such fields, you can use third-party packages, such as [Eloquent Power Joins](https://github.com/kirschbaum-development/eloquent-power-joins) . This package can help you solve this issue: User::orderByPowerJoins('profile.city'); User::orderByPowerJoins('profile.city', 'desc'); However, you will need to manually handle the HTTP parameters `sort` and `filter`, as the package does not automatically recognize that the `-` sign before the field name indicates descending order for sorting, and also how to apply filters. You can do this using a “Filter.” Additionally, you should only use the package methods for sorting or filtering based on fields accessible through relationships. Our Friends [![](https://orchid.software/img/sponsors/assisted-mindfulness-logo.svg)](https://assisted-mindfulness.com/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) [![](https://orchid.software/img/sponsors/sajya.svg)](https://sajya.github.io/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) --- # Global Search | Orchid - Laravel Admin Panel ![](https://orchid.software/img/next/docs-left-tentacli.svg) ![](https://orchid.software/img/next/docs-right-tentacli.svg) [](https://orchid.software/en/docs/global-search/# "Scroll to the top of the page") Global Search ============= [Suggest Edit](https://github.com/orchidsoftware/orchid.software/edit/master/docs/en/docs/global-search.md "View and edit this file on GitHub") * [Using Full-Text Search](https://orchid.software/en/docs/global-search/#using-full-text-search) * [Customizing Search Queries](https://orchid.software/en/docs/global-search/#customizing-search-queries) [Using Full-Text Search](https://orchid.software/en/docs/global-search/#using-full-text-search) ------------------------------------------------------------------------------------------------ Orchid provides full-text search capabilities through the [Laravel Scout](https://github.com/laravel/scout) package. This package offers an abstraction for searching through your `Eloquent` models and requires that you specify the search driver that you will use for your application. These can be elasticsearch, algolia, sphinx, or other solutions. To make your models searchable within the application, you must register them in the Orchid [configuration file](https://orchid.software/en/docs/configuration) . You can do this by adding a new entry to the 'search’ array for each model you want to make searchable. For example: 'search' => [\ \App\Models\Idea::class,\ ], > This example uses [presenters](https://orchid.software/en/docs/presenters) > , it is highly recommended that you familiarize yourself with them. And also, take steps to configure the model from the documentation [Laravel Scout](https://github.com/laravel/scout) > . The [Presenter](https://orchid.software/en/docs/presenters) is used to display the search results, which calls the `presenter()` method of the model: namespace App; use App\Orchid\Presenters\IdeaPresenter; use Laravel\Scout\Searchable; use Illuminate\Database\Eloquent\Model; class Idea extends Model { use Searchable; /** * Get the presenter for the model. * * @return IdeaPresenter */ public function presenter() { return new IdeaPresenter($this); } /** * Get the indexable data array for the model. * * @return array */ public function toSearchableArray() { $array = $this->toArray(); // Customize array... return $array; } } In the representatives, we indicate the `Searchable` interface and define methods that will return values for a display to the user, for example like this: namespace App\Orchid\Presenters; use Laravel\Scout\Builder; use Orchid\Screen\Contracts\Searchable; use Orchid\Support\Presenter; class IdeaPresenter extends Presenter implements Searchable { /** * @return string */ public function label(): string { return 'Ideas'; } /** * @return string */ public function title(): string { return $this->entity->name; } /** * @return string */ public function subTitle(): string { return 'Small descriptions'; } /** * @return string */ public function url(): string { return url('/'); } /** * @return string */ public function image(): ?string { return null; } /** * @param string|null $query * * @return Builder */ public function searchQuery(string $query = null): Builder { return $this->entity->search($query); } /** * @return int */ public function perSearchShow(): int { return 3; } } [Customizing Search Queries](https://orchid.software/en/docs/global-search/#customizing-search-queries) -------------------------------------------------------------------------------------------------------- To customize search queries, you can override the default `searchQuery()` method. This method returns a `Builder` instance representing the query used to index the model. public function searchQuery(string $query = null): Builder { return $this->entity->search($query)->where('active', true); } Here, in the `searchQuery()` method, the `where()` method was used to limit the search to only active models Our Friends [![](https://orchid.software/img/sponsors/assisted-mindfulness-logo.svg)](https://assisted-mindfulness.com/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) [![](https://orchid.software/img/sponsors/sajya.svg)](https://sajya.github.io/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) --- # Layers for Grouping | Orchid - Laravel Admin Panel ![](https://orchid.software/img/next/docs-left-tentacli.svg) ![](https://orchid.software/img/next/docs-right-tentacli.svg) [](https://orchid.software/en/docs/grouping/# "Scroll to the top of the page") Layers for Grouping =================== [Suggest Edit](https://github.com/orchidsoftware/orchid.software/edit/master/docs/en/docs/grouping.md "View and edit this file on GitHub") * [Split](https://orchid.software/en/docs/grouping/#split) * [Customizing the Ratio](https://orchid.software/en/docs/grouping/#customizing-the-ratio) * [Reversing the Order on Mobile](https://orchid.software/en/docs/grouping/#reversing-the-order-on-mobile) * [Sortable](https://orchid.software/en/docs/grouping/#sortable) * [Preparing the Database](https://orchid.software/en/docs/grouping/#preparing-the-database) * [Preparing the Eloquent Model](https://orchid.software/en/docs/grouping/#preparing-the-eloquent-model) * [Usage in a Screen](https://orchid.software/en/docs/grouping/#usage-in-a-screen) * [Columns](https://orchid.software/en/docs/grouping/#columns) * [TabMenu](https://orchid.software/en/docs/grouping/#tabmenu) * [Tabs](https://orchid.software/en/docs/grouping/#tabs) * [Accordion](https://orchid.software/en/docs/grouping/#accordion) [Split](https://orchid.software/en/docs/grouping/#split) --------------------------------------------------------- Allows you to divide the screen into two customizable sections. This layout is particularly useful when you want to display two separate pieces of information side-by-side. Orchid provides a shortcut method for creating a Split layout with two views using the `Layout::split()` method. To create a Split layout, simply pass an array of two Layout objects as the first parameter to the `split()` method. You can also set the ratio of the two sections using the optional `ratio()` method as the second parameter. Here’s an example of how to create a Split layout: use Orchid\Support\Facades\Layout; Layout::split([\ Layout::view('first-view'),\ Layout::view('second-view'),\ ]); ### [Customizing the Ratio](https://orchid.software/en/docs/grouping/#customizing-the-ratio) By default, the Split layout divides the screen with a `50/50` ratio. However, you can easily customize this ratio using the `ratio()` method. This method takes a string argument that specifies the desired ratio. Here are the valid ratios: * 20/80 * 30/70 * 40/60 * 50/50 * 60/40 * 70/30 * 80/20 For example, to create a `Split` layout with a `40/60` ratio: use Orchid\Support\Facades\Layout; Layout::split([\ Layout::view('first-view'),\ Layout::view('second-view'),\ ])->ratio('40/60'), ### [Reversing the Order on Mobile](https://orchid.software/en/docs/grouping/#reversing-the-order-on-mobile) By default, the order of the two sections in a `Split` layout is fixed. However, you can reverse the order of the sections on mobile devices by calling the `reverseOnPhone()` method. Here’s an example: use Orchid\Support\Facades\Layout; Layout::split([\ Layout::view('first-view'),\ Layout::view('second-view'),\ ])->ratio('40/60')->reverseOnPhone(), This will create a `Split` layout with a `40/60` ratio, and the order of the sections will be reversed on mobile devices. [Sortable](https://orchid.software/en/docs/grouping/#sortable) --------------------------------------------------------------- Sortable in the Orchid platform simplifies managing the order of elements in your application. You will be able to easily change the order of items in your list and create interactive user interfaces through a simple drag and drop function. This significantly facilitates working with ordered elements in the user interface. ### [Preparing the Database](https://orchid.software/en/docs/grouping/#preparing-the-database) To start using the sorting functionality, you need to prepare the database. To do this, create a migration that adds a simple integer column to the table you plan to work with. Here’s an example migration: use Illuminate\Support\Facades\Schema; use Illuminate\Database\Schema\Blueprint; use Illuminate\Database\Migrations\Migration; class AddOrderColumnToTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::table('table_name', function (Blueprint $table) { $table->integer('order')->default(1); }); } // ... } Replace `table_name` with the name of the table to which you want to add the column. You can also choose any other name for the column by replacing `'order'` with the preferred name. > Don’t forget to run the migration using the `php artisan migrate` command to add the new column to the database. ### [Preparing the Eloquent Model](https://orchid.software/en/docs/grouping/#preparing-the-eloquent-model) After setting up the database and migrations, add the `Sortable` trait to your model: use Illuminate\Database\Eloquent\Model; use Orchid\Platform\Concerns\Sortable; class Idea extends Model { use Sortable; //... } > Note: Make sure to import the Eloquent model class and then use the `Sortable` trait. If the column name is different from `order`, you can add a `getSortColumnName()` method to your model to explicitly specify the column name: use Illuminate\Database\Eloquent\Model; use Orchid\Platform\Concerns\Sortable; class Idea extends Model { use Sortable; //... /** * Get the column name for sorting. * * @return string */ public function getSortColumnName(): string { return 'sort'; } } ### [Usage in a Screen](https://orchid.software/en/docs/grouping/#usage-in-a-screen) Now we have a prepared model with sorting functionality. Let’s create a graphical interface for drag and drop sorting. In the `query()` method of your screen, specify the list of models that will be displayed for sorting: use App\Models\Idea; use Orchid\Screen\Repository; public function query(): array { return [\ 'models' => Idea::sorted()->get(),\ ]; } Here, we use the `sorted()` method provided by the `Sortable` trait to get a sorted list of models. It also has an optional argument for sorting direction (ASC – ascending, DESC – descending). By default, the value is set to ASC. In the `layout()` method of your screen, add the graphical interface using the `Layout::sortable()` layer: use Orchid\Support\Facades\Layout; use Orchid\Screen\Sight; public function layout(): iterable { return [\ Layout::sortable('models', [\ Sight::make('title'),\ ]),\ ]; } [Columns](https://orchid.software/en/docs/grouping/#columns) ------------------------------------------------------------- Columns are useful when you want to group content horizontally. They allow you to divide the layout into multiple columns of equal width, which can be used to display content side by side. > Columns differ from `Split` in that they always have the same width and there can be many of them. Here is an example of columns: ![Columns](https://orchid.software/img/layouts/columns.png) To create columns in Orchid, you can use the `Layout::columns()` method. This method accepts an array of content, which will be displayed in the columns. Here is an example of how to create columns using the short syntax: use Orchid\Support\Facades\Layout; public function layout(): array { return [\ Layout::columns([\ UserProfileForm::class,\ ContactInformationForm::class,\ ]),\ ]; } In the example above, the layout is divided into two columns, and the content of each column is specified as the lowercase name of a class. [TabMenu](https://orchid.software/en/docs/grouping/#tabmenu) ------------------------------------------------------------- The `TabMenu` layout allows you to display navigation items visually similar to tabs, but instead of switching between tabs, clicking on an item will navigate to a different screen. To create a `TabMenu` layout, you can use the `artisan` command: php artisan orchid:tab-menu ExampleNavigation This will create a new class called `ExampleNavigation` in the `app/Orchid/Layouts` directory. You can define the navigation items in this class by implementing the `navigations` method: namespace App\Orchid\Layouts; use Orchid\Screen\Actions\Menu; use Orchid\Screen\Layouts\TabMenu; class ExampleNavigation extends TabMenu { /** * Get the menu elements to be displayed. * * @return Menu[] */ protected function navigations(): iterable { return [\ Menu::make('Get Started')\ ->route('platform.main'),\ ]; } } You can specify the items in the same way as in the [Menu section](https://orchid.software/en/docs/menu) use App\Orchid\Layouts\ExampleNavigation; public function layout(): array { return [\ ExampleNavigation::class\ ]; } [Tabs](https://orchid.software/en/docs/grouping/#tabs) ------------------------------------------------------- Tabs group content and help with navigation. Useful when you want to switch between hiding and displaying a some of content: ![Tabs](https://orchid.software/img/layouts/tabs.png) Tabs support short syntax by calling a static method, which does not require creating a separate class: use Orchid\Support\Facades\Layout; public function layout(): array { return [\ Layout::tabs([\ 'Personal Information' => [\ Layout::rows([\ Input::make('user.name')\ ->type('text')\ ->required()\ ->title('Name')\ ->placeholder('Name'),\ \ Input::make('user.email')\ ->type('email')\ ->required()\ ->title('Email')\ ->placeholder('Email'),\ ]),\ ],\ 'Billing Address' => [\ Layout::rows([\ Input::make('address')\ ->type('text')\ ->required(),\ ]),\ ],\ ]),\ ]; } Keys will be used as headers. Please note that you can specify the lowercase name of the class as values: public function layout(): array { return [\ Layout::tabs([\ 'Personal Information' => PersonalInformationRow::class,\ 'Billing Address' => BillingAddressRow::class,\ ]),\ ]; } By default, the active tab will be either the first or the last active one. If you need to define the active tab explicitly, you can do this using the `->activeTab($key)` method public function layout(): array { return [\ Layout::tabs([\ 'Personal Information' => PersonalInformationRow::class,\ 'Billing Address' => BillingAddressRow::class,\ ])->activeTab('Billing Address'),\ ]; } [Accordion](https://orchid.software/en/docs/grouping/#accordion) ----------------------------------------------------------------- Accordions are useful when you want to switch between hiding and displaying a lot of content in a compact space. They consist of a series of collapsible panels, each containing a header and content. When a panel is expanded, its content becomes visible, while the other panels are collapsed. Here is an example of an accordion: ![Accordion](https://orchid.software/img/layouts/accordion.png) To create an accordion in Orchid, you can use the `Layout::accordion()` method. This method accepts an array of panel names and content, where the keys of the array will be used as the panel headers and the values will be used as the panel content. Here is an example of how to create an accordion using the short syntax: use Orchid\Support\Facades\Layout; public function layout(): array { return [\ Layout::accordion([\ 'Personal Information' => [\ Layout::rows([\ Input::make('user.name')\ ->type('text')\ ->required()\ ->title('Name')\ ->placeholder('Name'),\ \ Input::make('user.email')\ ->type('email')\ ->required()\ ->title('Email')\ ->placeholder('Email'),\ ]),\ ],\ 'Billing Address' => [\ Layout::rows([\ Input::make('address')\ ->type('text')\ ->required(),\ ]),\ ],\ ]),\ ]; } In the example above, the accordion has two panels: “Personal Information” and “Billing Address”. The content of each panel is specified as an array of rows created using the `Layout::rows()` method. You can also specify the content of each panel as the lowercase name of a class that returns an array of rows: public function layout(): array { return [\ Layout::accordion([\ 'Personal Information' => PersonalInformationRow::class,\ 'Billing Address' => BillingAddressRow::class,\ ]),\ ]; } Our Friends [![](https://orchid.software/img/sponsors/assisted-mindfulness-logo.svg)](https://assisted-mindfulness.com/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) [![](https://orchid.software/img/sponsors/sajya.svg)](https://sajya.github.io/?utm_source=orchid&utm_medium=docs&utm_campaign=friends) --- # Icons | Orchid - Laravel Admin Panel ![](https://orchid.software/img/next/docs-left-tentacli.svg) ![](https://orchid.software/img/next/docs-right-tentacli.svg) [](https://orchid.software/en/docs/icons/# "Scroll to the top of the page") Icons ===== [Suggest Edit](https://github.com/orchidsoftware/orchid.software/edit/master/docs/en/docs/icons.md "View and edit this file on GitHub") * [How to Use Icons](https://orchid.software/en/docs/icons/#how-to-use-icons) * [Custom Icons](https://orchid.software/en/docs/icons/#custom-icons) * [Using Blade Component](https://orchid.software/en/docs/icons/#using-blade-component) * [Server-side Rendering with Templates](https://orchid.software/en/docs/icons/#server-side-rendering-with-templates) The package comes with a set of icons that can be found on the [Bootstrap Icons](https://icons.getbootstrap.com/) . These icons are prefixed with `bs.*` which is used as a prefix to identify the icons in your code. > If you’re looking for a list of icons for previous versions, please visit the [Orchid Icon Pack page](https://orchid.software/en/docs/orchid-icons) > . [How to Use Icons](https://orchid.software/en/docs/icons/#how-to-use-icons) ---------------------------------------------------------------------------- You can easily add icons to elements like buttons, links, or menus in your application. Here’s a simple example to help you get started: use Orchid\Screen\Actions\Menu; Menu::make('Settings') ->icon('bs.gear') // Use the 'bs.' prefix for Bootstrap Icons ->route('platform.settings'); In this example, the icon `bs.gear` will show up next to the “Settings” link. [Custom Icons](https://orchid.software/en/docs/icons/#custom-icons) -------------------------------------------------------------------- In order to include an icon from a popular icon set such as Font Awesome, you can create a new directory for storing the icons. For example, you can create a new `icons` directory and a `fontawesome` subdirectory in your `resources` folder: resources - css - icons -- fontawesome - js - lang - views Once you have created the new directory, you can download the appropriate icons and place them in the new directory. For example, you can download the [notebook icon](https://github.com/FortAwesome/Font-Awesome/blob/ce084cb3463f15fd6b001eb70622d00a0e43c56c/svgs/solid/address-book.svg) and place it in the `fontawesome` subdirectory. Next, you need to configure the package to search for icons in the new directory. You can do this by editing the `config/platform.php` configuration file: 'icons' => [\ // other icon configurations\ 'fa' => resource_path('icons/fontawesome')\ ], In the example above, we have declared the prefix “fa” and the directory where the icons are located. In order to display the icons in the package’s components, you only need to pass the prefix and the icon’s name. For example, the icon definition in a menu would look like this: Menu::make('Example of custom icons') ->icon('fa.address-book') ->url('https://orchid.software'); [Using Blade Component](https://orchid.software/en/docs/icons/#using-blade-component) -------------------------------------------------------------------------------------- Icons can be easily integrated into your views using Blade components. Follow these steps to seamlessly incorporate icons in your views: The code above renders the icon component with the specified icon path. You can also apply additional attributes to your icon component: You can also use the `Blade Icon Component` outside of the admin panel by [using the Blade component](https://github.com/orchidsoftware/blade-icons) . [Server-side Rendering with Templates](https://orchid.software/en/docs/icons/#server-side-rendering-with-templates) -------------------------------------------------------------------------------------------------------------------- In our application, we rely solely on server-side rendering, which means we don’t specifically prepare icons for JavaScript control. However, it is still possible to use existing icons within JavaScript by utilizing the `