Skip to content

Setting value on XYZ form from database retrieve in select2 dropdown.event

Victor Tomaili edited this page May 3, 2021 · 1 revision

Suppose you have an XYZ form XYZdialog.ts or XYZeditor.ts with a dropdown selector on it bound to an Item table. The user selects one of the values and now based on that value you need query the database in order to populate a field on the form.

The example I have is where someone needs to create a pricing quote for a customer, they select an item and add it to the list. A record of that price quote must stay the same - so simply tying the Item with its (possibly changing) properties to this table is not an option - it must have its own price field stored for posterity or doomsday which ever comes first.

For brevity consider two tables: Item: Id, name, unitprice priceInvoice: rowId, InvId, ItemId, qty, unitPrice, lineTotal

The Selector on the form is tied to the priceInvoice table ItemId property. When this field value changes because a different selection is made - the unitPrice column is updated from the database. In order to accomplish this we must retrieve UnitPrice from the record in the Item Table where ItemId is matched; when the response is returned set the unitPrice value on our form.

In the example below , MyProperty is unitPrice; yourClass is Item.

XYZeditor{
    // some properties here ....
        constructor() {
            super();

	    // Dropdown is bound to this column/field of my form
             this.form.ItemId.changeSelect2(e => {

           	var ID = Q.toId(this.form.ItemId.value);
   
           	if (ID != null) 
	   	{
            		// Query the Database for the value - your entity is returned
            		<yournamespace>.<yourClass>Service.Retrieve({
                	EntityId: ID
            	}, response => {
                	this.setMyFormsDetails(response.Entity);
            	});
       	    }
	}

   // SET the value on the form to the returned result. 
   private setMyFormsDetails(details: <yournamespace>.<YourRow>) {
        this.form.<MyProperty>.value = details.MyProperty;
    }
}

I hope this helps someone.

Clone this wiki locally