Build a Custom CRM

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:

  1. Select data source – Select SCRM_tbl_contact_info for Tom and Kelly to submit information about their leads into your contact table.
  2. Enter DataPage name – Since this DataPage will be used by employees to add leads, type in New Leads. Note that you’re free to use any naming convention for your app.
  3. Select Style – You can apply different preloaded styles to change the aesthetics of your DataPage here. You can even create your own when you go to the Styles object in the main left-hand panel. For now, stick with the default selection.
  4. Select Localization – This dropdown will allow you to select different regional settings like the format of the date and language of the form. If you wish to configure your own localization, go to the Localizations object in the main left-hand panel. For now, use English (default).

  Under Access and Security, make the following modifications:

  1. Check Restrict Access.
  2. Make sure that the first radio button to Require Authentication is selected.
  3. Select SCRM Employee Login in the dropdown. This is the exact authentication you’ve built on top of the view that’s filtering Tom and Kelly.

  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: kelly.smith@company.com, Password: test). But there are still modifications you’ll need to make on selected fields under DataPage Elements:

  1. First_Name – Under Field Options, check the box for Required. Now employees would have to fill in data on this field before they can submit the form.
  2. Last_Name – Again under Field Options, check the box for Required.
  3. Contact_Method – To turn this text field into a set of radio buttons, follow these steps:
  • • Under General Options, in the Form Element dropdown, select Radio Buttons.
    • In the Custom Values tab below, input Email in the Display and Value fields.
    • Click the New button on the right.
    • Input Phone in the Display and Value fields.
    • Click the New button on the right.
    • Input No Preference in the Display and Value fields.
  4. Stage – To turn this text field into a dropdown that displays all the stages inside your SCRM_stage_lookup table, follow these steps:
  • • Under General Options, in the Form Element dropdown, select Dropdown.
    • Under Field Options, in the dropdown menu for Source, select Both to have custom values and items from a lookup table or view.
    • In the Custom Values tab, type in – Select Stage – on the Display field and delete the mirrored input on the Value field.
    • In the Lookup Table tab, in the Table or view dropdown, select SCRM_stage_lookup.
    • Make sure that the Field for display and Field for value dropdowns have Stage selected.
  5. Notes – Under the Form Element dropdown, select Text Area so your users can see what their typing in a well-sized box.
  6. Assigned_to_by_Staff_ID – When you log in as an employee to submit a lead, it would be tedious to manually select or input your ID each time. Configure this field to automatically stamp your ID with every submission through the following steps:
  • • Under the Form element dropdown, select Hidden.
    • Under Field Options, for both dropdown menus of On load, receive — select Authentication Fields and SCRM_tbl_staff_Staff_ID.

  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.

• Wizard Step 1 – DataPage Type

  Click on Reports, select Combined Chart and Report, and click Next to move on to the next screen.

• Wizard Step 2 – DataPage Data Source

  Configure the following fields under DataPage Properties and leave the rest as is:

  1. Select data source – Again, select SCRM_tbl_contact_info since that table will have all the contact information and deal sizes in stages.
  2. Enter DataPage name – Name this DataPage Search Contacts.

  Under Access and Security, make the following modifications:

  1. Check Restrict Access.
  2. Make sure that the first radio button to Require Authentication is selected.
  3. Select SCRM Employee Login in the dropdown.

  Click Next when you’re done.

• 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:

  1. Check Restrict record access based on user identity.
  2. In the dropdown for Identity field in Authentication, select SCRM_tbl_staff_Staff_ID.
  3. In the dropdown for Matching field in current data source, select Assigned_to_by_Staff_ID.

  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:

  1. First_Name
  2. Last_Name
  3. Title
  4. Phone
  5. Email

  Click Next when you’re done.

• 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.

  Click Next when you’re done.

• 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:

  1. First_Name
  2. Last_Name
  3. Title
  4. Phone
  5. Deal_Size
  6. Stage
  7. Follow_up_date

  Click Next when you’re done.

• Wizard Step 7 – Results Page Editing Options

  

  Under Edit Records, check the following boxes:

  1. Grid edit (spreadsheet style)
  2. Bulk edit (applies same updates across multiple records)

  Now your employees can implement cell revisions and mass updates similar to a spreadsheet.

  Click Next when you’re done.

• Wizard Step 8 – Configure Results Page Fields

  

  Modify the fields below under DataPage Elements:

  1. Stage – Push this field to the very top of the list by clicking the up-arrow button at the bottom. This will be the desired ordering of columns in the table section of this DataPage. Then do the following while the Stage field is highlighted:
  • • Check the box under Label to Enable data grouping by this field.
    • In the dropdown for Grouping display, select Collapsible group.
    • Select the first radio button for the field to be Expanded by default.

  Now your employees can easily view all their leads in the prospect and forecast bucket, and those who were already won or closed.

  2. Aggregate 1 – Add a basic calculation field to display total sales by clicking the insert symbol at the bottom of the DataPage Elements panel. Then select Totals & Aggregation. Next, implement the following modifications on the Standard tab:
  • • Under Aggregate Options, select Deal Size from your list of Available Fields.
    • Click the “>” button to include it in your Selected Fields.
    • Make sure that Function is selected in the radio button underneath.
    • Make sure that Sum is selected in the dropdown beside it.

  Then implement the following in the Advanced tab:

  • • Under Group Options, among the radio buttons for Position, select Below data. This will adjust the position of your total aggregate relative to your data.

  Click Next when you’re done.

• Wizard Step 9 – Configure Fields for Bulk Edit

  

  To quickly select from your list of stages when performing bulk edits, implement the following steps:

  1. Under DataPage Elements, select the Stage.
  2. Under General Options, change the Form Element from Text Field to Dropdown.
  3. Under Field Options, for your Source, select Lookup table or view.
  4. On the Lookup Table tab below, for your Table or view, select SCRM_stage_lookup.
  5. For both Field for display and Field for value dropdowns, make sure that Stage is selected.

  Click Next when you’re done.

• 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:

  1. Chart Settings – Here you can add your chart title and explore other modifications. Make no changes for now.
  2. Data Source Settings – In configuring how to chart your data, select the first radio button to Create series from data in a single field. That’s because you’re trying to calculate the values based on a single field, which is Stage, and the goal is to group your data that way.
  3. Category (X Axis) – Make the following modifications:
  • • Under General Options, type in Month as the Axis Title.
    • In the dropdown for Category field, select Follow_up_date.
    • In the dropdown for Group date by, select Date rollup.
    • In the dropdown for Date rollup, select Month.
  4. Series – The plot here should be based on your Stage field, so leave the default selection of Data series field as is.
  5. Values (Y Axis) – Make the following modifications:
  • • Under General Options, type in Total Sales as the Axis Title.
    • Under Display Options, in Formatting, click Edit.
    • In the resulting popup window, select the radio button for Custom.
    • In the dropdown for Format type, select Currency.
    • Click OK.
  6. Value – Since you’re trying to get the sum of the total sales, select Deal_Size in the dropdown for Value field.

  Click Next to continue.

• 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:

• First Name – Kevin
• Last Name – Smith
• Deal Size – $15,000
• Stage – 1. Prospect (10%)
• Follow up date – Select any future date on the calendar

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:

1. Your added prospect plotted on the chart by Deal Size and Follow up date.
2. The data in the tabular report grouped by Stage.
3. The total, group total and grand total at the bottom of the report.

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:

1. Hover your cursor over Search Contacts.
2. Click More.
3. Click Duplicate.
4. Name your new DataPage, Dashboard.
5. Click Save.

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:

• Wizard Step 3 – Search Type

  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

  Configure the Chart Elements on the left-hand panel:

  1. Chart Settings – Make the following modifications:
  • • Input Pipeline by Stage as the Title.
    • Change the Width settings from Auto to Fixed.
    • Input 600 in the text box asking you for the number of pixels (px).
  2. Category – Set the Category field to Stage.

  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:

1. A funnel chart that shows revenue data by Stage
2. The same tabular report as seen in DATAPAGE 2

This section will cover all the interfaces for the managers. Follow these steps to get started:

1. Go back to your list of DataPages.
2. Close your Employees folder.
3. Open your Managers folder.
4. Click the New DataPage link on top.

DATAPAGE 4: Add New Employee

Here you’ll be building a submission form for your managers to add new employees to the staff table.

• Wizard Step 1 – DataPage Type

  Click on Forms, select Submission Form, then click Next to continue.

• Wizard Step 2 – DataPage Data Source

  Make the following modifications:

  1. In the dropdown for Select data source, select SCRM_tbl_staff.
  2. In the text box to Enter DataPage name, type in Add New Employee.
  3. Under Access and Security, enable Restrict Access.
  4. In the dropdown for Require Authentication, select SCRM Manager Login.

  Now only John Doe, who happens to be the manager, can add new employees.

• Wizard Step 3 – Select Fields

  Include all Available Fields at once (except Staff_ID and Date_Added), to your Selected Fields by clicking ”>>”. Then click Next to continue.

• Wizard Step 4 – Configure Fields

  Go through the DataPage Elements below and apply the necessary changes:

  1. Name – Under Field Options, check the box for Required.
  2. Email – Under General Options, select Email as the Form Element. This will automatically check if the input submitted has the email formatting. Also, the email form element is flagged as required since it is a unique field.
  3. Password – While there are customization options available, stick with the default settings.
  4. Role – Apply the following changes:
  • • Under General Options, select Dropdown as the Form element.
    • Under the Custom Values tab, type in – Select Role – on the Display field.
    • Delete the mirrored input on the Value field.
    • Click the New button to the right.
    • On the Display and Value fields, type in Manager.
    • Click the New button to the right.
    • On the Display and Value fields, type in Employee.

  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.

  5. Status – Add a Display Text that says Check to allow employee login.

  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: john.doe@company.com, Password: test) to access the submission form.

You should be able to observe the following for DATAPAGE 4:

1. Required input fields for Name, Email and Password.
2. A dropdown menu for your list of available roles.
3. A checkbox to flag employees as active.
4. A Submit button.

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.

• Wizard Step 1 – DataPage Type

  Click on the Reports tab and select Tabular, then hit Next to continue.

• Wizard Step 2 – DataPage Data Source

  Make the following modifications:

  1. In the dropdown for Select data source, select SCRM_tbl_staff.
  2. In the text box to Enter DataPage name, type in View/Manage Staff.
  3. Under Access and Security, enable Restrict Access.
  4. In the dropdown for Require Authentication, select SCRM Manager Login.

  Now only John Doe can edit employee information. Click Next to continue.

• Wizard Step 3 – Search Type

  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.

  Click Next to continue.

• 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:

  1. Date_Added
  2. Name
  3. Email
  4. Role
  5. Status

  Click Next to continue.

• Wizard Step 6 – Results Page Editing Options

  Enable the following checkboxes:

  1. Grid edit
  2. Bulk edit
  3. Inline delete

  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

  No need to make any changes here. Click Next to continue.

• Wizard Step 9 – Results Page Options

  No need to make any changes here. Click Next to continue.

• 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:

  1. Date_Added
  2. Name
  3. Email
  4. Password
  5. Role
  6. Status

  Click Next to continue.

• Wizard Step 12 – Configure Details Page Fields

  Make the following modifications under DataPage Elements:

  1. Name – Under General Options, select Text Field as the Form Element.
  2. Email – Under General Options, select Email as the Form Element.
  3. Password – Under Password Options, disable Require current password validation. That’s because managers may not necessarily know the current password of their employees.
  4. Role – Apply the following changes:
  • • Under General Options, for your Form element, select Dropdown.
    • On the Display and Value fields, type in Manager.
    • Click the New button to the right.
    • On the Display and Value fields. type in Employee.

  Your managers can now promote or demote employees on the details page.

  5. Status – Apply the following changes:
  • • Under General Options, for your Form Element, select Checkbox.
    • Under Field Options, for your Display Text, type in Check to allow login.

  When you’re done, click Finish to save your work.

Preview this DataPage as John to check the functionality.

You should be able to observe the following for DATAPAGE 5:

1. See every employee data on your staff table.
2. The ability to make grid and bulk edits on the page.
3. A details link to drill down on more information and make additional edits.

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:

1. Go back to your list of DataPages.
2. Hover your cursor over Dashboard and click More.
3. Click Duplicate.
4. Click Save.
5. On your new DataPage named Dashboard_1, click More.
6. Click Move.
7. On the resulting popup window, select Managers then click Move.
8. Hover your cursor over Dasboard_1 in your Managers folder and click More.
9. Click Rename.
10. Name this DataPage Dashboard as well.
11. Click Save.

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.

• Wizard Step 2 – DataPage Data Source

  Under Access and Security, change the selected authentication to SCRM Manager Login. This report should only be accessible to John Doe.

• Wizard Step 3 – Search Type

  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.

• Wizard Step 5 – Select Results Page Fields

  Select Assigned_to_by_Staff_ID from your Available Fields and by click “>” transfer it to your Selected Fields.

• Wizard Step 7 – Configure Results Page 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:

  1. In the Label field, type in Assigned to.
  2. Check the box to Enable data grouping by lookup values.
  3. For your Grouping display dropdown, select Collapsible group.

  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:

1. A funnel chart that lists all the information across all employees.
2. Grouping based on employee in the tabular report.
3. A sub-grouping based on Stage.
4. All the totals and aggregations.

If you had additional data inside your contacts table, you’re going to see a lot more entries in your report.