Add an editable list to the detail

Level: intermediate

Example

Add an editable list to the Discount, % column on the add product page (the Products detail) of the Orders section. The column already exists in the product object schema. Also, add an editable list to the Custom price custom column.

1. Create a replacement object schema

1. Go to the Configuration section and select a custom package to add the schema.

2. Click Add → Replacing object on the section list toolbar.

   

3. Fill out the schema properties.

   • Set Code to "OrderProduct."
   • Set Title to "Product in order."
   • Set Parent object to "OrderProduct."

   

4. Add a column to the schema.

   1. Click in the context menu of the object structure's Columns node.

   2. Click Number → Currency in the drop-down list.

      

   3. Fill out the properties of the added column.

      • Set Code to "UsrCustomPrice."
      • Set Title to "Custom price."

      

5. Click Save then Publish on the Object Designer's toolbar.

2. Create a schema of the replacing section view model

1. Go to the Configuration section and select a custom package to add the schema.

2. Click Add → Replacing view model on the section list toolbar.

   

3. Fill out the schema properties.

   • Set Code to "ProductSelectionSchema."
   • Set Title to "Product selection page schema."
   • Set Parent object to "ProductSelectionSchema."

   

4. Implement an editable list. To do this, implement the following methods in the methods property:

   • getEditableColumns(). Retrieves the array of columns to edit and adds a custom column to the array.
   • setColumnHandlers(). Binds the custom column's update event handler.
   • onCustomPriceChanged(). Handler method called upon changes to the field value.

   View the source code of the replacing view model schema of the section below.

   ProductSelectionSchema

   define("ProductSelectionSchema", [], function() {
       return {
           methods: {
               getEditableColumns: function() {
                   /* Retrieve the array of columns to edit. */
                   var columns = this.callParent(arguments);
                   /* Add the [Discount, %] column to the array of columns to edit. */
                   columns.push("DiscountPercent");
                   /* Add the custom column. */
                   columns.push("UsrCustomPrice");
                   return columns;
               },
               setColumnHandlers: function(item) {
                   this.callParent(arguments);
                   /* Bind the custom column's update event handler. */
                   item.on("change:UsrCustomPrice", this.onCustomPriceChanged, this);
               },
               /* Handler method called upon changes to the field value. */
               onCustomPriceChanged: function(item, value) {
                   window.console.log("Changed: ", item, value);
               }
           }
       };
   });

5. Click Save on the Designer's toolbar.

Outcome of the example

To view the outcome of the example:

1. Refresh the Orders section page.

2. Set up the columns of the add product page.

   1. Click View → Select fields to display on the section toolbar and open the setup mode of the section list's tile view ( Tile view) on the column setup page.
   2. Add the column to the section list. To do this, click . Then, click and select the Product in order object in the Select object field.
   3. Select the Discount, % column in the Column field.
   4. Add the Custom price column similarly.

As a result of the example, the list on the add product page (the Products detail) of the Orders section now includes the Discount, % and Custom price editable columns.

---

Resources

Package with example implementation