How to pass variables between micro app pages
Category: Sapho Builder
Audience: Developers building Sapho micro apps
A large aspect of building micro apps is creating pages and connecting them together to create user flows.
In Sapho, page navigation is normally specified by simply selecting the destination page in the "Go to Page" setting of particular components, such as buttons or lists. When a user clicks on that component in runtime, the destination page will be rendered.
Since Sapho knows the underlying data model, such as the primary keys and relationships among your database tables, it automatically sets up what data should be rendered on the destination page.
In the example above, the user will be directed from the Salesforce Leads list page to the appropriate lead detail page. The only thing that needed to be set was the destination page. Since Sapho knows the data model, you don’t have to set how the destination page knows what lead to render. It knows the primary key of the leads table and can therefore automatically transfer the lead’s ID from the list to the detail page so the appropriate record is rendered.
But there are cases that aren’t so straightforward. Imagine a situation where you have a lead detail page and want to place a button on this page that will direct a user to a list of leads from the same lead source. In this case, Sapho can’t obtain this information out-of-the-box, so you will need to define it manually.
In general, there are two cases that require the use of manual transitions:
- Limiting or selecting specific record(s) - either explicitly define which record should be rendered on the detail page, or what filters should be applied to list, table, or chart pages.
- Pre-populating a form - selected fields in either search or add/update forms.
Limiting and sorting target page data
The first use case allows a user to set up a query on the source page to:
- Display a record on the target detail (or form) page based on the parameters of the source page.
- Filter records on the target list, table, or chart page based on the parameters of the source page.
It’s easy to set up this type of query in Sapho. Here’s how to limit or sort target page data:
- Click on the button component on the page and find Go to Page in the settings menu on the right-hand side. In a list or table component, open the Action tab in the settings menu and find Go to Page.
- Go to Query for Target Page and click SET QUERY to open the query dialog window.
- Set constraints and click Save.
Within the query dialog window, you can set up constraints that use data or component values from the source page to limit which records are displayed on the target page. In the example below, you can see that the lead_source column on the target page (on the left) will be used to filter the list of leads based on the value of the Lead Source component (on the right) on the source page.
There are many combinations of transitions from one page to another (e.g. from a detail page to a list page, from a list page to a table page, etc.). Sapho currently supports all combinations except for transitions from a list, table or chart page to a detail page.
Querying a target page is one thing, but there are page types that require you to sort the records based on parameters from the source page.
Here’s how to sort records based on parameters from the source page:
- Click SET ORDER.
- In the standard dialog window, define the sort order of the target page’s records, as shown in the example below.
- Click Save.
Populating forms and search pages
The second use case refers to a situation where you want to pre-populate form fields on the target page based on the data from the source page.
There are two variants of this use case:
- Pre-populate the fields of a search form to automatically filter the list of displayed records.
- Pre-populate the fields of an add/update form to make filling out forms easier for a users.
Setting up the pre-population rules works very similarly to setting up a page to page query:
- Select the search or detail (form) page you wish to edit.
- Click on the button component on the page and find Go to Page in the settings menu on the right-hand side. In a list or table component, open the Action tab in the settings menu and find Go to Page. You will see an additional field, Populate Target Page.
- Click SET FIELDS and set up what data from the source page will be used to pre-populate the form fields on the target page in the dialog window.
- Click Save.