The Caspio Low-Code Platform
All the Tools and Support You Need
Unlimited Users With Every Plan
Ned Pajic: Welcome back to this video guide on how to build a simple Covid test tracking application using Caspio low code, no code platform. In part four, we’re going to take a look at all the forms and reports and how quickly we can build that using the Caspio platform, so let’s take a look. To begin, we’re going to navigate over to data pages. Data pages are application interfaces that eventually are going to embed into your own website. If you think about it, your entire application is going to be a collection of data pages. They can be forms, reports, charts, calendars, or any other interface that you decide to develop. To begin, let’s go ahead and set up a new data page, and I’ll start by building a registration form for the patients. I demo the ability for patients to do a self-registration. Let’s build that form.
First select submission form we’re going to hit next. For my data source, we’re going to select our patient’s table, and let’s call this data page patient registration form. I’m going to use my Caspian style and English localization, and I don’t need to apply any security to my form because it’s open to the public. Any new patient will be able to sign up using that form. Let’s hit next. I’m going to need all of my fields on the submission form, so let’s move them all to the right-click next. And now, let’s modify the form slightly. For my first name label. I’m just going to create a space. I’ll make that field required. I’ll do the same thing for last name.
Make it required. Email is going to be automatically required because it’s unique in the table, and if you make a field unique inside the table on the submission form, it’s automatically going to be required. We can also do things like repeat for confirmation. Let’s say confirm email to make sure the end user puts the same email twice. Here’s my password field. Let’s also do the same thing. We’re going to have confirmed password, show password strength, and maybe you have a minimum strength required. For account status, let’s have this be a hidden field, and let’s allow patients to log in as soon as they sign up. If you uncheck that box and the patient registers, there is still one more step that you need to take in order for that patient to log in. You’re going to have to go to your application, make that patient active, and once again, they’re going to be able to log in. By default, I want to enable that right away.
Let’s hit next. You can customize the confirmation message if you’d like. I’m not going to make any changes here. Let’s go ahead and click finish to save. And here’s our very first data page. I can hit preview, and from here, we can see what that form looks like. Let’s close the preview tab, and let’s continue building the rest of our data pages. The next data page that I want to create is the ability for patients when they log in to be able to see their test results. We’re going to build a report data page. Let’s go with the tabular format and hit next.
My data source table will need to be the orders table. That’s where all of the tests are going to be stored. In order for me to pull up that information, that needs to be my data source. Let’s give this a name. Let’s call this View Test Results. Same style, same localization, and I need to restrict access to my patients. Once the patient logs in, only then they’re going to be able to retrieve that data. Let’s continue. Let’s have a search interface. Let’s have the results appear directly underneath the search form, and let’s have the results appear on the initial load. We also need to enable RLS, record level security, because when the patient logs in, they need to be able to see their own data that pertains to their own unique ID. We need to select patient ID, which is the primary key from the patient’s table.
And we also have the patient ID inside the orders table. That’s how, when the patient logs in, you link that ID the primary key to the foreign key, and that’s how the patient is going to know or be able to see their own data. Let’s hit next. For my search field, let’s just use order ID. You can include other search fields if you’d like, but just for the interest of time, let’s have order ID and continue. For my order ID, let’s enable a auto complete feature, and let’s also have this be under security for the patient just to be able to see their own order ID. We need to enable security on that auto-complete field because when you start typing in the order ID, it’s only going to show the order IDs that belong to that specific patient. And in under lookup table, it automatically links to the table, and it links to that order ID field I will use contains because it allows me to look at any number or character in the string of all of those letters and characters inside the order ID.
Let’s continue. And now, for the results page, let’s have order ID. Let’s also have the test type. Let’s have the status of the test, date tested, completion date, and order by. I need to know which physician or maybe which doctor or admin place the order for that test continue. I don’t want to have any editing ability for my patients, I just want them to be able to read data. We’re going to leave all of these unchecked and continue. No need to modify the results page. Let’s just continue. Let’s display 25 tests at a time, and let’s also display the most recent one first Based on date tested, we’re going to have the most recent test appear first based on the date field. Let’s continue. Yes, let’s go to enable a details page. And in the details page, we can include some of the same fields as in the results page.
Let’s add the test type, let’s add the order ID, let’s add the status, and the remaining fields and continue. Now there are a number of different ways of how you can set up the details page in order for the patient to see the results of that test. One way which is very useful is to be able to add an HTML block inside a details view. Personally, I disabled a toolbar and I go into the advanced tab to do that. Inside the HTML block, now I can add any custom HTML and CSS that I want, and I can position my fields in any layout that I want. For example, if I wanted to display, let’s say, the order ID first, I will just type in order ID, maybe colon, and then we’re going to insert the actual field order ID right next to it.
But I want the order ID to appear in stronger text or stronger font, so I can put that in bold, but a very simple bold tag. Now, if I want something to appear underneath that field, I will add a line break, and then underneath that, I can type in TEST ORDERED:. And then, once again, I can put my bold tag. And then, here, I can insert my field test type and close my bold tag. One more line break. Let’s also have another line break. Let’s have two line breaks to separate some of these fields. We’re going to have collected, in bold, and that’s going to be date tested like this, close the B tag, line break, and let’s also have reported and bold. And we’re going to insert the field completion date and close the b-tag. Now you can add a simple line, so HR to draw a line underneath that. And then underneath that, we can have the test name bold and now just type this out. SARS-CoV-2, NAA. Now, if you have other test types, you can definitely add those area as well. And underneath test A, we’re going to have the most important field, which is the result of the test, and we’re going to insert our status, and we can put that in bold as well, and close our b tab.
I’m adding all of my fields directly inside the HTML block, which means I no longer have need for those fields inside a details page, so we can remove them one at a time. Let’s take this field out. Let’s take out the order ID. Take out the status, date tested, completion date, and for the order by ID, we can actually keep that in there for now, and we can come back and edit that at a later time. Now, for additional text that you want to include in the details view here, you can add another line break here. Let’s say we add two line breaks, and if you’d like to add more text that pertains to your Covid test, you can add additional text in here. I’m just going to copy and paste that here. And then, on the next page, we can enable download pdf.
I want to be able to download that in a PDF format, and you can click on the pencil icon to fully customize the output of that PDF. How the information is laid out using the standard tab and also using the header end footer. Where you can also add fields and fully customize how that information is displayed. I’m going to hit cancel, and at this point, I’m just going to hit finish. And now we have two data pages. We have the ability for patients to register, and we also have the report that allows them to see the results of their test. If you’d like to see what this information looks like inside a report, you can hit preview on the registration form. You can do a quick registration. Let’s say we do John Doe email, johnd@patient.com. Same email because we need to input that twice.
And let’s create the password to be testing 1,2,3, testing 1,2,3, and submit. Now, as a patient, we registered. If I wanted to see my information inside a report, I can hit preview and let’s log in as johnd@patient.com. Let’s make sure we have the right password. Click log in, and you’ll see no records found only because, at the moment, John doesn’t have any tests taken. There’s going to be no information listed inside the results page. Let’s continue building the rest of our data pages. The next one that we’re going to create is for the admin to be able to log in and see the list of all of the patients. Let’s build a new data page. Once again, I need to build a report tabular format. Let’s hit next based on the patient’s table, and let’s call this view manage patients.
Same style same localization, but this time I need to restrict access to my admin-level user. Let’s continue. Same settings as before. I want to display the results directly underneath the search form. And no need to enable record-level security because admin-level user is the highest user, so they should be able to see all the patients within the database. Let’s continue. For my search fields, let’s do first name, last name, and maybe email. Let’s continue. And now, let’s modify each of our search fields just to speed things up. I’m going to create a label here between the first and last name, and I’m going to use contains comparison type, which works like a keyword search. As soon as you type in a letter and you click search, it’s going to return all the results that contain that letter. Let’s do the same thing with last name.
Contains also email contains. And I’d like to put my search field side by side. Using the section element, I can specify three columns with the labels on top. That’s going to put the first name, last name, and email in a same row. And it’s going to put the search button underneath the three fields. Let’s continue. And now, on the results page, let’s include the full name of the patient. Let’s have the email account status and date registered and continue. Do I want to have editing capability here? At this point, it’s not needed to have the editing capability. Maybe we can enable that on the details page. But for now, let’s continue and let’s modify the results page slightly. I’m going to put a space between my full name. Account status, we can also customize. Instead of seeing a basic yes or no, if the user is active or inactive, we can click edit, customize it, and for display, let’s do custom.
If it’s yes, it’s going to be active. If it’s no, it’s going to be inactive. And if for colors, if it’s active, let’s do a green color. And if it’s inactive, let’s do a bright red color and hit okay. And the final thing that we need to add here is an HTML block. Inside is HTML block, we want to create a hyperlink, so when we click on that link, it’s going to take us through the details of that patient so that we can see the history of all the tests. And we’re going to need to pass the patient ID to the next page in order to filter out all of the tests that belong to that specific patient. It’s actually very easy to do that in Caspio. You just need to create a link here. Let’s just call it details. We’re going to highlight the text, click on the link button, and you need to input your destination URL.
You’re going to create a webpage on your website where you plan on embedding the submission form and the history of all of the tests, prior tests for that specific patient. For now, what we’re going to do is we’re going to put a placeholder here. We’re going to put test.com, and we need to pass the patient ID when we click on that text. And to pass the ID in the URL, we need to add a question mark. Let’s do PID, which stands for patient ID, equal sign. And then, we’re going to insert the patient ID that we want to pass. In the end, it’s going to look like this. Once you click on the details link on your website, it’s going to take us to this page, but in the process, we’re going to pass the patient ID to the subsequent page. In the final video of this video guide, you’re going to see how it all comes together.
Once I embed this application into my website, and we’ll come back to this data page and replace this URL with the URL that we create inside our website. For now, we’re going to hit okay, and that’s all we need to do. Let’s hit next. We’re going to display 25 patients at a time. We’re going to hit next. And let’s disable the details page because we’re creating a separate details page. When we click on that link, let’s say finish to save our changes. The next data page that we’re going to create is a details view so that we can see the patient’s details when we click on the link that we just created. Let’s build a brand new data page under report, we’re going to see a details data page. Hit next. Based on the patient’s table, let’s call this patient details. Same style, same localization, restrict access to our users, and continue.
Now we need to filter the data based on the predefined criteria. When we pass that patient ID from the results page, the details page is going to receive that patient ID, and it’s going to show you the details of that specific patient based on the ID that’s being received. Let’s continue, and let’s use the patient ID field as the filtering field, continue. And now, in the advanced tab, let’s go to receive that value externally. And the parameter name is PID. From the results page, if you recall, just a moment ago, when we created that hyperlink, we used PID, that is our parameter name. The details page needs to receive the PID, and value must be required for security reasons. In order for you to see the patient’s details, you must receive that patient ID from the results page.
That’s how the details page is going to know who to fill throughout the details forward. Let’s continue. And in the details page, let’s go out and include maybe first name, last name, email. Maybe you want the ability to make the patient active or inactive and also date registered. As an admin-level user, I don’t think that you should have the ability to change the patient’s password. They’re going to be able to log in, and we can create an update form for the patient to be able to update their own password later on. Continue. Let’s modify our details page slightly. We’re going to create a space here. Let’s make that feel editable, and let’s make it required. Same thing with last name. Make it required, email field. Let’s have the ability to change the email on behalf of the patient and also have repeat for confirmation.
Account status is going to be a checkbox because I want the ability as a user or an admin to make patients inactive or inactive using a simple checkbox method, and date registered can be a display only. And let’s move this field all the way to the top. One more thing that we need to create in the details page is the ability to see like a button or a link that we can click on to order a new test for that specific patient. Let’s go ahead and add an HTML block, very simple, and let’s create a basic link. For now, we’re going to create something that looks like this order test. We’re going to highlight that text, click on the link button. And again, for now, we’re going to include just the placeholder because we don’t have that webpage created yet. Inside Weebly, which is where I’m going to be using to deploy my application.
For now, we’re going to use test.com. Again, we need to include a question mark here. We need to pass the patient ID to the order form equal sign, and then little bit of a difference here is needed because the details page is receiving the patient ID. What you need to do here is simply just display the parameters. Just put pid=[@pid]. That’s really all you need to put inside this window. Click okay to save your changes. When done, let’s click finish to save. And here’s my fourth data page. We need to create two more. Now let’s create the data page that’s going to display all of the prior orders or prior tests. Let’s go with the reports, maybe tabular format, hit next. And for my data source, that needs to be the orders table.
Let’s give this a name, view prior tests, orders restrict access to our user. Click next, and let’s filter the data. Now, this report is going to appear underneath the details page of the patient. And the report also needs to receive that patient ID. That’s how the report is going to know who to filter out the prior orders for it. Once it’s receiving that patient ID, it’s going to know that. And now, I’m going to show you all of the orders that belong to that patient ID. Just like the details view, we’re going to filter our orders based on the patient ID field we’re going to hit next in the advanced tab. We’re going to receive that value externally. And a parameter name is PID, and value must be required. And now, on the results page, let’s see what information we want to display. Perhaps we can have order ID, let’s have test type status, date tested completion date.
And I think that’s good enough for now. Let’s hit next. Let’s enable inline delete and inline edit. When I’m looking at all of my prior orders, I want to be able to change the status of that test by default. When the test is submitted, it’s going to be pending. Until it goes into their lab, we get our results back. And then, as the end user, we can change the status either to negative or positive. We’re going to hit next. And then for the status field, which is really the only field I would like to edit here, we can go under editing, choose a dropdown lookup table, and then let’s select our lookup table that contains all of the statuses so that we can quickly using your dropdown, change the status of that test, like I said, to either positive or negative. If you’d like the ability to actually change other fields, for example, test type, again, inline edit, it’s going to allow you to do that because, by default, it’s set up as a text field. Let’s continue. Let’s display 25 at a time. And let’s also sort the data based on day tested to have most recent appear first. Let’s continue, and no need for a details page. Let’s go ahead and disable that and click finish.
In the final video of this video guide, you will see how I deploy this data page underneath the patient details. We’re going to have two data pages deployed on the same webpage. The whole idea here is when we’re looking at the list of patients, we’re going to be able to click on that link. And on the next page, we’re going to be able to see the patient’s details and the prior tests that belong to that patient. Now, the final data page we’re going to build today is the order form. Let’s set up our final data page submission form, hit next. And for the data source, we need to include our orders table because when we submit the order, the data needs to go inside that table. Let’s give it a name, order form, restrict access to our users, click next. And the fields that we need to have inside this form are the patient ID.
We need test type, status, date tested, no need for completion date, and we need to have order by ID Let’s continue. Now, remember in the patient details, when we click on that link to order the test, we’re passing the patient ID to this form. This form needs to receive that patient ID. We go into the advanced tab, receive the value externally, and we’re going to receive PID, which was our parameter name. On the standard tab, we need to make that field hidden. When you’re doing your testing, initially, what you want to do is just leave the field as a text field so that you can see if that value is passed correctly from one webpage to another webpage. But I know for a fact that it’s going to do that, so I’m just going to go and make that feel hidden on my end.
For test type, we can create this to be a dropdown. And let’s add some custom values. We don’t have too many tests, so I can just input them as custom value. We can say select test type, make sure you delete the value. You don’t want this to be stored in your table. This field will also need to be required. And now, let’s add some tests. The test can be chain reaction or a PCR. Another test that we can have is a antigen rapid test or ART. And another type of test to check for Covid is antibody and serology test. Let me just add one more O here. Those are going to be my type of tests for my status field. Let me make sure that’s field, yep, it’s required. For the status field, we’re going to make this field hidden, and by default we’re going to assign pending.
When you first order the test, it needs to go to the lab. By default, it’s going to be pending until the results come back. And then, we can notify the actual patient of their test. They test it, let’s add this be a timestamp and order by ID. We’re going to make that field hidden. And then, using the authentication method, we can look back into the user table to stamp that users ID. And one final thing that I would like to enable here is just the ability to notify the patient that the test was ordered. Somehow, when I submit this form, I must notify the patient via email to let them know your order was processed. Your test will be available within 24 to 48 hours. What I’m going to do here is I’m going to insert a virtual field underneath my patient ID field. Virtual field doesn’t actually submit anything to your table.
It’s just used to display data on the submission form. We’re going to create this to be a cascading dropdown. Let’s call this email, and we’re going to cascade the actual email based on the patient ID that’s received inside that field. Cascade dropdown, parent field is the patient ID. The table itself is going to be the patient’s table filter cascade by patient ID, and then feel for display is going to be the email field. What’s going to happen here is once the patient ID is passed inside the field, based on that ID, we can pull that patient’s email inside a virtual field.
Now, later on, one thing you’re going to want to do is you want to hide that field in the end, but for now, I’m going to keep that exposed, just that I make sure my email is passed correctly. Let’s continue, and your submission was successful. That’s good enough for me. If you’d like, you can also redirect the user back to the results page, but no need to do that. I’m just going to have your submission with successful and click finish, and that’s it. This entire application is comprised of six different data pages. Of course, if you have a need to do so, you can edit this application, you can edit the labels, you can edit the fields. But essentially, this is basically what I’ve come up with. It’s not meant to be the exact COVID test tracking application. It’s just meant to give you an idea of what you can build with Caspio and how quickly you can build something like this using the Caspio platform. I hope you enjoyed the video. I hope to see in the final video of this guide where we see how we deploy each one of these data pages into our website, and that will give us that completion of the app and that final workflow. I’ll see you in the final video.
Share this post: