Notebook

5 Packages That Make Laravel Nova More User Friendly

11th January, 2022

I've been a Laravel developer for around five years, in the last couple of years I've been actively using Laravel Nova as an admin panel for my projects.

What is Laravel Nova?

Laravel Nova is a product by Laravel that provides a beautiful and intuitive interface for managing your database records. It makes it easy to create, edit, and delete records without having to write any SQL code. It attaches itself to the underlying model within a Laravel application, allowing a direct representation of it in an admin panel.

Laravel Nova has some great features out of the box, a simple navigation layout, plenty of field types to chose from and rich features like filters and metrics. Arguably though, its greatest feature is the extendability of the system through community made packages. There's a brilliant resource called Nova Packages that makes discovering these packages incredibly easy.

My educational background is in design and my current day job (Full Stack Developer at Inktrap) requires a good understanding of how users interact with a piece of software. This is generally known as User Experience (UX).

What is UX?

User experience, or UX, is the process of creating products that are both useful and enjoyable to use. UX designers strive to make products that are intuitive and easy to use, while also taking into account the user's needs and preferences.

Why does this matter?

We often forget that the people running a company or using an admin panel are users too. An improvement in the user experience of an internal tool or admin panel allows people to more effectively manage their application.

Laravel Nova Packages

Having built many production applications for clients and myself using Laravel and Laravel Nova, I've come across a few Laravel Nova packages that offer some really quick wins in terms of improving the user experience of an admin panel.

I'd like to share them with you today:

Collapsible Resource Manager

The out of the box navigation in Laravel Nova is fine when you have a small application that requires some basic admin functionality. As your application grows, you realise the automated ordering and lack of sub navigation starts to overwhelm the sidebar. That's where the Collapsible Resource Manager package comes into its own, it allows you complete control of what goes in your sidebar. It does this by creating an object like array, where you can set configuration options and nest features.

Benefits of this package:

  • Custom order to resources, allowing you to surface the most important resources at the top of your sidebar which makes navigation easier for users.
  • Multiple levels of navigation. It allows you to nest resources within groups and expandable sections. This means you can hide away some tertiary resources, but still keep them grouped near the main resource. An example of this would be grouping 'Tag' types in a 'Meta' folder under a 'Blog' heading, instead of having them all in the top level navigation.
  • Custom links within the navigation. As an application grows, the admin panel will likely be used for more and more use cases. This package allows you to create custom links. I've personally used this to link out to other developer tools, such as Laravel Horizon, I've also used it to link to internal resources with particular filters pre-applied, for example 'Active Users'.
  • Customisability. It allows you to assign icons to groups and links, this is extremely useful because it means you can create context to the links in a visual way. Again, this is useful as an admin panel gets more complicated and better visual hierarchy is required.

Tabs

For simple admin panels, an individual resource page can be quite simple. You might have a few fields you want to edit and a couple of relations you want to navigate through, for example, a Listing resource with Tags and Location resources attached. As an application grows, so does the data attached to a model and the number of models related. An example here would be a blog post, you have the title, slug and content, but also related tags, media items, meta tags, related posts etc.

Trying to show all of this on one page is overwhelming, therefore I recommend using the Nova Tabs package to help group these data points into a usable format.

Benefits of this package:

  • Improved navigation. These tabs are shown on an individual resource page, by grouping fields into tabs, that can be labelled, users can easily find the information they're looking for. This tabbed functionality can also be used while editing a resource.
  • Customisability. A simple feature, but good to know it exists. Tabs can be labelled with text but also icons, making navigation a glance much more intuitive.
  • Actions. You can Laravel Nova actions to the tabs, giving users quick access to commonly used actions.

Detached Filters

Laravel Nova's default filters are a great way to narrow down results on a resource index page. As an application grows, so do the things you want to filter and this can eventually overwhelm the small dropdown, making it hard to find the filter you want. That's where the Detached Filter package comes in, it allows you to take the filters from the dropdown and put them at the top of the index page. This means they can stretch the full width, rather than being contained to the dropdown, this makes them much more accessible and they better scale as your application scales.

Benefits of this package:

  • Improved layout of filters. This package allows you to put the filters at the top of the index page. Alongside this, it allows you to organise filters into columns and cards, meaning you can group them by their function or use case.
  • Collapsable filters. One of the benefits of filters in the dropdown menu is they can be easily hidden. This package has the option of making the filters section collapsable, meaning it won't overwhelm the top of the page if you have many filters.
  • It works with existing filter setups. You don't have to redo your filter setup, you simply wrap your existing filters in a function and refer to that for displaying them. This makes migration to the new filter system easy to do.

Sortable

Eventually, you're going to want to sort your resources in the admin panel. This could be sorting featured blog posts on your home page or reordering FAQ's. Thankfully, there's a package that allows you do it intuitively within your index pages. By installing the Nova Sortable package, you can specify which resources you want to be reorder-able, it will then add some simple sorting controls to the index page, the primary control being the drag and drop function.

Benefits of this package:

  • Easy to install. This package comes with some great docs that show you how to create the necessary migrations, make model changes and finish the general setup.
  • A really nice UI. This package adds a few controls to your index page to allow sorting. This includes a nice drag and drop option, that makes re-ordering resources incredibly simple. It also comes with move to top and move to bottom

Flexible Content

Now, this one might be slightly controversial. There is an argument for using a dedicated content management system for managing more complex content. However, that's not always an option, therefore, I'd like to share the Flexible Content package. This package allows you to create complex content using a matrix like system found in CraftCMS. You can create predetermined blocks for content, for example, a text section, a CTA section, related posts, image sliders etc. You can then add and reorder your piece of content from these blocks. This is perfect for creating a simple, but flexible blogging system within Laravel Nova.

Benefits of this package:

  • Complete control over fields. Although a little tricky to set up, one of the major benefits of this package is the complete control it gives you over the layouts and blocks you can create. This allows you to create interfaces that exactly solve your content specific use cases.
  • Flexible output. This package stores the content created a nested JSON object within your database. This may be seen as negative by some, but, having used it on a couple of production projects now, it works extremely well for outputting the content on the frontend. Whether you're using React or Laravel Blade, you can parse this JSON object to output your content.
  • Compatibility with other packages. When creating blocks, you can use external field packages to create a richer experience for the user. It also integrates well with the Nova Media Library package, meaning images uploaded in a block can have transforms applied.
  • A good user interface. This package contains a simple, but usable interface for adding, removing and reordering blocks. Admittedly, it doesn't have the rich matrix blocks interface that CraftCMS employs, but it certainly gets the job done for 95% of use cases.

Wrapping up

So, there we have it, my non-exhaustive list of a few packages that can improve the usability of your Laravel Nova admin panel. These have all been battle tested in live production environments across multiple projects.

I'll leave it there, but remember, admin users are users too!

Where you can find me

You can follow me Twitter at @MadeByCrevans for more Laravel, Full-Stack and IndieHacker tips.

Subscribe to my newsletter

Follow me as I turn ideas into digital products and share my process, experiments and results along the way.