At this point you've created the product form to capture product details. The form must be amended to provide input form fields for capturing product colour details including attachment button for uploading product images. A product can be available in multiple colours. So an option (button) to add more than one product colour details must be provided. At the same time, an option (button) to delete product colour details must be provided.

"Product" model has a one-many relationship with "ProductColour" model. "One-Many" widget can be used to insert the "ProductColour" child model grid with the product colour and attachment form field elements.

Insert grid for "ProductColour" model parameters     Select the cell where the "add" button and "Product colour and size" title must be added.     Click on the insert icon and select the "Insert Grid" option.     Properties dialog box will be displayed. Enter the number of rows and columns to be inserted. Create a 1X2 grid. Cell A1 - "Add" button for "ProductColour" model. Cell B1 - Section title "Product colour and size details".

Button to add product colour details     Update the column width for the inserted grid as required. Select the cell (A1) where the add button must be inserted.     Click on the "One-Many" widget. List of available one-many relationships will be displayed. Click on the "+" button next to "ProductColour(ProductCode)" to Insert the "Add" button for updating the colour details.     Properties dialog box will be displayed. Click on the "Done" button. An "Add" button will be inserted in the selected cell (A1). Add the "Product Colour and Size" title in the grid cell (B1).

"ProductColour" form fields     Select the cell where the product colour child fields must be inserted.     Click on the grid icon next to "ProductColour(ProductCode)" in the "One-many" widget.     Properties dialog box will be displayed as shown in the screen capture.

List of cells in the product colour model will be displayed.     The arrow buttons can be used to select or deselect a cell. Add "Attachment" and "ProductColour" field. To add a field, select a cell from the list and click on the ">>" button. To remove a field, select the field from the selected list and click on the "<<" button.     Select the "Header" and "Footer" check box.     Click on the "OK" button to insert the selected fields from the product colour child model.

Update header details     A child form grid will be inserted as shown in the screen capture. By default, the public cell name is assigned as the display field name in the header. Click on the cell to edit the display name.     Apply styles using the "Cell Styles" option.

Button to delete product colour details     A delete button must be added to the product colour details row. Select a cell in the details row (Highlighted in orange colour).     Insert the delete button from the actions widget.

Button to upload attachments     Select cell A2 in the detail row. By default, a textbox will be inserted for "Attachment" cell. Replace the textbox with an upload attachment button.     Insert the attachment button from the actions widget.     Click on the "Done" button.

Preview product form     Click on the preview tab to view the form design preview and make the necessary changes.         What's the next step? Adding product size form fields.