Skip to main content
Matrix42 Self-Service Help Center

How To: Dynamically fill the Multi-Fragment grid

Goal

The article demonstrates how to work with the Multi-Fragment Grid in Layout Designer. The control provides various options to add new records to the grid from the UI, such as using Inline or Form editing, or using an external Wizard. The article explains how to add records to a multi-fragment grid dynamically (programmatically).

Use Case

In the Incident Dialog, dynamically add the time-tracking record on entering the number of minutes to textbox

Step 1: Figure out the Multi-Fragment record Data Model

The Data Model of the Multifragment Grid record is defined by the related Data Query columns. Also, it is easy to get it over the Network tabulator in the Browser Development Tools
MF_Model.png

Step 2: Add controls to Layout

Add controls to Time Tracking View which accepts the value of spent minutes and the added activity description.

  1. Create new Properties for keeping values of Minutes and Description in Context.
    Context.MinutesToAdd, integer
    Context.TrackingDescripption, string
  2. Drop controls to the canvas which are bound to the just created Properties

PRB_TimeTracking.png

Step 3: Update the Multi-Fragment property handler (Advanced Mode)

Multi-Fragment grid is bound to a property of Data Model which represents the array of Objects. Means, adding a new record to the Grid equals to adding a new element to this array.

  1. Open Multi-Fragment bound Property for editing and proceed to the Advanced mode
  2. Add dependencies (watched) to properties Context.MinutesToAdd and Context.TrackingDescription, and Context.CurrentUser, to recalculate the value of the Property anytime the dependent Properties have been 
  3. Define a logic to add a new element to the Array any time the entered information to related textboxes is compliant. We need to add the element the same structure we figure out on Step 1. Current Time or Now  (new Date() ) we assign to End property and subtract the entered amount of minutes to automatically obtain the Begin value.

PRB_AddRecord.png

Use JS library function mx.components.Utils.guid() to generate an unique GUID value

 if(minutesToAdd.$value > 0 && trackingDescription.$value) {
    $value.push(
        {"ID":mx.components.Utils.guid(),
        "User":currentUser.$value,
        "Description":trackingDescription.$value,
        "End":(new Date()).toISOString(),
        "ActivityType":6,
        "CreatedDate":(new Date()),
        "Begin":(new Date(new Date() - minutesToAdd.$value * 60000)).toISOString(),
        "Minutes":minutesToAdd.$value});
    
    minutesToAdd.$setValue(0);
    trackingDescription.$setValue(null);
}
return $value;

We use function $setValue to reset the  entered values to Texboxes right after the record is added to the Grid, to be able to add a new Time Tracking record

Function {property}.$setValue([value]) can be used to set the any value of the Data Model property from another property.

Step 4: Check Result 

  1. Save the modified Dialog in Layout Designer and open it in Product
  2. Enter the values to "Amount of minutes to Track" and "Description"
  3. Check the new record is automatically added

PRB_Result.png

  • Was this article helpful?