Digital Success. One and Done.TM
Experience the best of everything Caspio has to offer.
Start Your Free Trial in 30 Seconds
Learn to Build Caspio Apps for FREE
Stretch the Limits of Low-Code: Mobile Apps, Messaging, Integrations & More
Stand With Ukraine
We're ranked the strongest of all vendors based on product strengths.
SiteRocket Labs Transforms Healthcare Delivery
Builds HIPAA-compliant apps and slashes development time by over 60%.
Low-Code Fuels National Energy Company
J-W Power meets demand for custom apps despite limited IT resources.
Build Your Own CRM Without Coding or IT Skills
Learn how to create a custom CRM application in a matter of hours.
Caspio Powers Over 1 Million Applications
Low-code pioneer continues to democratize application development.
Build custom applications fast, without any coding or IT skills.
Part 4 will show you how to recreate all your forms and reports using Caspio’s point-and-click interface.
This tutorial will guide you in developing eight different applications without writing a single line of code. You’ll be using what we call DataPages — they are application interfaces you can embed onto your website to access all its functionality.
To begin building your forms and reports, go to the DataPages object on the main left-hand panel and click the New DataPage link on top. This will launch the DataPage wizard.
DATAPAGE 1: Create a New Bug
Start with a simple submission form that allows end users to open a new bug. It will be a recreation of the Access form below:
When you log in as the end user, you should have the ability to create a bug and assign it to somebody else.
Wizard Step 1 – DataPage Type
Click on Forms and select Submission Form, then click Next to continue.
Wizard Step 2 – DataPage Data Source
Under DataPage Properties, there are four fields you can configure:
Under Access and Security, make the following modifications:
Click Next to continue.
Wizard Step 3 – Select Fields
On this screen, select the following from your Available Fields and transfer them to your Selected Fields. These fields will be used in your web form:
Wizard Step 4 – Configure Fields
Modify the fields below under DataPage Elements:
Once you’re done configuring all your fields, click the Preview button to see what your form looks like. Use John Doe’s credentials (Username: johndoe | Password: test) when logging in.
If you’re happy with the way the form looks, close the preview screen and click Finish back in the DataPage wizard. Now you have your very first submission form.
DATAPAGE 2: Filter New Bugs Report
Below is the live example of your next DataPage:
It’s going to be a report that filters out all the bugs flagged as New. It will also display, using record level security, the bugs that belong to the user who logged in.
Back inside the DataPages object, click the New DataPage link on top to get started.
Click on Reports, select Tabular, then click Next to move on to the next screen.
Configure the following fields under DataPage Properties and leave the rest as is:
Under Access and Security, make the following changes:
Wizard Step 3 – Search Type
This screen gives you the ability to search data or filter records right away. For this report, make the following changes:
Now when you log in, you’ll only see data that belongs to your ID. Click Next to continue.
Wizard Step 4 – Select Filtering Fields
Wizard Step 5 – Configure Filtering Fields
Wizard Step 6 – Select Results Page Fields
In this screen, you’ll be selecting the fields you want to display on your results page. Choose the following from your Available Fields and click “>” to transfer them to your Selected Fields:
Wizard Step 7 – Select Results Page Fields
Wizard Step 8 – Configure Results Page Fields
In order to truncate long text descriptions in your results page, make the following changes:
Wizard Step 9 – Configure Fields for Bulk Edit
When you’re done, implement the following steps to select other statuses:
Wizard Step 10 – Results Page Options
Keep the default settings that include displaying 25 records per page. Click Next to continue.
Wizard Step 11 – Details Page
But before submitting data through your form to test your report, click Finish to save your work.
Click the Preview link on your Create a New Bug form and enter the following dummy data:
When you’re done, close the page and click the Preview link on Filter New Bugs Report.
Now when John logs in, he will see the bug that was assigned to him. On the flip side, a bug assigned to Sarah Smith won’t be displayed since you’re using record level security.
DATAPAGE 3: Filter In Progress Report
This next report is very similar to DATAPAGE 2. The only difference is it’s going to show all the bugs that are currently In Progress.
You don’t have to build a new DataPage from scratch. All you need to do is follow the steps below to duplicate DATAPAGE 2:
Since it’s the exact same DataPage from before, you’ll need to make one minor change. Hover your cursor over Filter In Progress Report and click Edit to begin.
Click Next until you get to the wizard screen below:
When you’re done, click Finish to save your changes.
If you hit the Preview button on Filter In Progress Report, you’ll once again see that no records are found. This is due to John not having any bugs assigned to him that are In Progress.
Follow the steps below to edit John’s sample data:
You’ll now find that Filter New Bugs Report no longer shows the sample bug. But if you go back and click Preview on Filter In Progress Report, that bug will now be displayed.
DATAPAGE 4: Filter In Progress Report
The fourth DataPage you will build is one that has a search interface. Here is the live example for reference:
This DataPage will allow you to pull up all the bugs based on multiple parameters. And similar to DATAPAGE 3, all you need to do is make a copy of an existing DataPage:
Next, hover your cursor over Manage Bugs Report and click Edit, then click Next until you get to the wizard screens below:
Make the following changes:
Your end users can now search and see all the bugs assigned to everyone else.
Wizard Step 4 – Select Search Fields
You can include as many fields as you want to your search interface, but in the interest if time, choose only the following from your Available Fields. Click “>” to move them to your Selected Fields:
Click Next to configure both of your search fields.
Wizard Step 5 – Configure Search Fields
Make the following changes under DataPage Elements:
Now when a user searches for a letter or phrase, it’s going to display all the bugs that contained that letter or phrase. This method of searching is much easier than using the Equal comparison type, which requires you to input exact values to make a successful search.
Wizard Step 7 – Results Page Editing Options
Now you’ve emulated the live example where Inline Edit is the only editing option enabled.
Wizard Step 8 – Results Page Editing Options
Notice in the live example how data is grouped by AssignedTo user. You can implement that same configuration by applying the changes below:
At this point, click Preview to check your DataPage. The first thing you’ll see will be your search form.
You can search based on the title Summary and pull up all the bugs based on Status. Select Search Any for now and hit Search.
Whenever you submit a bug, you’re stamping the user ID on the Bugs table. All you need to do to display their respective usernames is edit the relationship between your Users table and Bugs table.
Follow the steps below to implement this change:
Now go back to DataPages and click Preview on Manage Bugs Report. Make another Search and observe the AssignedTo field. You should now see usernames instead of actual IDs.
Close the preview screen when you’re done checking.
DATAPAGE 5: Add New Comment
The next DataPage will be a form to submit comments. Click the New DataPage link to begin.
Click the Forms tab and select Submission Form.
Configure the following fields under DataPage Properties:
Transfer the following from your list of Available Fields to your Selected Fields:
Click the Preview button to see what the form looks like.
Now you have the ability to select a bug, input comments and submit. When you’re done checking your form, click Finish to save your changes.
DATAPAGE 6: Manage Comments
The next DataPage will be a report to track comments. Click the New DataPage link to begin.
Click the Reports tab and select Tabular.
Use the default settings that will Allow users to select data using a search form.
Select Bug from your list Available Fields, then click “>” to move it to your Selected Fields.
Use the default settings and skip to the next page.
Wizard Step 8 – Configure Search Fields
Wizard Step 9 – Select Results Page Fields
Wizard Step 10 – Results Page Editing Options
Wizard Step 11 – Results Page Options
Wizard Step 12 – Details Page
Select the second radio button to have No Details Page.
Click Finish to save your changes, then click the Preview link on your Manage Comments DataPage. The first thing you’ll see will be a search form.
What you have here is a dropdown list of all the bugs assigned to a user. And once you click Search on your selected bug, you’ll see a report displaying all the related comments and the users who wrote them.
Similar to the changes you’ve made in DATAPAGE 4 regarding table relationships, you can replace the user ID displayed here with its corresponding username:
Now go back to DataPages and click Preview on Manage Comments. Make another Search and observe the User field. You should now see the username instead of the actual ID.
In the last two DataPages, you’ll learn how to quickly put together simple charts for your app.
DATAPAGE 7: Total Bugs by Status
For this DataPage, you’ll be building a pie chart that shows the distribution of all the bugs by status. Click the New DataPage link to begin.
Click the Charts tab, find the Pie Charts section, then select Pie.
Under Data Selection, select the second radio button to Filter data based on your pre-defined criteria.
Wizard Step 5 – Configure Chart Options
Make the following changes under Chart Elements:
Click the Preview button when you’re done to see what the chart looks like. You should now see all eight bugs that are flagged as New, and one that’s In Progress.
Close the preview screen and click Finish to save your work.
DATAPAGE 8: Total Bugs by Month
For your last DataPage, you’ll be building a line chart that shows all the bugs per month. Click the New DataPage link to begin.
Click the Charts tab, find the Line and Step Charts section, then select Line.
Click the Preview button when you’re done to see what the chart looks like. You should now see the number of bugs opened per month.
Join us in the final video where we teach you how to deploy these DataPages onto a website. This will allow your end users to log in via the web and access the entire application.
Share this post:
Caspio is the world’s leading cloud platform for building online database applications without coding. Start a free trial today and experience the power of no-code.
© 2022 Caspio, Inc. Sunnyvale, California. All rights reserved.