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.

‍

In this Tutorial we show you how to user url parameters to redirect users to pages that have been shared with them from a mobile app.
‍
Context: This feature allows users of Pepper (planwithpepper.com) to share read-only version of their projects with friends.
‍

Soon it will be the foundation for following and collaborating on projects as well.

Featured App: Pepper, the project management app designed by women, for women, to keep all of the billions of things you do organized.
👉🏽 PlanWithPepper.com
‍

Js Component Code-----------------------------------------------------------------------------------------------------------------------|
const urlSearchParams = new URLSearchParams(window.location.search);const params = Object.fromEntries(urlSearchParams.entries())

;if (params.id){return params.id;}else { return "Sorry we couldn't find this project";}-----------------------------------------------------------------------------------------------------------

Support PragmaFlow on PATREON 👷🏽👷🏽👷🏽 www.patreon.com/pragmaflow

‍

Transcript

‍

All right. Welcome Addo people today. What we're gonna look at is how to share pages and how to do URL parameters, and we can do more than one. So I'm gonna show you a use case around this in this case, the page that I'm going to be sharing is a project from a project management app. So let me walk you through the workflow.

How we've set this up and yeah. Hey, off to the races. So by the way, before we start, let me say, the only component of ours that we're using is the JavaScript component which is super useful. And yeah, so let's take a look. If I'm on my project here, Mitch's test project, we go and we click on the menu and manage sharing.

And then when I get in here, I can click. Create a public link. And so then in theory, I could copy this although actually it's not really behaving very well. Luckily I was ready for this because it happened on the last take. And so here is that link anyways. Now what happens when I paste this in, you can see we're going to share dot plan with pepper.com.

And I am being redirected. So this page needs a little bit of visual design love. However, you can see shared project read only. And then if I go and add a task to it or something like that, you'll see it pop up. All right. So project task list is a test task. We're gonna add that.

Then we'll go and take a look at our project page. Just do a quick refresh. Oh, actually it's already there. So there we have it. You can see, I am sharing a web app version of this page. It's loading this project based on the link. How do we do it? As pretty nifty stuff and really important to a lot of use cases.

Let's start at the. All right. So when we go and click on this managed sharing page, we get to a sharing options page. And how did we set this up? Basically what I wanted to do is toggle this public link on and off so that you can revoke the link. And you can also of course, turn it back on and then, it'll pop up below and you can copy and paste it or use the share link button to send it to you.

So if we come to here, assuming the Addo gods, let us do that today. We'll just have to hold out for a few more seconds as this eventually, any moment now allows me to click through and actually loads and does its thing. Hold on guys. It's definitely gonna happen any second now.

I'll just keep coming along while we wait for this. Painfully maybe eventually yes. Load. Okay, great. So there we are.  eventually we'll edit that outta the video, but definitely not on the first version. So when we click on the sky right here in the checkbox, there's a few things that are happening. One we're toggling.

I don't know why it's three layers deep or why it's showing that way. Cause we just went to current project and then yeah, link sharing over here. So we're just toggling. If link sharing is available for this project. The other thing that we're doing is. If it's the first time this project is being shared and it does not have a project share link, then we need to create one.

So what I'm doing here is using a custom action that is pinging a API for creating UU IDs. And the reason we're doing this is of course, cuz if I just made the ID one or even some random number, it would be potentially easy enough to just change that parameter in the URL and find a project you're not supposed to.

And so here we have security by obscurity. You can see the link over here. And I will maybe just copy that for later. So we do a get, and when we run the test request, what comes back is some type of very randomized string that we can use as a project ID. All right. So we only do that if the current project.

Share URL. So basically if there is no URL yet we create, and if we've gone and created that, then what we do is we go and update the current project. So I just put the whole URL in here. This seemed way easier. So the URL is the base URL. The first parameter is ID and the ID is equal to this new value that we've just retrieved.

And the way we get that is from this custom action generate project ID, and we take the response. The last thing is if that response is equal to empty, then we're not gonna do this. And really what I should have in there is also an error saying, Hey, sorry, we couldn't get an ID for this project, or maybe a fallback randomizer or something.

But this is the basic of the workflow for now. Okay. So that's how we create the link. Now let's get to the interesting part. How do we make that link actually?

What I did over here is create a second web app. It is linked and it shares the same database. And so that makes it nice and easy to load projects that have been created in the original web app. Now there's a little hidden group down here, and this group has two components in it. One of them is a tax field where I'm gonna.

Put the output from my JavaScript and from the JavaScript component rather. And then one of them is the component itself. And so what the component does is it is grabbing from the from the search. It's grabbing the URL from the search bar. Then it's going in grabbing just the parameters that are at the end of the URL.

And if we take a look. You can see these are the parameters right up here. So hold on. Adal has obscured part of it, but no, here it is. So we have our question. Mark ID equals right here, and then the target is a second parameter that Adal inserts. So this is the one we're looking for. So what we're and you can just take and copy paste this code and make small modifications to it.

But I think it's worth explaining is so we grab those URL parameters, and then we say pers.id, meaning the one that is called ID. So if that exists, then we're gonna return it otherwise return. Sorry, we couldn't find this project. And so that allows me to use the text field, although I've actually stopped doing this originally, I was using the text field just to show an error message.

And so here set this to true, to execute the function, then change input value. So once we've run this, which is what's gonna happen on the page load then we are going to change the input value to the result. Of our arbitrary JavaScript component. And that result is gonna be right here, return pers.id.

So what we're getting is this right here, this parameter, which is called ID. Okay. For those of you who already understand how parameters work, I might have gone a little bit too deep. And for those of you who don't now you do. So let's move on. The next thing we're gonna do is screen follow project list.

hold on. So that's funny. This link thing is meant to be on click actually, but we don't use this, so I'm not sure why that's there. I'm just gonna delete it and hopefully I didn't break anything. All right. So we have the change input value. And so now what's happening is this input value is being updated to show the ID in the URL, this guy, okay. Now, how do we actually get the project while that's back into the regular alwa realm? So we are going to load a list of projects where the project share URL contains the parameter. So this ID, the reason I use contains is because I actually put the whole URL in there, but it will always contain this ID.

And that saved a lot of kind of tax processing. That's not so easy to. The next condition is that the project share URL is not equal to empty. And this is really important because if I don't put that and somebody just goes to the root URL without putting in an ID, then they will get a list of. Every project that doesn't have an idea and that would be really bad.

So I put that in there as one of the fail safes, and then the other is link sharing is true. So there actually is a property that gets toggled and I showed you that was the main property. Over here when we click this box. So that's what we're to is link sharing. So I put in a second security in there just to make sure that we don't accidentally share data, that we're not meant to little bit of extra security, usually not bad.

So that's really it pretty straightforward. I believe. Let me just do a quick review from the top of how this all works. So when. We go and click this box one. We are setting the project's link sharing to true. And again, I don't know why it's showing three levels of current project. Maybe it's just cuz I've gone through three pages.

So we're setting link sharing to true. And of course that's gonna make this guy show up over here sometimes visible and that is the condition. Okay. Now past that point, we're generating the U I D using the API call that I showed you before then we are updating the project so that it has that project share URL.

And that way, if someone clicks share link, they are able to do exactly that. Share the full URL. On the other side of things. If you take a look at the so at the page, that's going to load this. This is the web app. It is made up of a list which is loading the. URL ID from the basically from the JavaScript component, we have a condition that there must be a URL ID set and that link sharing must be true.

And then from the JavaScript component, just to bridge the gap, what we are doing is grabbing the URL, grabbing the parameters from the URL. Checking if there is a ID parameter and returning it otherwise returning a error message. And what we're doing with this return value is changing the input.

That's tiny and grouped in here. And that input once again, is going to be the source for this list right over here. Okay. I hope that made sense. I hope I explained this well. Good luck and enjoy. And let us know if you have any questions, if you want more cool tips like this, how to use our components and need a download stuff to do.

And just generally how to build really awesome things then please and subscribe and we'll see you on the next video.

‍