Add a Create Page With a Quick Start

Use the Add Create Page Quick Start to create a new page with a form that interacts with an endpoint to create a new object.

The Add Create Page Quick Start adds a Create button to the page with the collection. Clicking the Create button starts an action chain that navigates to a Create page containing a form for adding data. Clicking the Save button in the Create page starts an action chain that sends a request to the CREATE endpoint of the data source. The data in the page’s fields are stored in a variable that is mapped to the parameters of the request. If the request is successful, the user is navigated back to the page with the collection.

In the page with the collection component, the Quick Start does the following:

Creates an action chain for navigating to a page.
Adds a button component with an ojAction event that starts the action chain.

In the new Create page, the Quick Start does the following:

Creates a page variable for storing the data for the new business object. The variable’s attributes are mapped to the parameters that are included in the request to the endpoint.
Creates a variable type for defining the data structure of the variable.
Adds a form with field components for the fields in the new business object. The fields are bound to fields in the new variable.
Adds a Save button and Cancel button with ojAction events that start action chains.
Creates an action chain to create the new business object. The action chain is started when the Save button is clicked.

The action chain sends a request to the CREATE endpoint of the business object. The data stored in the page variable is mapped to parameters that are sent as a request to the endpoint. The action chain includes actions that navigate to the previous page if the request is success or displays a warning if the request fails:

Description of the illustration action-chain-call-rest.png
Creates an action chain to navigate back to the previous page when the Cancel button is clicked.

Use the Create Page Quick Start

To use the Add Create Page Quick Start, you start from a page where a table or list is already bound to an endpoint. As you step through the Quick Start, you select the fields that you want to include in the Create page when you create the new object. The Quick Start will add a button to navigate to a Create page with a form for adding data to create a new object.

When you create a new object, you use a data source endpoint with a POST method. When your data source is a business object or a service with expected endpoints (such as GET, POST, PATCH, or DELETE), VB Studio automatically selects the data source endpoint for you.

To add a page to create a new business object:

In the page containing the collection component, select the component on the canvas and open the Quick Start tab in the Properties pane.
Click Add Create Page.
If you land on the Select Endpoint step, select the data source where you want to create a row and click Next.
On the Page Detail step, select the fields you want to add 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 Create page will include these fields in the form.

Tip:
If you've enabled JET Core Pack components, you can use the oj-c variant as the page component for a field. Simply click the suggested component for a field and choose the oj-c variant, indicated by the badge:

Description of the illustration ojc-quickstart.png
Modify the label for the button, the page title and the page name, if desired. Click Finish.

A new page is created with a form for creating a new business object.