The Caspio Low-Code Platform
All the Tools and Support You Need
Unlimited Users With Every Plan
Ned Pajic: Hi, and welcome back to this video guide on how to build a Simple Covid Test Tracking Application using Caspio’s low-code no-code platform. In the final video of this guide, we’re going to learn how to deploy our entire application to Weebly CMS. Let’s take a look.
Here I am logged inside Weebly, and inside Weebly I have created two portals, one for the admin user and one for the patients. You can add other sites if you’d like, but for now, let’s go inside a patient’s portal and let’s see how we can embed our data pages. So we’re going to click on edit site. And in Weebly I have created two different pages. I have view results, you can see it up here. And I have new patient. So we’re going to be editing the new patient webpage. This one here, if I want to place content inside my Weebly website, I need to go back to build.
And here I need to move over the embed code widget. Inside our widget is where we’re going to paste our registration form. So let’s go back to Caspio, let’s find that data page. Here it is, we’re going to hit deploy, enable deployment status, and we’re going to grab our imbed code by copying it. And all you have to do is copy, go back to Weebly, click inside that widget and paste your Caspio code and hit publish. At any time, you can click on the link and you’re going to be able to preview to see what that registration form looks like on your website. Again, the purpose of this video is not to build something sophisticated and fancy and aesthetically pleasing. It’s really just meant to demonstrate the functionality of the Caspio platform and how quickly you can build this application. And then later on you can change the aesthetics to look and feel, the style according to your own brand and your own color palette, whatever preference you might have.
Now, whoever goes through this URL is going to be able to click on that link and create a patient profile. The next data page that we’re going to deploy is the view results. Okay, so let’s go back to Caspio. Let’s find that data page. View test results for our patients. We’re going to hit deploy. Once again, we’re going to copy our code. Let’s go back to Weebly. And for this web page, we’re going to move over the embed code widget, paste, publish, and now we should be able to tab back and forth. Not only can we log in as the patient to be able to see all of our prior orders, but we can also, if we’re a new patient, we can sign up for the account. The reason why the system keeps me logged in here is because once we hit preview, if you recall from the previous video that we did in part four, when I hit preview, I actually logged in as John, the system will keep you logged in until you click on the logout link to log out as the patient. So those are all of the data pages that we need to actually deploy for our patients. Let’s go back to Weebly, Let’s close that screen.
And now let’s go inside the admin portal. We’re going to click on this site, click edit, and the first data page that we’re going to deploy is manage patients. So let’s go back to Caspio and let’s find that View Manage Patients, hit deploy, grab our embed code, same process, move over the embed code widget, paste, publish. And let’s take a look. Now because I haven’t logged in as the admin yet, that’s why you’re seeing the login screen before you. So let’s quickly log in as an admin level user. But before I do that, let’s go back to our table and let’s make sure we have an admin level user. Okay, so I have John Doe. I use the same name for my patient and also my admin level user. So let’s change that to something else. We’ll say Sarah Smith, and then we’ll say sarahs@admin.com, and let me save that change.
So now let’s go back and let’s log in as Sarah, sarahs@admin.com. Password can be test. And here I am logged in. And you can see that we only have one patient, John Doe. Currently it’s an active patient, which means they’re going to be able to log in. But if you’d like to see how this report is populated, let’s go back to the patient side and let’s sign up as a new patient. Let’s say we go with Karen Lee, karenl@patient.com. Let’s put in the same email twice just to validate that it’s correct and we’ll just say testing 1, 2, 3, testing 1, 2, 3. As soon as the new patient signs up, the results page for the admin, once we reload the webpage, you’re going to see that second patient. So as new patients sign up, we’re always going to be able to see those patients here inside a results page.
Now we need to go back to our data page and replace test.com with the actual page that I created inside Weebly. So if you come over here to Weebly, you’re going to be able to see all of my pages for the admin. And I have this page called Patient Details. So really all you need to do to make it easier for yourself is just to grab any URL. Let’s just copy this one for your admin. Let’s go back to data pages. Let’s edit that data page and let’s navigate to our HTML block. Here’s my HTML block. Let’s highlight the text. Let’s click on the link button. And once again, you’re going to see test.com. Let’s replace test.com with the link that we just copied. However, our page is called Patient Details. So let’s make sure we put patientdetails.html, that’s the name of my webpage. Make sure you put .html.
And then afterwards, it’s just going to keep the same thing where you have the question mark, parameter name and you’re passing the patient ID. Let’s hit okay, and hit finish. Now that link should work. So if I go back to my website and I refresh and I hover over, you’ll see in the bottom left hand corner of my screen you will see patientdetails.html question mark. And we’re going to pass the patient’s ID inside the URL.
Now I need to deploy my details page that’s going to display the patient details because it’s receiving this ID that we just passed. So back to our data pages. Let’s deploy patient details, grab our embed code, copy it, back to Weebly. Here’s the page, patient details. Let’s go to build, move over the embed code widget. Let me remove this default widget, and we’re going to paste our newly copied code, hit publish, and let’s test this out from the beginning. Now we can click on the details link, let’s say for John Doe. I’m passing John’s ID, and my details page is displaying John’s information because it’s receiving the ID that I just passed.
Next, let’s go ahead and embed our report that displays all of the tests that belong to John. At the moment, you’re going to see no records found because we haven’t submitted a test for John just yet. But let’s go back to our data pages. Let’s find that data page. Here it is, let’s hit deploy, copy our code, back inside Weebly, and we’re going to go ahead and deploy that data page directly underneath the submission form. So now you can see we have two data pages embedded on the same webpage. Let’s hit publish. Let’s go to our page. Let’s go to details for John. And not only can you see John’s information, but directly underneath that you’re going to see all of the tests that belong to John. And again, as I said at the moment, there are no tests that belong to John.
What we need to do next is deploy our order form, which is the last data page. So when I click on this link, it’s going to take me to that page where I have the order form deployed. So in Weebly, I have created that page. It’s called order test. Once again, all you need to do is just copy your main URL to your website, copy that, go back to data pages, patient details, edit, and let’s navigate to our HTML block, highlight the text, click on the link button and replacetest.com. Click the link that I just copied, however, my link is actually called ordertest.html because that is the new webpage that I created in Weebly.
Let’s hit okay, and hit finish. Let’s test this out. Let me refresh. Now, when I click on that link, it’s going to actually take me to that page, but the final step is to deploy that form that’s going to allow me to submit that order. So let’s grab that final data page, hit deploy, grab the embed code, back in Weebly, order test, go to build, remove the default widget, move the embed code, and now we should have our final application deployed.
Let’s hit finish and let’s test that out. So here I am logged as the admin, we have John and Karen. If I click on the link for John, I can see John’s details. I can order the test. Here’s the submission form. Okay, here’s my email. You can see how it’s displaying correctly. This is my virtual field. So what’s going to happen is when I submit the form, that email is going to go out to John to let him know, hey, we just ordered your test. Your results are going to be available in your portal within 24 to 48 hours.
And that’s one thing I actually forgot to show you how to do, which I will in this video. I forgot to set up my email in the prior video. So let’s do that next. Okay, so when I hit submit and you go back to manage patients and you click on John’s name again, now you can see that very first test that’s been ordered for John. When John logs into his account and he reloads the page, he’s going to be able to see that test listed inside his portal. But let’s configure that email now that goes out to John that’s going to let him know that, hey, your test is going to be available within 24 to 48 hours. Because at the moment, as you can see, it’s still pending, the results haven’t come in yet, but as the admin user, let’s say the results come in, I can click on inline edit and now I can change the status of that test to either negative or positive. But to configure that email, let’s go back to the data page and let’s edit the order form.
Okay, there’s the virtual field that’s pulling the email based on the patient ID. On the next screen, what you’re going to do is enable messaging options and let’s do a acknowledgement email and let’s select that virtual field. What’s going to happen now is when you submit the form and email, it’s going to go out to John because we’re pulling that email inside that virtual field. And on the following screen, we can actually customize that email. So we can say noreply@company.com, for example, subject new Covid test order. And here we can customize the body of the email. We can say, your test was submitted, please log into your portal within 24 to 48 hours to retrieve your test results.
Use the following order number or order ID to pull up your test. Anyway, you get the idea. So now I can insert the field order ID right over there. So then when John logs in, he’s going to be able to take a look at the result of his test. You can also customize this in HTML if you’d like. I’m just using plain text for now. Okay, and then once you’re done, you can click finish. And now in the application, when we go to details and we click on order tests for John, upon submission of this form, John is going to get an email to let him know, Hey, your order was submitted. Please check in within 24 to 48 hours inside the portal to get the result of your test. From here, you can add headings, you can customize your fields, you can change the color palette if you’d like. There’s an infinite number of customizations that you can do on Caspio applications. This was really just a quick tutorial on how you can build something functional and go live with that within just an hour. I hope that you enjoy the video guide. If you did, thank you so much and I look forward to seeing what kind of applications you can develop on the Caspio platform. Thank you and have a good day.
Share this post: