The Caspio Low-Code Platform
All the Tools and Support You Need
Unlimited Users With Every Plan
Ned Pajic: Welcome to this fifth and final video of this ultimate video guide on how to build an expense reporting application with Caspio. In part five, I will teach you how to deploy all the Caspio interfaces onto a website. Let’s have a look.
Now that we have all the data pages created, let’s see how easy it is to deploy each of these data pages into our website. If you’ve seen the prior videos, we are already logged in as Carly Jones and we are taken to a dashboard view. The next thing that I’m going to do is open up my directory that contains all of the employee webpages, and all I’m going to do is highlight all of them right click and open up each of the web pages inside Notepad plus plus so that we can edit all of the HTML content. Let’s begin with a very simple data page for the employees to be able to change their password.
All I’m going to do is scroll down a little bit until I find my placeholder. Here’s where I need to embed my Caspio data page. Let’s go back to Caspio into data pages. And under all access, you’re going to find this data page called update password, click on deploy, enable deployment status and copy the Casio code. You’re going to be repeating this process 27 more times until you have successfully deployed each data page into a webpage. I’m only going to show you this a couple of times for the employees, but once you download a template and the application itself, just repeat that process for each of the webpages. Let’s deploy the update password data page back inside the HTML document. Replace my placeholder with the Caspio deploy code, save your changes, and now when you refresh the website and you go to this URL to change password, now Carly can successfully update her password.
The next data page that I’m going to deploy is the profile data page. Back in Caspio, here’s update profile, click on deploy, enable deployment status, and let’s copy the code. Let’s find that webpage for our profile. Let’s go down until we find our placeholder text and very simple, just replace the text with the Caspio code. Let’s refresh. Go to my profile, and now Carly can see her profile information where we can update any of the data that we made available for the end users. Let’s go to my expenses. And next, let’s go and deploy the current expenses data page. Once again, we go back to Caspio current expenses, copy this deploy code, find a webpage called Current, and let’s find our placeholder. Refresh, and we should see no records found. The reason behind that is because if you look at the expenses table at the moment, it’s completely empty, therefore, we shouldn’t be able to see any expenses listed inside that report.
The next data page is the ability to search expenses. So let’s go back to Caspio and find that data page. And we’re almost done with the employees. Here’s the ability to search expenses. And just like before, go ahead and find your placeholder, replace it, and let’s see what we have. Search. And now Carly has the ability to find all of these expenses by clicking on search. Again, no records found because we have no entries inside that table. Let’s go back to current expenses and let’s go ahead and now deploy this data page for new expenses.
You will see when I click on it, I need to deploy the submission form in order to add a new expense. We’ll find that data page, add expense, enable status, and I simply call that page new expense. And let’s find our placeholder and let’s take a look. Now we should be able to add our very first expense as Carly. Let’s refresh and here’s my submission for it. What’s going to happen now is when you select a category, let’s say food, we’ll just say sample title, sample text, total expense 80, and then you can attach a receipt if you have one. I don’t have one at the moment, so let’s just go ahead, hit submit. Your submission was successful. Now as Carly, if I go back to current expenses, I should be able to find that expense listed as pending. I should also be able to find that expense using this searchable report. If I refresh my table of expenses, I should be able to find that expense as well.
And now you have one entry inside the database. Let’s go back. As Carly, I can now click on the details of this expense and be able to retrieve any other information pertaining to that expense. No other action was done on this specific expense, therefore we shouldn’t be able to see who was the manager to have processed the expense, HR and so forth. The last couple of data pages that we’re going to deploy is on the dashboard view. So let’s find this data page to search or filter. I call the dashboard filter. Let’s click on deploy copy, dashboard page, and let’s find the very first placeholder, search data page and paste. I’m not done yet. I’m also going to be deploying three additional data pages on this single webpage called dashboard.html. Let’s go back to Caspio. The next one that I called is expenses by status. So let’s go back to Caspio.
Here it is. Deploy. Let’s replace the text. Then we have the third data page called Expenses by Category. And the final data page is called Expenses by month. Let’s go back here one more time. Expenses by month enable copy. Let me go ahead and paste that final deploy code and replace this text. And let’s see what we have on our dashboard view refresh. And now Carly has the ability to search her own expenses using a nice dashboard interface. I can search based on status. If I click on approved and click submit, there should be no records found. If I click on pending, I should get at least one pending result because we just created that expense a minute ago.
This concludes the tutorial on deployment. The only data pages that we have deployed are for the employees. And in this package you will find all of the web pages and all of the containers needed for each one of those data pages. Once you’re done with the admin side, go back out to the root folder. Then you can go inside your HR folder, deploy all the HR data pages, and also all the manager data pages that are remaining. If you encounter any questions, you can always contact the cas field support team. They’re going to be able to help you deploy these data pages as well.
Thanks for taking the time to watch the entire ultimate video guide if you did, we do appreciate it. We hope that you enjoy the video sessions. If you have any inquiries or questions, again, contact our support team and let us know in the comment section if you would like to see a specific application turned into an ultimate video guide. Thanks very much. Have a good day and good luck building your applications.
Share this post: