DISCLAIMER: While this content has been left online for learning purposes, Ops machine specifically recommends NOT using Adalo, ad it's been shown to be frighteningly insecure, incomplete, and generally near impossible to deliver with, in the time that we used it.

Further, the Pragmaflow component library is no longer maintained after having been broken repeatedly by adalo platform updates.

‍

‍

How to create forms that use many-to-many relationships, records from multiple collections, and that create a better overall user experience.

The app being demoed is https://depotop.nu/

‍

‍Transcript

‍

Hey, everyone. Welcome to another Pragma flow video about doing cool things into Dialo. Often we focus on components, um, but today we're gonna focus on some really, you know, just using native a Dialo functionality. Uh, one of the things that comes up really often is how do you make nice interactive forms?

How do you use many to many objects and forms? Um, how can you. Use related objects that have their own properties in forms again and, and make sure everything is connected properly. You know, the forms widget does a lot of great things and we all know it has a few limitations. One of them again is many to many objects.

Um, and yeah, so we basically run into this issue. Where, you know, Hey, we wanna create a checklist, right? I'm actually gonna talk about the app in front of us just to illustrate one of the situations. So, so this app is, is really cool. Uh, it's one of our clients who is building it out with us and, uh, this basically prepares parents so that they can take three days.

And in those three days they can end to end train, uh, potty, train their. Which is way better than most, uh, it's data driven. And so there is, um, you know, self-assessments and things like that to help guide parents to know if they and their kids are ready. And that's the page we're looking at now. So here is the.

Um, on the left side here, the child self test, and this one is the user self test and they're basically identical. So I will only really walk us through one. And so the way this is built out is that we have the, um, you know, we have the user just, let's talk about the database a little bit. Uh, we have the user, we have the user child test, and then we have this list of criteria.

Uh, and so how do we link that all up and how do we make that work nicely? Form. So here we have for the child test seven criteria, uh, the app is currently in Dutch, but it will be translated to English, uh, pretty soon. Uh, and we did put out a language translation component, so that might be a really good test of it.

Um, and yeah, so basically what you can see here is all the different criteria. So we want them to show up here. We want the user to check them off. And then at the end we want the user to hit a button and that record needs to be saved. Uh, and then there's a few other things, right? How do we handle if the user leaves in the middle, uh, of this, you know, we think about maybe creating temporary records.

But, you know, if, if we do that one, it actually doesn't work. I tried that at first and the reason it doesn't work is cuz you need to transfer all these relationships and, and that I don't believe, uh, there's a really good way to do. Um, but then let's say if you were to create a temporary object to store the data and, and, you know, save it at the end, um, then what happens when the user leaves, how do you bring that back, et cetera.

Right. Um, and. And yeah, there just starts to become, as you think this through, there's so many paths the user can abandon at the process, you know, do you create the real object and then just mark it as completed at the end? And if you are anyway, so let me just show you what, what I did and, um, hopefully this will be some help to you.

So the first thing is. When the user lands on this page, what we are doing as an action is we are creating a new user child test record, cuz that's, what's gonna store all the data. Uh, but we don't wanna do this every time cuz I would get really messy. So instead what we are doing is, uh, first of all, we have in progress.

True. Usually I would do, is it completed rather than is it in progress, but. Um, in order to make this compatible with all the old records that didn't have this field. Um, and because it's going to default to false, I needed, you know, to phrase it in a way that, um, it is true outta the gate. And then I set it to false and that's gonna match all the existing records.

Right? Because here, what I'm saying is we are only going to do this. If the count of the log in users, user child tests. Where in progress is true, is equal to zero. Right? And if I had done this in the other way is completed, is true. Uh, then it would be hard to look for the ones where is completed as false cause that would be every historic record that was done in the past.

Uh, and that would not work. So, um, just again, from the top, when the user lands on this page, we check if they have a current user child, In progress and if they don't, then we create one for them. All right. Now what's happening here? How do we link everything up? Um, so we have this inner list. We're gonna start with the inner.

This is a list of the child criteria. Um, and so that's gonna load up and then the user can check them off, but what does checking them off do? Right. So actually this is a list within a list. The outer list is going to load the current user test. And, uh, the way we're doing that is we're going to find the log in user's user child test, where in progress is true, and we're going to make a maximum number of items.

Which is one, and we're going to sort it from newest to oldest. Now, if everything's done well, we don't need the maximum number of items at one, and we don't need to sort newest to oldest, but sometimes things don't go well. And so this is gonna make sure that we're always showing the most recent one. Um, I actually often don't like to set a maximum number of items even in these situations, because if I see five lists, then I know that something's wrong somewhere else.

And so often it can be useful not to hide breakages from your. Um, in this case, it still was a bit useful to do so we create when the user lands on the page, we create this record. If they don't already have. This list is going to load the most recent record, whether it's the one that was just created or whether they started it three months ago, left the app and only came back now, right.

It's just finding the most recent record. And then when we click on these check boxes, which are in the criteria list, which is inside of the user test list, then you've probably figured out what we're going to do. Is we're just going to include or attach the criteria to the user test. Now, of course, we've set up these relationships and it's probably worth taking a quick peek into the database, uh, just to see how things are set up.

So, um, if we take a look at the user child test set up here, it's nothing too complicated. So we have the relationship to child test criteria, which is a many to many, and then we have the relationship to the user. So with those two in place, we have everything we need. Now. Um, this particular app actually has some conditions.

Based on the outcome, uh, based on the number of boxes that are checked, we're gonna direct users to one of two screens, one, which says, Hey, you're ready. And the other, which says, Hey, sorry, you're not ready. And so, uh, once again we are, oh, um, now what's important is because we are going to that other page.

And, uh, by the way on that other page is where we're actually gonna mark the record as complete. That's how we decided to do this because once I click this button and continue to one of my modal pages, maybe I want to hit, cancel, and go back and edit this. So we decided that only when you click the okay button on this page, is it actually going to update the record?

And of course, the way it's gonna update the record is by, um, setting. In progress to false. So then it'll no longer be loaded up here. And if the user comes back to this page, a new user test will be created now because we are updating this record on the next page. We actually have to pass the record data to that page.

And so this button over here is in a. And that list is exactly, uh, configured exactly the same as the checklist above. Now, I played with the idea of putting these in the same list and, and you could argue that would be a good idea because then it's just one list that's loading on the page. The reason I didn't do it was because I couldn't figure out how to make the layout work nicely, um, in the same way as you see.

There is actually a group and a box here that I've done. Uh, this is a rectangle because the button was disappearing behind here. Uh, and when I show you, actually, if I show you how the page scrolls, just how we set it up, uh, oh, it's funny. I had forgotten to update. By the way, this is a little random thing, but reload frame is an incredibly useful way to update your app without refreshing the entire page.

I just learned that so you can see the way the scrolling is done and this rectangle actually is just translucent. Uh, I'm not sure if there's a way to do a. A, uh, transparency, gradient, which would be the best effect, but this still does a nice job of cleaning things up, um, while still giving, you know, not a weirdness of like a harsh break.

Um, and yeah, so basically just the way to get this scrolling properly. Um, that, that's why I did that rectangle. So just wrapping everything up. Now, this button is a list. It loads the same user test as here. And then when you. Continue to the next page. It's passing that data so that we can update this record on the next page.

And there are two conditions. So if the current user child tests criteria count is greater than two, then okay, you're ready to continue. And if it is not greater than two, then you are. Ready to continue. And so that's how the, um, that's how the conditional forwarding is happening. So I can show you now through this process right here.

Mm-hmm , I'm gonna click four of them. Okay. And there we are, although that didn't look like the yes page, it would be really funny if this failed in the demo, crazier things have happened. Uh, let's take a. So we have, uh, user child test records. That's the one I wanna look at now. Don't worry. All of this is test data.

None of it is user data. And, um, hilariously enough, this didn't work out as I was hoping. So we'll have to figure out why it didn't create that new record. Uh, or is it just that the database hasn't updated for some reason? Hmm.  Well, this kind of ruins the video a little bit. Um, on the other hand, it's fun to show that not everything always works out as perfectly as we hope.

And sometimes things we've already gotten working just break anyways. So let's see really quickly here. What could be the issue? The issue could be that perhaps I, as a user, I'm just not looking far enough and I already had a test in progress. So let me gently scroll down and just see if that is the case.

Oh yeah. Uh, here, this is already in progress. So the issue is that I did go to the wrong page and it didn't update. Let's delete this one and see what happens. So I think the issue is with the redirection. Uh, let's just reload this frame. Oops. Wrong reload button. Oh, well, so here let's go to the self test.

Hmm. You can't get a wind right now. Huh? What is happening?

Oh,

Hmm. So we have the condition that if my user. If the count of my user's records, which are not completed is zero. Then I should get a new record. And we know that this has been working well already. And it's unlikely that this past record is causing the issues. Uh, however, you can see here that, uh, this has basically done its job in the past.

So let's just push through this a little bit more and see, huh? There it is. Okay. So it turns out to have just been maybe loading issue. Uh, and I got impatient. So we have now this fresh new test, let's go one and two. And if we click here, it is saying I did not get to the right criteria, the right number.

So now I have four and that should be enough, but it still isn't. Let's try checking all of them, just to see it's funny why this count wouldn't work. Although there are some Adela bugs, uh, some known bugs around account. So let's see again, what happened here? So this worked, my child, uh, test criteria did attach, and the only thing that didn't go properly.

Is redirecting to the correct page so that I can close this up. Let's just take another quick look and see what could be going wrong. I almost wonder if a download just didn't update quickly enough on the back end. This is a rather heavy app, and I'm wondering if there was account issue. Um, but just pushing through here a little bit more.

This is the one that is not working. And it should be if the current user child tests count of child test criteria is greater than two. And we definitely can see here that that condition is true because there is seven. So this might be a mystery for another day, though. I hate to leave you all hanging.

One cool thing about this technique is that, look, it has reloaded my past record. And so that goes very nicely. Okay. So here we go. It was just an issue of Adal, not quite updating the count quickly enough. And so here we go.  this is. Meant to advance to the test yourself. Um, because I'm using zoom in the web preview, it is taking a long time to load, though.

It is typically much faster. Um, so we can see that's worked out. And if I wanted to go back to the self test, now I have a fresh one. So hopping into a Dialo once more. Yeah, there we are. So we see here is my old record. Here is my new one. So as it turns out outta the gate, everything was working properly.

I got a little impatient and got a little panicky when there were delays. Um, but this is the end to end technique of how you can create really awesome user forms. And you could go much further with this, right? You would be able to say. Let me just talk about some other ways we could use this is here.

The only thing inside of this user child test is another list with criteria, but I could add text fields, you know, outside of the inner list. Right. I could, um, basically create a bit more space, uh, expand my outer list. And in there I could put check boxes for true false fields within. The parent object, I could put a list that would load another relational object.

Um, so there's all sorts of things that we could do. And this is just a beautiful way to create really dynamic and useful forms that aren't bound by the same. Kind of criteria as the original, um, Dialo forms, editor. The thing to be really mindful of while you're doing this is just field validation. So you will have to create your own conditions.

Um, you may decide that you wanna hide the button based on a certain condition, and you could do that using visibility conditions, you would probably, um, You may wanna use count if your goal is to use multiple conditions, but then you could say something like, let's see if we can figure this out on the fly.

Um, if user self test count. No, that wouldn't be it. Uh, if user self test. Hmm. I can't link into another object from here. I was hoping I could. Okay. If logged in users, uh, here. Yeah. It's of course, where I have to be self test criteria. Uh, start to get lost. Okay. If the logged in users, user self test self test criteria count.

Is equal to, I guess we'd say is greater than zero. Then we would show the button. Right. And then usually you'd want to put in its place a, uh, a kinda inactive state button that would show the user that there will be a button here once you, you know, match the criteria. Um, so this is, you know, just one and then I could add more criteria to this and this would be a.

To basically put in the validation so that these user cannot advance. If I had multiple fields, then I could, you know, point to, uh, could I point to an input from here? Yeah. I'd have to set this up a little differently, but I could point to inputs that I had on the screen and then say if their values are not empty.

Um, so this is a kind of framework that I figured. Um, in the past couple of days to solve, what's been a problem. That's come up quite a bit for me. And, uh, I leave it to you to see how far you can run with it and what kind of cool crazy things can be built on top. So thank you and, uh, enjoy. And, uh, yeah, if you, if you like this video, just to hit subscribe, cuz we're gonna be putting out more of.

‍

‍