Modals in Inertia
This episode is for members only

Sign up to access "Modals in Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
10. Modal flow examples

Episodes

0%
Your progress
  • Total: 46m
  • Played: 0m
  • Remaining: 46m
Join or sign in to track your progress

Transcript

00:00
So another kind of obvious thing that I think we should still cover is opening
00:04
modals from different locations where they kind of don't belong and also opening modals from within other modals. Now all of this is pretty straightforward we just link to modals that's all we really need to do it's kind of like linking to a different page but let's take a look at this again so we're
00:20
completely clear. Okay so the first thing I want to do is change this open modal to open up the new note modal so let's say that we had a shortcut somewhere in our app that allowed us to quickly create a note. How would we do that? Well if we head over to our dashboard all we're gonna do is hook this up to that
00:37
new modal. Now this isn't going to redirect us over to the notes index page despite that having a base path it is just going to show the modal so let's take a look. So we're gonna say notes.create and let's go over here and try this out. So as you can see although we've defined the base route for this as
00:56
the notes index page it doesn't redirect us over to the notes index page what it does do is if we re-hit this page we end up on the notes index page so that's what that base route is doing but from here we can just do what we would expect so this is like a quick create note action I can create a new note in here
01:15
hit create note and of course that's just going to redirect me back over to the notes page because that's what happens in our controller. So this is what I like about this we can just be really flexible as to where we're calling these modals and it just works really nicely. Now of course another
01:30
thing that we could do is link to another modal from within a modal so let's set this back to our modals example just here and we get the close button but inside of our example modal if we wanted to link off to a new modal we could do that very easily so let's bring in our link just here and we can
01:50
go and link over to create a new note for example so let's set this to go through to the notes create route and we'll just say create note of course this is looking a little bit odd but that's fine and we'll of course just make sure we import link from Inertia Vue 3. Okay let's go over open this
02:11
modal click create note that shows us the new modal we can enter something and of course we're redirected back over to this page so there we go a couple of flow things and opening modals within modals and it just works how we would expect

Episode summary

In this episode, we're diving into some slightly more advanced modal flows. We'll explore how to open modals from different parts of the app, even places where they wouldn't normally "belong." Plus, we'll check out how to open a modal from inside another modal.

First up, we walk through hooking up a shortcut (say, from your dashboard) that lets you quickly create a note via a modal. We see that even if the create note modal's base route is the notes index, using the modal doesn't redirect you to another page—pretty handy for keeping users in the flow.

Next, we show how you can add a link inside any modal that opens up another modal. For example, inside a regular modal, you can include a link to create a new note, and it just works! We take care of making sure everything's imported and set up in the component, and demonstrate that transitioning between modals is seamless.

All in all, this lesson is about flexibility: you can open modals from anywhere, layer them if needed, and the modal flow just works like you'd expect.

Episode discussion

No comments, yet. Be the first!