Designing User-Friendly Navigation Between AppPages

Designing seamless navigation between your AppPages is essential to delivering an intuitive and smooth user experience. Users interact with your app through AppPages and DataParts, and as a developer, you decide what happens when users submit records or navigate to details pages. In this article, we will explore how to create simple user flows in your app.

1. Redirecting From a List of Records to a Record Details Page

2. Updating Records and Returning to the List

3. Creating a Linked Record and Returning to the List

1. Redirecting From a List of Records to a Record Details Page

One common use case is enabling users to navigate from a list of records to a detailed view of a selected record. Caspio makes it easy to set up this type of flow. Here’s how: 

Requirements: 

• AppPage 1: Displays a list of records (Tabular Report or Card Report). 
• AppPage 2: Displays the details of the selected record (Details/Update Form). 

Configuring Navigation: 

1. Open AppPage 1 and select the report DataPart (your list of records). 
2. In the right panel, under Interactive Controls, add a new Record Control. 
3. Enter a label, such as “Details”. 
4. Set the action to Go to AppPage.
   If your app is deployed on your own website, use Go to URL to avoid a redirection to AppPages hosted on the default Caspio domain. 
5. In the dropdown, select AppPage 2, which contains the details page for your record. 
6. Save the Record Control. 

Configuring Data Filtering: 

Next, ensure that the details page shows the specific record selected in the list: 

1. Open AppPage 2 and select the details DataPart. 
2. In the right panel, under Data Filters, click Set Filters. 
3. In the Data Filters panel, click Create Filter. 
4. Select the field with the unique ID for the record. (If no unique ID exists, add one in the table design.) 
5. Set the filter type to Is equal to. 
6. Under Filter results by, select DataPart field, choose the report DataPart from AppPage 1, and select the field that stores the record ID.
   You can refer to the article on Communication Between DataParts for more details.
7. Save the Data Filters. 

Testing the Configuration: 

1. Deploy both AppPage 1 and AppPage 2. 
2. Open AppPage 1, hover over a record, and click the “Details” button.

Result: You are redirected to AppPage 2, showing the details of the selected record.

2. Updating Records and Returning to the List

A common enhancement of the previous flow is allowing users to edit records and automatically return to the list after updating. Here is how to set it up.

Requirements: 

• AppPage 1: Displays the list of records. 
• AppPage 2: Displays the editable details form for the selected record. 

Configuring Navigation: 

1. Open AppPage 1 and select the report DataPart. 
2. In the right panel, under Interactive Controls, add a new Record Control. 
3. Enter a label such as “Edit”. 
4. Set the action to Go to AppPage (or Go to URL if your app is hosted on your site). 
5. In the dropdown, select AppPage 2 (update form). 
6. Save the Record Control. 

Configuring Data Filtering: 

1. Open AppPage 2 and select the update form DataPart. 
2. Under Data Filters, click Set Filters and create a filter based on the record’s unique ID. 
3. In the last step of the filter, select DataPart field from AppPage 1 and map the ID field.
   For more details, see Communication Between DataParts. 
4. Save the filters. 

Configuring the Redirection Back to the List: 

1. Select the update form DataPart on AppPage 2. 
2. Under Destination Page, set the action for On Record Update to Go to AppPage and choose AppPage 1. 
3. Optional: If you allow deletion with your update form, repeat step 2 for On Record Delete.

Testing the Configuration: 

1. Deploy both AppPage 1 and AppPage 2. 
2. Open AppPage 1, hover over a record, and click the “Edit” button. 
3. Make edits and click Update.

Result: You are redirected back to AppPage 1.

3. Creating a Linked Record and Returning to the List

Another common scenario is when you want to create a linked record for an item from a list, such as assigning a task to a team member. In this example, we will demonstrate how to redirect users from a list of records (like team members) to a submission form that creates a related record (such as a task for the selected member). 

Requirements: 

• AppPage 1: Displays a list of team members. 
• AppPage 2: Displays a Submission Form to create a new task. 

The DataParts on AppPage 1 and AppPage 2 have different data sources. 

Configuring the Redirection: 

1. Open AppPage 1 and select the report DataPart that lists the team members. 
2. In the right panel, under the Interactive Controls section, add a new Record Control. 
3. Enter a label, for example, “Assign Task”. 
4. Set the action to “Go to AppPage” (or, if your app is hosted on your own website,“Go to URL” ). 
5. In the dropdown, select AppPage 2 where the Submission Form is located. 
6. Save the Record Control. 

Setting a Default Value: 

1. Open AppPage 2 and select the Submission Form DataPart. 
2. In the right panel, click Change data source and fields. 
3. In the modal window, click Next to proceed. 
4. On the second step, select the field where the team member ID (the one for whom the task is being created) will be stored. 
5. For the Default value option, click Insert Parameter. 
6. Select DataPart field as the type of parameter, and then choose the field from the report DataPart (on AppPage 1) that stores the unique team member ID. 
7. Save the changes and close the modal window. 

Configuring the Redirection Back to the List: 

1. On AppPage 2, select the Submission Form DataPart. 
2. In the right panel, under the Destination Page section, set the action for On Record Submit to “Go to AppPage”, and choose AppPage 1 to return the user back to the list of team members after task creation. 

Testing the Configuration: 

1. Deploy both AppPage 1 and AppPage 2. 
2. Open AppPage 1, hover over a record, and click the “Assign Task” button for the selected team member. 
3. Complete the task creation form and click Submit. You should be redirected back to AppPage 1 with the list of team members. 

By following these steps, you can easily create smooth navigation between record listings, detailed views, and edit forms in Caspio. This setup ensures a fluid user experience and keeps your application efficient and user-friendly.