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 an IT help desk application. In the last video of this guide, we will learn how to deploy the entire application to the web. Let’s have a look. Now that we have all of our “DataPages” created. How do we go about deploying these “DataPages” to the web?
There are a number of different ways that you can deploy these components to the web. One of the things that you can do here is click on deploy. By enabling deployment status, you will notice that Caspio gives you five different deployment methods. By far, this (Embed) is the most popular method. If you have a website with its own navigation menu, you can embed each one of these components into their respective website. As you are tapping back and forth between your webpages, you are going to be able to access each one of these “DataPages” that you have created inside this application.
Again, if you have your own corporate website with its own brand and color. You can put these “DataPages” into their webpages to match the look and feel of your corporate identity. By far, this is the most popular method. However, for those who don’t have a website, in this video I want to show you how you can publish these “DataPages” using a direct URL link and still achieve that navigation menu effect. When you log in, you are going to be able to see different tabs across the top and be able to tap back and forth between “DataPages” without ever having to embed each of these components into a website. For those who want to be able to see the embed method, we definitely have a lot more videos available in our resource center and also our YouTube channel, that cover this ability to embed into a webpage. It’s just like embedding a YouTube video, same concept, copy, paste, embed. However, for those who don’t have a website and still want to build some kind of a functional internal application. You can still get away with it by using direct URL links. That’s what today’s video is going to cover.
Now, how do I go about creating that navigation menu? Let me close the deployment screen and let’s go into the “Overview” screen. When in the “Overview” screen, you’re going to find “App Parameters.”. Here you can click on manage and you can build different types of “App Parameters.”. These are global application parameters. If you have this parameter somewhere in your “DataPages” and you make the change here, that change will propagate throughout the other “DataPages” as well. Think of it like a central place where you’re managing your navigation menu. If you make one slight change to your navigation menu, it’s also going to be affected across all of your other “DataPages”.
Now, as we talked about in the prior videos, this application has three different levels of users. We have “Admin,” we have “IT,” and we have “User” Levels. I need to create three different types of navigation menus. Let’s build the first one here. Let’s call this one “ith_admin_nav_menu.” Something simple. I also want to use “Long Text.” Then, inside this popup window is where you’re going to create your custom navigation menu. This does require you to know a little bit of HTML and CSS, in order to do this. If you want to create a very simple navigation menu, you can type out your links. For example, “Add Ticket”, you can separate that with “View Tickets.” You can call the next navigation menu line “Reports,” and you can just keep going depending on how many different tabs you would like to have. From here, you just need to highlight that text. Click on the link button and then paste the direct URL of that data page.
If you have a form that’s called “Add Ticket” in the deployment screen, you can copy the link and paste that link here. However, for today’s video, I have actually customized a fancier looking navigation menu. If anybody wants to use this navigation menu, you can contact the Caspio support team and they can email you the zip file so that you can repurpose and reuse that navigation menu in your own applications. Let me open up my Word document. Here is my navigation menu for the “Admin” side. As you can see, this is just styling to apply to my navigation menu. If we scroll down a little bit more, we will see all of the navigation links that my “Admin” side will have.
All I need to do is just copy this text for “Admin.” I’m going to copy that. I’ll go back to this screen and I’m going to go ahead and disable the toolbar. Let me disable that, remove this text, and paste all that text that I just copied from the Word document. All I need to do here is replace everywhere you see a pound. I just need to replace that with the direct URL deployment from Caspio. I also want to be able to inject the person’s name that’s logged into the application. I need to receive the auth parameters, so whoever’s logged in. A little bit of syntax is needed here, just square brackets at symbol auth field, and then colon. Then you’re going to put the table name and also the field inside a table. So we call it ith underscore users underscore name. Then you close the square bracket. ([@authfield:ith_tbl_users_name]). If that’s not the name of my table and my field, I’ll come back to this screen and correct that. Now, let’s go to our “DataPages” and let’s grab the deployment code for each one of these reports and forms that we have and replace them with that specific deployment code.
For “All Tickets,” let me apply this. Hit save. Go back to “DataPages”. Inside the “Admin” folder, all you have to do is click on edit here. The first thing that you want to do is click next a few times until you get to your search interface. On the search interface, you want to insert a “Header & Footer.” Then, in order to render that navigation menu above the search form, you have to insert that parameter. Click on this button here, find that “ith_admin_nav_menu.” Click okay.
Now you’re going to be able to display that navigation menu once the user logs in on this report called “All Tickets.” I also want to include that in any of the other screens that I might need to. Let me take a look. My results page, I don’t need to have that because I have the search and results on the same page. Let’s see if we have a details page and I do. I just have to insert my “Header & Footer” and I need to inject that “ith_admin_nav_menu.” Same way, click okay, and then click finish. Now very quickly, you can actually test this out. If you hit preview, you will still see the login screen, but the moment you log in, you will now be able to see that navigation menu rendering above your data page. Now, let’s close the preview screen.
Let’s get the deploy code, enable deployment status, grab a direct URL link, copy it, and let’s go back to our “Overview” screen. Click on manage, edit, click on the pencil icon. Now, find that pound where it says “All Tickets.” Here it is. And all you have to do is just replace that with the link.
Now, you just have to repeat the same process for all of your other “DataPages”. For example, “New Ticket,” let me hit apply and save. Let’s go back to “DataPages”. Inside the admin folder. “New ticket,” otherwise known as “Add Ticket.” Here is that data page. I do have to click edit because I need to place the navigation menu above the submission form as well. Let’s hit next. Inside the header section above my heading, I will insert once again that same navigation menu like this and then click okay. Again, you can hit preview to see what it looks like. Here is your admin navigation menu for that submission form. You can now close the preview tab. All you need to do is click deploy, enable deployment status, and then grab that direct URL link, copy it, and go back to the “Overview” screen. You can also open up the “Overview” screen in a new tab so that you can have them side by side. Then, go into manage.
Let’s edit the navigation menu, click on the pencil icon and find that URL. Here is “New Ticket.” I just need to replace my pound with that direct URL link. Let’s keep going. I’m going to hit save and let’s try this out. I will go back to my “DataPages” now and let’s see if we can tab back and forward between “Add Ticket” and “All Tickets.” If I hit preview, okay, so there’s my report. If I click on “Add Ticket” or “New Ticket” in this case, you can see how it takes me to that submission form and I can go back to “All Tickets” again. Now, all we have to do is grab the deploy URL link for each of the “DataPages” and replace that pound with all the other links that we have in that navigation menu. Also, don’t forget to add the “App Parameter” inside a data page as well.
I will complete all of these steps for the “Admin” panel. Then, all you’ll need to do is just replace the ones for the User Level access and the IT level access and the navigation menu will be provided for you by our support team. Let’s go back to “DataPages”.
Let’s edit the “Profile” page. Next, and in the header section, once again, I will just put some spacing here and add my navigation menu like this. Click finish. In fact, what you can do first is just simply add the navigation menu so you don’t have to keep clicking edit every single time. You can just do that really quickly. Let’s edit the “Manage Employees” data page. Hit next a few times. In the results page, I want to be able to insert my “Header & Footer.” Then, very simply just add the navigation menu.
I believe I have a details page as well and same thing in a details view, finish. I also have an “Add User” form. So let’s edit that, add “Header & Footer” and add my navigation menu. So you can see it’s very repetitive, but once you get it done, you’ll have a nice workflow between your tabs and you can always tab back and forth. Everything is self-contained inside one environment where you have the navigation menu on top. You can quickly access each one of these “DataPages” once you log in as the “Admin” level user. Okay, so now we have these three charts. Let’s click on edit. We’re almost done.
Now all the “DataPages” have the same “Admin” level navigation menu. All that’s left to do is to grab the deploy code for each one of them. Don’t forget to enable deployment status. Grab the URL, copy it, and let’s go back into our “Overview” screen. We’ll manage here. Let’s go into our edit, find the profile link. We’ll scroll down a little bit. Here’s my profile page, and I just need to replace the pound symbol with that. Let’s just keep going. Let’s finish it off. We’ll go back to “DataPages.” Let’s go do manage users next, or “Manage Employees” in this case enable deployment status. Grab the link, copy it into the “Overview” screen. All right, let’s edit the menu, click on the pencil icon and then find a URL for “Manage Users.”
There it is. Let’s replace it. Okay, now let’s grab “Add Users.” Let’s go back to “DataPages,” inside the “Admin” folder. Let’s deploy this data page as well. Back into the “Overview” screen. Click on edit, scroll down and replace that symbol. And now we just have three more. The charts are all that’s remaining. I also want to be able to add a logout link because I do have a logout button as well. I’ll show you where you can find that logout link as well once I’m done with all of these three different reports. Let’s apply and hit save. Back to “DataPages”. Another thing that you can do is a bit of a shortcut, you can also, once you hit deploy, let’s say for this one, “Tickets by Employee.” When you grab this URL and copy it, you can paste this in the Word document right away.
You can get all of your deploy codes immediately and then go back to this navigation menu to update all of those links. It might save you a little bit of time from having to click back and forth. I decided not to do that for this video. Let’s just continue. I’m going to copy this link for “Tickets by Employee.” Close that. Let’s go into the “Overview” screen, click on edit, and let’s find “Tickets by Employee.” Okay, here it is. I’ll just replace that, click apply back to “DataPages.” Just two more left, let’s do “Tickets by month.”
Now that I think about it, I think it would’ve made more sense for me just to use the Word document and copy all of them, instead of doing back and forth. What I’m doing right now. But that’s okay. “Tickets by month,” let’s replace that. Then, last one that’s left here is “Employee by Status” or “Tickets by Employee/Status.” Let’s hit save back to “DataPages,” and let’s go ahead and grab that last deploy code for the “Admin side,” click edit, pencil icon, and let’s replace it.
All right, one more link left to grab and that is the “Logout” link. I will go ahead and hit apply, hit save. When the users log out, I want them to be redirected to “All Tickets” data page. If the user is logged in and let’s say they’re looking at the chart upon logging out, I want them to actually go to this report. Next time they log in, they’ll be immediately taken to that data page. I will just once again grab this deploy link, copy it, and then let me go into my “Authentications” screen and edit my “Admin” panel.
Then, when you scroll down and you expand the advanced settings. Here, “Logout destination.” As soon as the user logs out, I can redirect that user to a specific URL. In this case, I want them to go to this URL. I’m going to do the same thing for timeout and redirection. So I will click change, and I want the end users to automatically log out after eight hours of being away from the application. I want them to go to that same page and “Login redirections.” Once the user logs in, I want them to actually go to “All Tickets” page. Again, I will use that same data page, meaning when the user logs in, they are immediately going to that data page. I will hit save and click on save here at the very bottom.
Now, when you click on properties for the “Admin” login screen, you will find a logout link. All you need to do is copy this link, go back to the “Overview” screen, click on manage, click on edit, and click on the pencil icon. And you’re done with the “Admin” site. Now, all you need to do is just paste that link here instead of this pound symbol and click apply and save. Now, all of the functionality on the “Admin” site should work correctly. All I need to do is share one of these links. If I hit deploy, grab the URL and copy it and if I email this to anyone, they’re going to have access to the entire “Admin” site. All they need to do is click on that link and now they can tab back and forth between all of these “DataPages”.
I can add a “New Ticket,” I can go to “Reports” to view charts, I can manage users, I can also add a new user, and I can update my profile as the “Admin” user that’s logged in. Finally, I can also log out of the application and it takes me back to the login screen. Log back in, it takes me back to “All Tickets.” Once again, I have access to all the other navigation menu tabs.
What you need to do from here is apply the same thing for both the User and IT site. In the “Overview” screen under manage, you will now create a brand new “App Parameter.” You can call this one “ith_user_nav_menu.” Then, when our team sends you the actual HTML and CSS, you will just paste that text here. Make sure you disable the HTML editor first, and then paste the code. Then, go into your “User” folder.
Grab all of those deploy links and replace the pound symbol with the deployment code. Then you’ll be done. Same thing as we just did with the “Admin” side. You will replicate that for the “User” side, and then you’ll hit save. You’ll also want to create one more “ith_it_nav_menu.” Again, you will use “Long Text.” In here you will go ahead and disable the HTML editor, past the code that our team sends you. Then, just go into the IT folder, grab all the deploy codes and replace that pound sign. Wherever you see that pound sign, you will replace that with the deploy code. Then you’ll be done. And that’s it as far as deploying the application in a self-contained environment directly inside Caspio. As you’ve noticed, I didn’t use any webpages. Everything is hosted directly through Caspio and all the “DataPages” are always going to be accessed via those direct URL links. Thanks for watching the final video. I hope that you enjoyed it. For more videos and articles, check out our YouTube channel and also our resources center. Have a good day. Bye-bye.
Share this post: