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 part four, we will learn how to create all the functionality for the app, which includes forms, reports, and charts. Let’s have a look. Now that we have all the tables created, all the views on all the authentications. We can begin working on our data pages. This is a Caspio term, don’t be confused by this term. Essentially what that means it’s widgets. Each time you develop a data page or a widget, we’re going to give you a snippet of code, and all you have to do is copy and paste that code into your website to seamlessly embed all of the functionality. Before I show you how to build the data pages, let’s talk about folders.
Folders help us stay organized inside our account. As we’re building new data pages, we want to organize these data pages into their respective folders. And this application is going to have three different user groups. We’re going to have admin, IT, and user roles. All I want you to do is create a folder for each user group. For example, admin, IT, and user. As you build data pages, you’re going to move them into their folder. Now we need to ask ourselves what data page do we want to begin with. Let’s start with the update profile. Each user, when they log in, should be able to see their profile and be able to change their password. I’m going to click on this folder here, click on “new data page”. And this is going to launch Caspios point and click “data page wizard”. Once the screen loads, you’re going to be able to select your data page options. Here you can build input forms. You can build reports, calendars, charts, and HTML data pages.
Right now, we’re going to build a form, which is a single record update, meaning when the user logs in, they should be able to update their profile. We’re going to select this data page type we’re going to hit next, and we’re going to retreat that information from the table called users because we want to be able to pull up the information from this table. That needs to become my data source. Let’s give this a name. I’m just going to call it profile, and I’m going to use a different style, maybe Caspian and localization English. The style deals with the aesthetics. When you want to update the color of the label, color of the field, maybe the buttons, and localization deals with regional settings. If you want to change the date, format, the language, or maybe even currency for this data page, I want to enable access and have only my users login to be able to update their profile.
You’ll see how we apply the same thing to its employees and admin in just a minute, but for now, click Next. We need to have record level security enabled on this data page. When I log in as a specific user, it verifies my user ID, and it shows me the information based on my user ID. As long as these two are matching correctly, you’re going to be able to show the information to the user that logged in. Now we need to choose what fields we want the user to be able to look at. I want them to be able to see their name, department email, and I want them to be able to change their password. Let’s move that into the profile screen as well. The rest of these fields are really reserved for the admin-level user because the admin should be able to make users active or inactive, be able to promote or demote and also be able to look at the date when the user was added to the table.
Let’s move on. For my name field, I’m going to leave that as display only. Department field will be display only as well. Email, display only. It’s up to you if you want the end user to be able to update their email or their department or name. You can choose to have these fields be editable, but I’m going to leave them as display only. And finally, for my password field, that’s going to be a text field, needs to be a required field. You can also have other options here as well to show password strength. And you can also enable the strength required to be minimum, fair, good or strong depending on the level of difficulty you want to make the password. Once you’re done, really all you have to do is click on finish. Perhaps one last thing that you can add to your submission form is a nice heading.
If you click on this button, you can add a header and footer or maybe even an HTML block. And inside the header section, I’m going to say something like this. Update password. Since the only fields that are editable here is the password field. I think that makes sense. We can highlight the text and maybe we can apply a different formatting, heading two. He stands out on the submission form. Once you’re done, you can go ahead and click on finish to save your changes. And there is your very first data page. You can hit preview to see what the form looks like at the moment. As you can see, it’s just showing the login screen, but if you go into your table where all of your users reside, and if you right click and open this up in a new tab, let’s move that here.
And if you open up the table of users, you can see you only have one user inside that table. The user is called Mike. If we log in as mike@company.com, let’s test this out, mike@company.com with the password test. Now when I log in as Mike, we have that nice heading and we can also update the password. At this point, we can close the preview screen. Let’s go back to data pages and let’s duplicate our efforts. Let’s go ahead and make a copy or a clone of this data page two more times. Our admins and our IT employees, when they log in, they’ll be able to update their profile as well. I will go ahead and just make a copy of this so I don’t have to rebuild it from scratch. And I’ll make one more copy. I will move this data page inside, maybe the admin folder like that, and I will move this data page inside the IT folder.
We do have to make a few modifications. When you open up these two folders, you’ll see those two data pages. All you need to do is just rename the data page. Remove that extension like this, do the same thing for the other data page while you’re at it like that. And then the final step here is to click edit. Since this is the admin level data page, we hit next and we choose our admin level authentication. Once you apply that, hit next, see if you need to make a few other modifications. If you don’t, you can just click on finish to save. And same thing for IT, just go ahead and edit, click next, apply the IT level authentication, click next one more time and then just save your changes. And you can see how very quickly we were able to build these three data pages and assign a proper authentication, so when that user logs in they’ll be able to see their profile.
We have 11 more data pages to build. We have only built three so far. This entire application will have a total of 14 data pages. The next data page that I want to create is the one when the user logs in, we want them to be able to submit a ticket. It’s going to be a submission form where we create a ticket, and we assign it to a specific IT employee. But before I can do that in my dropdown, I only want to be able to filter out users that belong to the IT department. I am going to have to build an additional view here. Let’s build a new one, which is our fourth and final view. And I want this view to filter out active IT employees. We’re going to call this ith_filter_active_IT_employees, and that’s going to be filtering from this table of users.
So we’re going to move that table to the right click next. And in the criteria tab, we’re going to move the field element to the right, select the department and have that equal to the value of IT. And since I’m looking for active IT employees, I want one more field element to the right of select account status, and I want that to be checked. If both of these two conditions are true, if the department equals to IT, and if that IT member is active, this view is only going to filter out active IT employees. If I open the view, you’ll see two because our application at the moment, we have two employees who belong to the IT department as you can see, and both of them are active. And in this use case that happens to be Carrie and Raj. Now I can use this view in my dropdown. So when I select my employees that belong in the IT department, it’s only going to filter out the users that are inside that department.
Let’s go back to data pages. Let’s open up the folder of users and let’s build that submission form. We’ll hit “new data page”. I’ll need to create a submission form. Let’s hit next. My data source needs to be the table that’s going to store all the ticket information. Let’s give it a name. I’m going to call this, Add Ticket. And I’m going to use the same style “Caspian”, same localization of English and apply my authentication to be a user login. Let’s move on. Now you need to select what fields you plan on having on that submission form. Let’s have the summary field. Let’s have a description. I also want to have assigned to by ID because we need to assign this ticket to a specific IT member. We want priority. We also want attachment, ticket status, created by ID, date created, and the final two are going to be left for the IT employees. When the IT user logs in, they’re going to be able to provide the comments, and when that ticket was closed. Let’s continue. Now, let’s make a few modifications. Here’s my summary field. I’m going to click on the form element, and I want this to be a text area with the height to be two rows. For my description field, I also want this field to be a required field. Here’s my description field. I’m going to turn this into a text area and I’m going to leave the width and height accordingly. Assigned to by ID. Now we need to link this dropdown to that view that we just created. We have the dropdown automatically selected. We’re going to look up table or view.
And for the look up table, if you click on this dropdown, you’re going to find that view that’s filtering all of your active IT employees. Feel for display, I want to display the name so I can actually see the name of the employee. But when I submit the form in the table of tickets, I want to store that as an ID. If you want, you can also change the source to be both look up table and custom values because if you do something like that. For your custom values, you can input and say select IT employee, and then make sure you delete the value because you don’t want this to be stored inside your table. And then your lookup table is still going to link to that view. That’s filtering all of the active IT employees.
For priority, I’m also going to turn this into a dropdown. I don’t have a lookup table. I could build a lookup table that has all the priorities, but I’m just going to add as custom value since I only have three. My first option is going to say select. I’ll delete the value and then we’re going to input low, medium, or high. As you’re creating the ticket, you can specify if this is going to be low priority, medium or high. We can also make this field required. I can go back to my other field here and make this field required because we want to make sure that the user selects the employee before they submit the form. Attachment, I’m going to leave this the way it is. Ticket status, I’m going to hide this field, and assign a default value of open. Every time you submit or create a new ticket, it’s going to have a status of open, and then the IT team or the admin staff can log in and close that ticket.
For “created by ID”, I’m also going to hide this field. And unload, we’re going to select “authentication field”, look back into the user’s table to stamp the user’s ID. Essentially what this means is when I log in as a user, it already knows my ID. I make this feel hidden, but upon submission it’s going to populate my ID into that field and automatically stamp my ID into the tickets table of the user that’s logged into the application. And finally, date created. We’re going to turn this maybe into a timestamp, so that we can automatically stamp when this form was submitted. At this point you can preview the form to see what it looks like. And here we can add our summary, we can add our description, I can select the IT employee. This is the view that’s filtering both of these two IT employees. I can set the priority and I can also attach any document before I hit submit.
Let’s also add a heading above this form so I can go back to my data page. Once again, if you recall, we can add a header and footer. And in the header section we can say something like Create a Ticket. We can highlight that text, apply a different heading. And if you’re a little bit more tech savvy, you can also go into source and you can fully modify by adding your own HTML inline CSS to modify your own heading, and section dividers. If you’re happy with the look and feel of the form, you can click on finish to save your changes. And here’s your fourth data page.
Now I know that both the IT and admin level user will also be able to create a ticket. Let’s do the same thing as we did with the profile by simply just making copies of this data page. And let’s make one more copy. And at this point I will just simply move these data pages. Let me move this one to the admin folder and I’ll move this one into my IT folder. And just like before, you just need to make a few modifications. First, I’ll make my modification to the name, hit save, and I’ll do the same thing with this one rename, and hit save. And finally you just need to edit the data page, and apply the proper authentication. We hit. Next I’ll apply my admin level authentication, hit finish. And then inside the IT folder we’ll do the same thing. Click edit and apply the IT level authentication. And you’re done.
Now you have six data pages. You can see how quickly we’re able to build this application using Caspio no code to low-code platform. As I said, this application has a total of 14 data pages. We still have eight more data pages to build. Let’s continue. Next, let’s go ahead and create a report for the user level. When they log in, they’re going to be able to see all of the prior submitted tickets. Let’s build a new data page for users. And this time we’re going to build a report. I’m going to select tabular format, even though you have other layouts that you can choose from. I’ll go with the tabular format and hit next. My data source needs to be my tickets table because when we look at this report, we need to pull data from this table.
Let’s give it a name. I’m just going to call this, My Tickets. I’m going to use the same style, restrict access to user level authentication and hit next. On this screen we need to decide if we want to have a search form or if we want to filter data based on predefined criteria. I’m going to build a search form. I want to display my results directly underneath the search form, and I want the results to display on the initial load. Meaning when I refresh the report, I always want the results to appear directly underneath my submission form. In this case, I want the users to be able to see just their own tickets. I need to enforce record level security, so when the user logs in they verified his ID. And then we need to match the ID with “created by ID’ because these two need to match. If a user creates a ticket, it stamps that user’s ID and the tickets table. We’re now matching both of these two fields together to enable RLS, and be able to filter out the tickets to belong to that specific user. We’re going to hit next.
Now we need to select what fields we wish to use in the search form. Let’s give users the ability to search based on ticket ID. Perhaps summary, let’s have priority, status, and maybe a date range where we have the date field. Now it’s up to you what fields you’d like to include in the search form. These are the fields I’m going to include. Let’s hit next for my very first field, the form element. We can take a look at all of our options, and I’d like to use auto complete AutoComplete works like Google search. If you begin typing any character or number, it’s going to list you the results that you have inside the table.
So you can quickly pick the value that exists in the table as you begin to type. I’m going to go with contain, so it looks at any character or number within that phrase. For summary, you can do the same thing. However, I’m going to choose a different comparison type to have equal so it doesn’t have AutoComplete. You can enable that if you want to, but the way it contains works, if you type in a number or letter or a keyword and you hit search, it’s going to return all the results that contain whatever you typed inside that field. Priority, I’m going to turn this into a dropdown. I don’t have a lookup table, so I’m just going to use custom values as my first option. I’m going to say any priority, make sure you delete the value because this doesn’t exist in your table. And your three priorities that you have are low, medium, and high.
So if you want to be able to pull up a ticket based on priority, you can search all or you can specify if you want low, medium, or high. We’re going to do the same thing for ticket status. Once again, that’s going to be a dropdown. We’re going to use custom values, and we’re going to say as the first option, any status. Delete the value, and then just simply input open or closed. And for they created, here’s how in Caspio we can do a date range. You have to click on this button below and then add new criteria. And you want to set the logical operator to AND because you the operation to run between these two fields. This field, and this field as opposed to this or this. Criteria one needs to be greater than or equal to. And I always like to, in my label, specify that this is the front field.
And criteria two is going to be less than or equal to. And in the parentheses will specify that it’s a to field. Again, you input the front date and a to date. Let’s hit next. Now in the Wizard it’s asking me what fields do you want to display on the results page? Again, it’s completely up to you what information you want to display. I’m going to include “ticket ID”. Summary, let’s have an assign to. Let’s also have ticket status. Let’s have priority, maybe even the attachment if you want the end users to be able to download something, and date create it. Let’s hit next.
Now do you want the end users to be able to edit directly from within the results page? I’m not going to do that. Let’s bypass that and hit next. Do you want to make any modifications to your results page fields? You can if you want to. I’ll just choose to ignore that and continue. I’m going to display 25 tickets per page. Let’s continue once again. And now, do you want to enable a details page? Yes, I would like to enable a details page. But my clickable link, I want to use a specific field, which is the ticket ID. Now this will become clickable and when the user clicks on that, they’re going to be able to go to the details page. Let’s continue. And now finally, what information do you want to display in the details page? Here you can include ticket ID, summary description, who the ticket was assigned to. Priority, attachment, ticket status. You don’t need created by ID because we already know that we are logged in and we are the ones who created that ticket. You can include date created, you can have comments and date close.
The comments and date close will come from the IT employee. When they finish inputting their comments and they close out the ticket as a user will know exactly what date the ticket was closed and any comments that they provided. Let’s go on the final screen here to modify all of our fields in the details view. And here you’re going to leave all of your fields as display only. As a low level user, I don’t have the ability to make any of these changes. I can just view the data in a read only format, and for comments and date closed. If this information is not provided by the IT employee just yet, we don’t want to see these two empty fields. What you can do for comments in the advanced tab, you can hide the field if blank, and same thing for date closed, hide that field of blank. Only until the IT employees input the information will we be able to see that info up here in the details view When done, you can click finish or you can preview the data page.
And here’s the search form. We don’t have any tickets listed just yet. But just for fun, if you want to test out the functionality, you can close the preview tab, you can save your changes. And let’s make one submission as the user. Here you can preview your Add Ticket form. You can fill out this form. Let’s just say, need help installing a new OS to my work computer. You don’t have to input description if you don’t want to. I’m going to assign this ticket to carry priority, medium, and you can also attach a file if you want to. And now upon submission, your submission was successful. Let’s close this preview tab, and now if you open up my ticket’s report, you should be able to see that submission. And you can also click on this link to go into the details of that ticket to be able to pull up all the information pertaining to that specific ticket. And you can also go back to view all the prior tickets that were submitted in the past.
At this point, you can close the preview tab and you can continue building the rest of your data pages. Now that we have this report created, again, the admin level user and IT level user will also be able to see a similar report. Instead of you rebuilding that report. Again, same as before, we can just make a copy of this data page. We’ll make a copy of this one and let’s move those data pages into their folders. I will select more. I will click move. This one, I’ll place in the admin folder. And this one I’m going to place inside the IT folder.
Let’s open up all the folders and let’s go ahead and rename them. Now these two data pages will have a few more modifications, so it’s not as simple as adding a ticket or profile. We are going to make a few more modifications by adding fields, removing fields, and also applying a few conditional things on the report, which you’ll see in just a moment. Rename this one, and hit save. Let’s start in the IT folder. I’m going to click edit and let’s see what changes we need to make. I’ll hit next. I need to apply my IT level authentication. Let’s continue. On this screen, I need to select assigned to byID because when I log in as the IT employee, I need to be able to see all the tickets that are assigned to me. Let’s continue. I can also include created by ID because I want to be able to filter out based on the employee.
Let’s continue. And we can leave all of these the way it is because we still want to be able to search based on ticket ID, summary, priority, and all the other fields that we have in here. Let’s continue. Here, the only change that I need to make, since I made a copy of the other data page, it still preserves all the prior configurations that we made. Let me just update the created by ID. And here I’ll use both look up table, and custom values. And under custom values, we’ll just put in search all, delete the value, and then the look up table automatically connects to the user’s table. We can see the name. And then for value, it’s going to be the ID. Let’s continue. In the results page, we don’t need to have assigned to by ID because we already know these tickets are assigned to us, so we can remove that field, but we can include created by ID. Because we want to be able to see which employee created that ticket or assigned that ticket to us.
Let’s continue. I’m not going to enable any editing options on the results page. I’m not going to make any changes to my results page fields. Let’s keep moving. Here we can sort data if you want. Typically, what you would notice here is that we want to be able to sort data based on date created, and we want it to be the most recent first so Z to A. Let’s continue. Let’s go ahead and enable the details page. And on the details page, let’s go ahead and remove assigned to by ID. Again, we know who this ticket is assigned to. Let’s have created by ID be included on the form. And then let’s continue. Now it’s up to you how you want to rearrange these fields. For example, ticket ID can be first, let’s have created by ID second, so that we can see who actually submitted that ticket. Let’s have date created, be third in the list. And let’s have summary, but a summary field. If you want the IT employee to be able to edit this ticket, you can turn this into a text area. And let’s set the height to maybe two. Let’s have description as well be underneath that. And for description, we can have this be a text area as well. For priority, let’s also give the ability for the IT employee to change the priority from low, medium, or high.
We also want to have the attachment field. Now if the user doesn’t attach anything, so no document was attached to this ticket, you can go to the advanced tab and say hide field of blank. That way it looks nicer onto details page, It doesn’t actually show anything that’s empty. For ticket status, we only have two. I’ll turn this into a dropdown as well. And we have open or closed. For comments, this is going to be a text area, and our date closed is going to be a text field so that we can input when that ticket was closed on what date. I’m going to put these two fields in its own section. I’m going to introduce a new section and I’m going to move that up. This way when I apply some conditional logic, I want to be able to hide the entire section if the status is still open. But if I decide to close the ticket, then I want to show that section and make both the comments field and the day closed field a required field.
Here’s how we do that. We go into the rules tab, and I need to set up two different rules by clicking on the plus sign here. Rule number one is going to be based on the field status. If the status equals open click okay. I want to be able to hide the entire section two. If the status is still open, we’re hiding that entire section, both the comments field and the date field. In my second rule, if the status field equals to close now, I want to be able to make those two fields required. I have to select my action here required, and I want to make the comments field, and also the date closed field, a required field. If you would like to see what you just created, you can click on the preview button. You have to log in as the IT employee, which in our case that happens to be Raj. Once I log in, I’ll be able to search. At the moment, there are no tickets assigned to Raj. Let’s close the preview tab. And once you’re done making all of your changes, you can click on finish.
If you’d like to test out this report with some actual data, you can go back to the user folder, click on add new tickets. Here you can do a preview. And if you log in as Mike, Mike happens to be our user of the application. And if I submit this ticket now, let’s just say new ticket description, here’s some text. And then we’ll assign this to Raj, priority medium. And then you can have an attachment if you want to. And then upon submission, now let’s close the preview tab. Let’s go into this report for it. If I do a preview, I’m still logged in as Raj, and Raj is able to see that ticket that was assigned to him. From here I can go to details of the ticket, and let’s see how that conditional logic works. Here, if I want to close the ticket, I can select closed, and now you can see how we’re expanding both the comments field and the date closed where I can input my resolution comments. Close the ticket on this specific date, and then hit update.
That’s the basic workflow that we have so far. Let’s close the preview tab and then let’s also edit the admin level report that we have here. The first thing I’ll do is I’ll simply just rename this to read all tickets because admin level user will be able to see all the submitted tickets. Not just the ones that belong to him or her. Let’s go ahead and click on edit. And the first update that we need to make is when we click next is to simply choose the admin level authentication. Now let’s continue. In this case, we don’t need record level security enable because again, admin is the highest level user. They should be able to see all the fields and all the data from within the table. Let’s continue. Okay, so in the search form, we want to include the assigned to by ID, and we also want to include the created by ID as well.
Again, admin should be able to find tickets based on who the ticket was assigned to, and also who created the ticket as well. Let’s continue. Let’s make a few configurations here. For assigned to by ID, again, I’m going to use the source both. Under custom values, I’ll just simply say, all delete the value and the look up table immediately links to the user table, as you can see. Created by ID, same thing. I will once again use both for my source, and under custom values, I’ll say all. Which means all employees. And again, if you look at your lookup table tab, you will once again see that same table. Let’s continue. On the results page, I’m going to include assigned to by ID. I’m also going to include created by ID, so I can have both of those data points. Let’s continue.
Here, I would like to enable inline edit because I want to be able to edit some information directly from the results page. Let’s move on. And then on the results page, I would like to group my data based on the ID field of the assigned employee. Here we can enable grouping, Let’s have collapsible group enable, and expanded by default. That means that you’ll be able to see all the tickets group based on the employee that the tickets are assigned to. For ticket status, under editing, I would like this to be a dropdown. And very quickly, when I do an inline edit, I want to be able to change from open to closed directly from the results page. I would also like to be able to change the priority, so I’m going to turn this into a dropdown as well. And again, we only have three low, medium, and high.
Let’s do this. For created by ID, let’s take a look at this as well. And you can see immediately it’s linking it to a dropdown where I can select the users if I do an inline edit. Let’s continue. Let’s display 25 per page. Let’s have the ticket ID be the clickable details link. And in the details page, let’s include all the fields including created by ID. We’ll move that to the right. Let’s move on. And finally here again, it’s up to you how you want to rearrange your fields. For me, I think I’m going to have ticket ID as the number one. Let’s have date created, be number two. Then I’ll include created by as number three.
The created by ID, I’d like for the admin to be able to reassign this ticket to a different creator. Here we can actually have this be a dropdown, and you can see how Caspioi immediately links that to the user’s table where you can see the names, and reassign that ticket to somebody else. Next, I’d like to have assign to, And by the way, you can also update these labels to just read assign to. You don’t have to have the ID text inside a label itself. For this, I’ll also like to be a dropdown. And once again, if you want to reassign this ticket to somebody else, then you can quickly pull up the names of the people by linking to a table. In this case, we don’t want to link to a table of users because this table will contain other employees from other departments. I really just want to display the employees from the IT team. Here I can select my view that’s filtering, IT employees. Again, I want to be able to display the name, and just stamp the ID inside a table. As an admin, I should be able to edit the summary.
Let’s turn this into a text area with the height two. And description is also going to be a text area. Priority is going to be a dropdown. And let me just type out my values here low, medium, and high. You can also have the attachment. Just remember for the attachment, you can hide that field. If it’s blank, if nobody submits an attachment, why do you want to see the label without the actual attachment? And then just like before what we just did a few minutes ago, let’s have the ticket status be a dropdown. And again, it’s going to be either open or closed. And then we once again need to introduce that rule. First thing I’ll do is put these two fields in its own section. That’ll be under section two. My comments field is going to be a text area, and my date field is simply just going to be a text field. And now it’s going to rules and set it up the same exact way as we just did for the criteria.
We’ll say if the field ticket status equals to open. Let’s go ahead and hide section two. And for my second rule, if the status equals closed, let’s make the other two fields required. Require, comments field, and also require date closed. Let’s take a look and see what we have. I’m going to click finish, and let’s preview this data page. I have to log in as the admin in that case, that happens to be Carrie, she is the admin of the application. Let’s log in. And there’s my search interface. And as you can see down below, we have one ticket that’s assigned to Carrie, and we have one ticket that was assigned to Raj. And here we can group this data by collapsing each one of these groups, and we can also expand. In the details view, I can go to that ticket. And from here I have the ability to reassign to a different creator. I can also reassign this ticket to somebody else. We can edit the summary and description, and we as the admin have the ability to close that ticket, and input our details before we make the update. Let me close the preview tab.
We now have five more data pages to build. And the last five data pages are very easy. They all belong in the admin folder. Let me build a brand new data page here to add a new user to the application. I’m going to select my submission form, and hit next. That needs to be based on my user’s table. And let’s give this form a name. We’re going to call this Add User. I’ll use the same style and same localization, and I only want the admin level user to be able to add new employees. That needs to be restricted based on this authentication.
Let’s move on. In this use case as the admin, I want to be able to input my employee name department, they belong into, their email. Let’s go ahead and create the password on behalf of the employee. You can also trigger an email for the employee to receive an email and click on a link to create their own password. But in this case, just for simplicity and just for the interest of time, I’m going to have the admin create the password on behalf of the user. Let’s also include the account status check box, the roll field, and date added into our submission form. Let’s move on. The name field is more than likely going to be required. Department is also going to be required. And here we can create a dropdown.
I also want to use both here and as the first option in my drop down, I want to say select, delete the value, and then just link your look up to the table that lists all of your departments. For the email field, that’s automatically going to be required because it’s unique inside the table. The password field where you create the password on behalf of the user, you can do that. For account status, I’m actually going to turn this into a hidden form element, and I’m going to unload, receive, or check unload. Which means that upon submission of the form, the user is automatically made active, and he or she will be able to log into the application immediately. If you don’t want the user to log in right away, Let’s say you still have some pending paperwork, but you want to add them to the table, you can uncheck this.
They’re still going to be in the table, but they’re not going to be able to log into the application until you check this inside the table. Let’s go ahead and keep that checked because I want to automatically allow them to log in as soon as they submit the form. For the roll field, I’ll turn this into a dropdown. We have three in this application, so they can either be an admin, IT, or they can be a user of the application. Again, I’m going to add one more select role as the very first option in my dropdown, and make sure you delete the value. And finally, for date added, I’m going to turn this into a timestamp, and I will click finish. Again, you can also preview to see what the form looks like at any point. And here’s the form. Now if you have a new user who wants to gain access to the IT application, the IT help desk, you can add their information here, department, email, password, and what level of access they will have inside the app. Once you’re done, you can click on finish to save your changes. And there’s my tenth data page.
Now let’s build a report that allows the admin level user to edit and manage all the employee information. I will build a brand new data page, go under reports, select tabular, click next. I’ll build this based on the user’s table. Let’s give it a name, manage employees. Same style, restrict access to the admin level user, only the admin level users should be able to edit employee information. Let’s click next. Do I want to have a search interface? It’s completely up to you. You can build a search form, especially if you have, let’s say 10,000 employees or 20,000 employees. It’s helpful to have a search form to be able to quickly pull up their information. But in this application, I only have four or five people on the table, so it makes sense just to display the data without the ability to search.
Let’s click next. I’m not going to filter based on any one of my fields. Let’s move on. And then on the results page, I would like to include the employee’s name, department, email, account, status, role and date added. Let’s continue. Let’s do an inline edit for the results page. Click next. And this is the information that’s going to be displayed on the results page. For the email field, I can render this value as an email link, so it’s clickable. You can also customize the template if you wish. For account status, I’m actually going to format the yes or no. It doesn’t just say simple, yes or no. If somebody’s active or inactive. I can customize this by going to custom, selecting custom here from this dropdown. And if it’s yes, I want it to say active. If it’s no, I want it to say inactive, and I can apply a different color based on that yes or no value.
So if it’s yes, I want that to be some kind of green. And if it’s snow, I want it to be in red, so it stands out. Let’s click next. Let’s display 25 per page. That’s completely fine. Let’s move on. Let’s enable a details page. And for my details link, I’d like to name to become clickable. Let’s continue. And finally, let’s include all of our fields except for maybe user ID. I don’t think we need that in the details view. Move on. And now let’s rearrange our details page fields. As the first field, maybe we can put date added at the very top. Then the name, which will become editable. That needs to be a text field. And let’s make it required. Department can be a very simple dropdown, so just select that. And you already have a table that contains all of your departments.
Just make sure to select that. We should also be able to edit the email. And now if you want to be able to edit somebody’s password, you can do that. But it’s better if the user logs into their account and update their own password, which we already have created for each user. We can remove this from the details page. For account status, this one is important. We’re going to turn this into a checkbox. Now the admin will be able to see a checkbox on the details page, and if they don’t want somebody to be able to log in, they can uncheck the box, and this user will no longer be able to log in. I’m just going to put some display text here to say check to allow login access.
And last but not least, we have the roll field. And this is also going to be turning into a dropdown. And I will add my custom values, either admin, IT or user. This is going to be used if you want to promote somebody or demote somebody in this screen. This is where you’ll end up doing that. Let’s see what we created. Let’s hit preview. Here’s the list of all the employees in my application. If I wanted to edit Mike’s information, I can click on edit here. And here I can deactivate his account. I can also change his role. And we can also go to details by clicking on the name. And from the details page, I can promote him, demote him. I can also make his account inactive if I no longer want him to log in, I can also change the department that he belongs to.
And again, you can add additional fields, and the details view, It just depends on the use case and what you’re building. Let’s close the preview tab, and let’s hit finish to save our changes. And now we have 11 data pages. The last three data pages that we’re going to build are very simple. We’re going to build some charts to be able to displace some metrics. I’ll select new data page, go down to charts, and let’s start with maybe the area chart. And let’s move on. And I want to build this chart based on my data source tickets. Let’s give it a name. I’m going to call this tickets by month. Use the same style. And I also want the admin level user to see that. Let’s continue. Do you want to be able to see a search form? Let’s just say you’re interested in doing some kind of a date range.
You can enable a search interface. Let’s continue. And let’s be able to search based on a date created field. Click next. And then let’s insert our criteria. We already did this before, so you should know how to do this. We add our criteria, we set the AND operator and end criteria. One is going to be greater than or equal two. We’ll just say from. And then this one here will be less than or equal two. And that’s a two field. Let’s continue. And now let’s configure the chart. Remember I’m using the area chart and I can give my chart a title if I want to. I’m just going to quickly show you how to set this up. I’m going to use the separate field for each series. Okay, so you remove the series option for me, for my category, which is the x-axis. I’m going to include the day creative field.
And I want to roll this up based on month. It groups my data per month, that’s how I want to see my tickets. And the value, what we’re trying to calculate here is just a total or count. You can use any one of these fields. I can use summary if I want to, and all I’m going to do is count. It’s going to count the number of tickets by month. You can also choose a different marker if you want to plot onto a chart. Let’s hit preview. I don’t think we’re going to get much from this chart because we only have two data points on it. If I click search, it’s show me that we have two tickets for the month of July. Those are the only two tickets that we have. Now imagine if you had a lot more data, you’re going to see an area chart that goes up or down depending on how many tickets are being submitted by month.
Let’s close this preview tab, and hit finish to save my changes. Now, one thing I don’t like about this, I’m going to go back, and what I want is the results to show up below the search form. And I want to display the results on the initial load. The difference here is now when I hit preview, you will see the chart directly underneath the search form. Whereas before I had to click search in order to view the graph. Now the graph appears directly underneath the search form. Okay, so I’m happy with that. I’m going to click finish to save my changes. For my second chart, I’m going to build a new data page, and this time I’m going to build a bar chart. Let’s select that and hit next. Once again, it’s going to be based on the tickets table. Let’s give it a name, tickets by employee.
And I use the same style, and restrict access to admin level user. Click next. Once again, let’s have a search form, but this time I want to be able to search based on who the ticket is assigned to. And again, I want the results to appear directly underneath the search form. Let’s continue. And I want to be able to search based on this field. Hit next. And if you want to compare, let’s say multiple employees side by side, Caspio does give you the ability for list box type search. You can choose list box. And then in the advanced tab you can say allow multi-selection. This way I can select more than one employee at a time if I want to compare them side by side to see who’s handling more tickets. Back in the standard tab here. Here we have the list box, but I also want to include both because as my first option, I want to be able to search all. Make sure you delete the value.
And once again, you don’t want to be able to list all of your users from the table because that’s going to include your sales employees, your marketing employees. You just want to be able to list IT employees, and have the name be first for display. And the value is always an ID behind the scenes. Let’s continue. Now, let’s configure the chart again, I’m going to use the same source setting as before. For my Y-axis, I’m going to display the names of the employees, so who the tickets are assigned to. And then the value that I’m trying to compute is again, just the very simple count. And on the following screen, I want to be able to sort based on highest to lowest. Who has the most tickets assigned to versus the lowest. And now when I hit preview, you’re probably going to see one ticket for Carrie and one ticket for Raj.
So that’s why you can see they’re lined up correctly, one underneath the other. But here’s my list box where I can select more than one employee at a time or just one employee or search all. But imagine if you had multiple employees, and you want to compare them side by side. That’s what the chart will allow you to do. If you’re happy with that, you can close the preview and hit save or finish. And we only have one more data page to build. And the last one is a very simple donut chart where we want to be able to display the names of the employees in the inner donut. And on the outer donut, we want to be able to display by status if it’s open or closed. Now this chart is going to have the same list box search as my bar. I’m going to go ahead and just make a copy of it so I don’t have to recreate the search form.
So just make a copy of it and we’re going to call this tickets by status. Hit save. Hit edit. I’m going to change from bar chart to a donut. Hit next. Again, the tickets table is the data source admin level authentication. We have the same search form. I’m using the assigned to field. And all of these configurations are already set up for me because I made a copy of it. The only difference here is that we’re going to be using a different chart. We hit next, and let’s configure the chart now. For chart settings, I’m not going to make any changes here for my category. This is the inner circle of the donut chart. I’m going to select assign two, so that’s the correct one. I want to be able to display the name and my subcategory is going to be the status. And for value, all I’m trying to do is count.
Again, you can just use the summary field and count number of different tickets by status. If you’d like to see what this looks like, you can hit preview. And there we have it. We have Raj and Carrie, and they each have one ticket with the status that’s open. And if you’re happy with that, you can close the preview tab, save your changes, and you have now officially completed the entire application, all 14 data pages that has some nice workflows where you can submit a ticket, assign a ticket to an IT employee. The IT employee will review the ticket, close the ticket, and put in the date when it was closed. And then you have the admin level user that can log in, and be able to oversee the full 360 view of the entire application and who’s handling what tickets. Thanks for watching part four, the video guide. I hope that you enjoyed it, and I hope to see in the final video of this guide where I teach you how to deploy the application so the end users can access all of these forms and reports via the web. I’ll see you there.
Share this post: