Add a Details Page With the Quick Start

Use the Add Detail Page Quick Start to create a page that displays the details of an object selected in a table or list.

After you use the Quick Start to add the Detail page, clicking the Details button opens a page that displays details of the selected object. Selecting an object in the component triggers a component event that stores the id of the selected object in a page variable. Clicking the Details button triggers an action chain that navigates to the Detail page, and the id value stored in the variable is passed as an input parameter to the page.

When the Detail page is loaded, a page event triggers an action chain that sends a request to the endpoint to get the data, and the input parameter passed to the page is mapped to the input parameter required by the request. The response from calling the endpoint is mapped to a variable that is bound to the components in the page that display the data.

In addition to creating the details page with a form containing the fields, the Quick Start creates various variables for the data and action chains to navigate to the page and call the endpoint.

The Quick Start does the following in the page containing the collection.

Adds a button to the page. An ojAction event is added to trigger an action chain.
Adds a select event to the collection component that triggers an action chain.
Creates a variable to store the id of the selected object.
Creates an action chain that saves the id of the selected object in a variable.
Creates an action chain to navigate to the Detail page. The action chain passes the object id as an input parameter.

The Quick Start does the following in the Detail page.

Adds a form with fields bound to a variable.
Adds a Back button. An ojAction event is added to trigger an action chain.
Creates an action chain that navigates back to the previous page triggered by an event on the Back button.
Creates a page variable to store the object id as an input parameter.
Creates a page variable to store the response from the endpoint. The Quick Start also creates a new Type that defines the structure of the variable.
Creates an action chain that calls an endpoint when the page is loading and assigns the response to a page variable. The action chain has an input parameter mapped to a page variable.

Use the Add Detail Page Quick Start

When you have a page with a table or list component, you can use the Add Detail Page Quick Start to create a Detail page for a record and add a Details button to open the new page. The button is enabled when you select an object in the table or list.

You can open the Add Details Page Quick Start from pages that use a table or list component to display a collection. When adding a detail button, you use the endpoint with the GET method (Get One) to display data. When your data source is a business object or a service with expected endpoints (such as GET, POST, PATCH, or DELETE), Visual Builder automatically selects the correct endpoint for you. You only need to select the fields that you want to display in the Details page.

To create a Detail page:

Select the table or list on the canvas.
Open the Quick Start tab in the Properties pane, if not already open.
Click Add Detail Page.
If you land on the Select Endpoint step, select the data source containing the Get One endpoint to get the data you want to display in the Detail page. Click Next.
On the Page Details step, select the fields you want to include in the Detail page from the Endpoint Structure. (You can also drag the fields you want from the Endpoint Structure on the left onto the Fields pane in the middle). The Detail page will include these fields in the form.
Specify the name of the button that will open the Detail page, and the title and name of the new page. Click Finish.

The page now has a new button that will navigate to a page that shows details of the selected object.