Add an Edit Page With the Quick Start

Use the Add Edit Page Quick Start to create a page for editing the details of an 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 Edit button triggers an action chain that navigates to an Edit page, and the id value stored in the variable is passed as an input parameter to the page. When the Edit page is loaded, a page event triggers an action chain that sends a request to the endpoint to get the data from the source, and the input parameter passed to the page is mapped to the input parameter required by the request. The response is mapped to a variable that is bound to the components in the page for editing the data.

Clicking the Save button in the Edit page starts an action chain that sends a request to the Update endpoint of the data source. The data in the page’s fields is stored in a variable and mapped to the parameters of the request sent to the Update endpoint.

In addition to creating the Edit 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 endpoints.

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 assigns the id of the selected object to a variable.
Creates an action chain to navigate to the Edit page. The action chain passes the object id as an input parameter. Creates an action chain for navigating to a page.

The Quick Start does the following in the Edit page.

Adds a form with fields bound to a variable.
Adds a Back button. A click 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 assign the response to a page variable. The action chain has an input parameter mapped to a page variable
Creates an action chain to update the business object. The action chain is started when the Save button is clicked.

The action chain sends a request to the Update endpoint of the data source. The action chain includes actions that displays a message if the request succeeds or a warning if the request fails:

Description of the illustration quickstart-edit-action-update.png

The data stored in the page variable is mapped to parameters that are sent as a request to the endpoint.

Description of the illustration quickstart-edit-action-mapvariables.png

Use the Add Edit Page Quick Start

When you have a page with a table or list component, you can use the Add Edit Page Quick Start to add an Edit button to the page that is enabled when you select an object in the table or list. Clicking the Edit button opens a page that displays a form with fields for editing the selected object.

You can open the Add Edit Page Quick Start from pages that use a table or list component to display a collection. When adding an edit button, you use the endpoint with the GET method (Get One) to request the data to display in the Edit page, and then the endpoint with thePATCH method (Update) where the request to update the data is sent. 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 endpoints for you. You only need to select the fields that you want to display in the Edit page.

To create an Edit page:

Select the table or list on the canvas.
Open the Quick Start tab in the Properties pane, if not already open.
Click Add Edit Page.
If you land on the Select Read Endpoint step, select the data source containing the GET endpoint to get the data you want to edit. Click Next.
If you see the Select Update Endpoint step, select the data source containing the UPDATE endpoint to send a request to update the selected record.
On the Page Details step, select the fields you want to include in the Edit page from the Endpoint Structure. (You can also drag the fields from the Endpoint Structure on the left onto the Fields pane in the middle). The Edit page will include these fields in the form.
Specify the name of the button that will open the Edit 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 contains a form for editing the data of the object that is selected in the collection.