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
Caspio Powers Over 1 Million Applications
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.
Low-code pioneer continues to democratize application development.
Build custom applications fast, without any coding or IT skills.
Part 4 will teach you how to create all the necessary input forms, reports and charts needed to power your custom CRM.
In the previous video, you learned how to build two login screens — one for Tom and Kelly who are employees, and another for John who is their manager.
With your authentications created, click the DataPages object on the main left-hand panel. This is where you’ll build all your app functionalities. A DataPage is like a window to your custom online database, and is actually a Caspio term that refers to your app interfaces or widgets.
Before you start building DataPages, you must first learn how to create folders. Our recommended way of implementing this is to assign a folder for every user group within your application. For our use case, you’ll need one for the managers and another for employees.
Start by clicking the New Folder link on top, then type in Managers as the folder name and click Save. Simply follow the same procedure when creating your Employees folder.
Once you have all your folders created, expand the Employees folder by hovering your cursor over its container and clicking Open. The first DataPage you’ll build will now be stored within.
Now you’re ready to begin building the employee side of your app functionality.
Click the New DataPage link on top to launch Caspio’s point-and-click interface.
DATAPAGE 1: New Lead
For your first DataPage, you’re going to build a simple input form that allows Tom and Kelly to add a new lead.
Wizard Step 1 – DataPage Type
On the left-hand side of this screen, you’ll see a navigation menu that features all the different apps you can build including Forms, Reports, Calendars, Charts and HTML pages for the technically adept. For now, click on the Forms tab and select Submission Form.
Click Next to continue to the second screen.
Wizard Step 2 – DataPage Data Source
Under DataPage Properties of the resulting screen, you have four fields you can configure:
Under Access and Security, make the following modifications:
Move on by clicking Next.
Wizard Step 3 – Select Fields
Here you’re prompted to select which fields you’d like to include in the submission form. Transfer all Available Fields to your list of Selected Fields by clicking the “>>” symbol.
Click Next when you’re done.
Wizard Step 4 – Configure Fields
At this point, you can click the Preview button if you’re interested to see what the form looks like (Email: email@example.com, Password: test). But there are still modifications you’ll need to make on selected fields under DataPage Elements:
Click Preview when your done to view all the changes you’ve made.
If you’re happy with the way the form looks, close the preview window, go back to your wizard screen, and click Finish.
DATAPAGE 2: Search Contacts
The next DataPage you’ll build will allow employees to view their leads and deal sizes through a combined chart and report. Open the Employees folder and click the New DataPage link on top to get started.
Click on Reports, select Combined Chart and Report, and click Next to move on to the next screen.
Configure the following fields under DataPage Properties and leave the rest as is:
Wizard Step 3 – Search Type
This screen gives you the option to build a search form. Under Data Selection, click the first radio button to Allow users to select data using a search form. Then underneath, select Display search form and results on separate screens.
Finally, under Record Level Security, make the following modifications:
Now employees can only view their own data upon logging in. Click Next when you’re done.
Wizard Step 4 – Select Search Fields
This screen will ask you to select those fields you want to appear in the search form. They will be used by your staff employees to search contacts.
Keep it simple for now and choose only the following fields from your Available Fields. Click “>” to transfer each of them to your Selected Fields:
Wizard Step 5 – Configure Search Fields
Here you’ll be able to configure the properties of your search fields.
Notice that the default Comparison type selected for your fields is Equals, requiring you to know the exact thing you’re searching down to a letter. To allow for more flexibility, select Contains instead. Now you’ll have a broader search range even from a single relevant character.
Quickly go through all your fields under DataPage Elements and change the Comparison Type selected from Equals to Contains.
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 – Results Page Editing Options
Under Edit Records, check the following boxes:
Now your employees can implement cell revisions and mass updates similar to a spreadsheet.
Wizard Step 8 – Configure Results Page Fields
Modify the fields below under DataPage Elements:
Now your employees can easily view all their leads in the prospect and forecast bucket, and those who were already won or closed.
Then implement the following in the Advanced tab:
Wizard Step 9 – Configure Fields for Bulk Edit
To quickly select from your list of stages when performing bulk edits, implement the following steps:
Wizard Step 10 – Results Page Options
Keep the default settings that include displaying 25 records per page. Click Next to continue.
Wizard Step 11 – Select Chart Type
Here you can choose the kind of chart that would best display the data inside your contacts table. For this use case, under Column Charts, select Stacked Column.
Click Next to continue.
Wizard Step 12 – Configure Chart Options
Configure the Chart Elements on the left-hand panel:
Wizard Step 13 – Details Page
Should you choose to enable the Details Page by selecting the first radio button, you’re allowing your employees to drill into each one of the leads and make further modifications. But in the interest of time, go ahead and select the second radio button to have No Details Page.
Click Finish to save your work.
When you click Preview on your newly created DataPage and hit Search on the web form you’ve built earlier — you’ll see in the results that no data is plotted on the chart, with no tabular report underneath. This is because you don’t have any data inside the contacts table yet.
Go ahead and make one submission by going back to your list of DataPages and clicking Preview on New Lead. Bear in mind that you’re still logged in as Kelly when you submit the following data:
There is no need to fill-in the other fields so hit Submit, then Preview your Search Contacts DataPage once again.
You should be able to observe the following for DATAPAGE 2:
DATAPAGE 3: Dashboard
For your third DataPage, you’ll be building another report for your employees to view their entire pipeline on a funnel chart. To do this, you don’t have to build it from scratch. You can simply duplicate an existing DataPage similar to what you want to build and edit from there.
Since you already have a Combined Chart and Report created in your previous DataPage, go to your DataPage list and do the following steps:
You’ve now recreated the exact report you’ve built in DATAPAGE 2. To make adjustments, hover your cursor over Dashboard and click Edit.
Simply click Next until you get to these wizard screens you need to edit:
You no longer need to use a search form here so click the second radio button to Filter data based on your pre-defined criteria.
Wizard Step 10 – Select Chart Type
Scroll down to Other Charts and select Funnel.
Wizard Step 11 – Configure Chart Options
When you’re done, click Finish to save your changes.
In your list of DataPages, hover your cursor over Dashboard and click Preview.
You should be able to observe the following for DATAPAGE 3:
This section will cover all the interfaces for the managers. Follow these steps to get started:
DATAPAGE 4: Add New Employee
Here you’ll be building a submission form for your managers to add new employees to the staff table.
Click on Forms, select Submission Form, then click Next to continue.
Make the following modifications:
Now only John Doe, who happens to be the manager, can add new employees.
Include all Available Fields at once (except Staff_ID and Date_Added), to your Selected Fields by clicking ”>>”. Then click Next to continue.
Go through the DataPage Elements below and apply the necessary changes:
Notice that a lookup table isn’t used. That’s because your list of items is few enough to input manually as custom values. But we recommend using a lookup table with selections of four and above.
When you’re done, click Finish to save your work.
Now click Preview on your new DataPage inside the Managers folder. Note that you need to login as John Doe first (Email: firstname.lastname@example.org, Password: test) to access the submission form.
You should be able to observe the following for DATAPAGE 4:
DATAPAGE 5: View/Manage Staff
This DataPage will allow managers to view all employees and make modifications through a tabular report.
Go back to your list of DataPages and make sure that the Admin folder is open, then click the New DataPage link to get started.
Click on the Reports tab and select Tabular, then hit Next to continue.
Now only John Doe can edit employee information. Click Next to continue.
You don’t need a search form here so click the second radio button to Filter data based on your pre-defined criteria. Record level security isn’t required as well since your managers will be the highest-level users.
Wizard Step 4 – Selecting Filtering Fields
You don’t need to filter data based on any field. Go ahead and click Next to continue.
Wizard Step 5 – Select Results Page Fields
Select the following from your Available Fields and click “>” to transfer them to your Selected Fields:
Wizard Step 6 – Results Page Editing Options
Enable the following checkboxes:
Now your manager can edit employee information on the DataPage. Click Next when you’re done.
Wizard Step 7 – Configure Results Page Fields
No need to make any changes here. Click Next to continue.
Wizard Step 8 – Configure Fields for Bulk Edit
Wizard Step 9 – Results Page Options
Wizard Step 10 – Details Page
Make sure that the first radio button is selected to enable the Details Page, then click Next to continue.
Wizard Step 11 – Select Details Page Fields
Choose the following from your Available Fields and click “>” to transfer them to your Selected Fields:
Wizard Step 12 – Configure Details Page Fields
Make the following modifications under DataPage Elements:
Your managers can now promote or demote employees on the details page.
Preview this DataPage as John to check the functionality.
You should be able to observe the following for DATAPAGE 5:
DATAPAGE 6: Dashboard
The last DataPage you’ll build in this tutorial will have the same type of funnel-charting capability you’ve given to your employees. The only difference here is that managers should see all the data.
As you’ve learned earlier, you don’t have to build a DataPage from scratch if there’s a similar one created. All you have to do is duplicate. Implement the following steps to get started:
To start making adjustments, go to your managers Dashboard and click Edit. Then click Next to get to these wizard screens you need to change.
Under Access and Security, change the selected authentication to SCRM Manager Login. This report should only be accessible to John Doe.
Under Record Level Security, disable Restrict record access based on user identity. Since your managers are at the highest level, they should be able to see all the data from the contacts table.
Select Assigned_to_by_Staff_ID from your Available Fields and by click “>” transfer it to your Selected Fields.
Move Assigned_to_by_Staff_ID to the top of your DataPage Elements list by selecting the field and clicking the up-arrow button. Then make the following modifications under General Options:
When you’re done, click Finish.
Go ahead and Preview your final DataPage and check its functionality.
You should be able to observe the following for DATAPAGE 6:
If you had additional data inside your contacts table, you’re going to see a lot more entries in your report.
We hope that you enjoyed this video on how to build the DataPages needed for this entry-level CRM app.
As you can see, everything in Caspio uses a point-and-click interface. And if you devote some time to learning how to use the platform, you will be able to build this functionality in no time at all.
Join us in the next video where we complete development by deploying this application to a website.
Share this post:
Caspio is the world’s leading cloud platform for building online database applications without coding. We are ranked a Leader in Low-Code Platforms by Forrester Research.
© 2021 Caspio, Inc. Sunnyvale, California. All rights reserved.