Create data items (Angular)

This guide demonstrates how to allow the user to create new data items in a Radzen application.

Step-by-step

• Step 1: Create and configure the application
• Step 2: Add the MS SQL Server data source
• Step 3: Create a page and data-bind a grid component
• Step 4: Create the Add Product page
• Step 5: Navigate to the Add Product page

Step 1: Create and configure the application

Create a new Radzen application by following the first step from the quickstart guide.

Step 2: Add the MS SQL Server data source

After finishing step 1 you will see again the My Applications screen with your application on it. Click the application to start editing it.

Click the data button in the upper right corner to add the MS SQL Server data source that your application will use.

This will open the My DataSources screen which allows you to add, edit and delete the data sources which your Radzen application uses. Initially this screen is empty because no data sources have been defined. Click the new button to add a new data source.

1. Select MS SQL.
2. Click use sample MS SQL Server data source. This will populate the configuration options of the sample Radzen service.
3. Click the Next button.

Radzen will then infer the schema of the entities exposed by the MS SQL Server data source. Click the Finish button to create the data source.

Step 3: Create a page and data-bind a grid component

After finishing step 2 you will see the My DataSources screen. Click the close button at the top right corner.

Click the Create New Page button to add a page. Set the Page Name to Products. Click the Save button.

The page will open in edit mode.

1. Drag and drop a DataGrid component from the Components toolbox onto the area that says drop a component. This will add a data grid component to the page.
2. Pick the new … option from the Data dropdown.
3. Open Operation and set it to getProducts. This will invoke a method of a data source.
4. Leave the Response set to value and follow the wizard to the end.

Step 4: Create the Add Product page

Now that we have the Products page that displays the list of available products let’s make a new page that will create new products!

1. Click the Create New Page button to add a page.
2. Set the Page Name to Add Product.
3. Uncheck Include in navigation. We don’t want this page to appear in the application navigation.
4. Click the Save button.

Open the Add Product page for editing by clicking on its label. Now let’s add a form that will capture the new product details.

1. Drag and drop a Form component.
2. Open the Fields editor Schema picker and select Product. This will hint the form designer what properties to enable.
3. Click Auto generate. This will add a form field for every property of the selected schema.
4. Remove the ID field. We don’t need to specify the ID property of new products because it is generated server-side.

We have created a form that will capture the user input. Now let’s persist the user changes by invoking a data source method that will create a new product.

1. Click Events in the property grid.
2. Add a new event handler of the Submit event.
3. Set Type to Invoke data source method.
4. Set Name to createProduct.
5. Add a new Parameter.
6. Set Name to Product.The createProduct method takes one parameter which represents the product that has to be created.
7. Set Value to ${event}. The form component provides the user input as an event argument of the Submit event.
8. Add a new Then handler. It will execute if createProduct is successful.
9. Set Type to Navigate to page.
10. Set Path to Products. This will navigate the user to the Products page.

Step 5: Navigate to the Add Product page

Now let’s navigate to the Add Product page.

1. Open the Products page for editing.
2. Select the DataGrid component by clicking it.
3. Check the AllowAdd property.
4. Go to the Events of the DataGrid.
5. Add a new handler of the Add event.
6. Set Type to Open dialog.
7. Set Path to Add Product. This will open the Add Product in a dialog.

You can now run the application to verify that you can add new products.