How to insert different fields in the same place, depending on the values of the other field

Case description:

Inserting different fields in the same place, depending on the values of the other field

Algorithm of realization:

1. Create replacing client schema for your page.

2. Insert container into the place, where you want to have that fields. Write following code into "diff"

   {
       "operation": "insert",
       "name": "MyContainer",
       "parentName": "Header",
       "propertyName": "items",
       "values": {
           "layout": {"column": 0, "row": 3, "colSpan": 12},
           "itemType": Terrasoft.ViewItemType.CONTAINER,
           "items": []
       }
   }
   

    

3. Add visibility attributes for each field and define onChange handler for field which will change fields in your container. Write following code into "attributes":

   "Field1Visible": {
       "dataValueType": Terrasoft.DataValueType.BOOLEAN,
       "type": Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN
   },
   "Field2Visible": {
       "dataValueType": Terrasoft.DataValueType.BOOLEAN,
       "type": Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN
   },
   "MainField": {
       "onChange": "onMainFieldChanged"
   }
   

    

4. Insert your fields and bind their visibility to added attributes. Important! "parentName" must be equal to name of container which was added at the step 2:

   {
       "operation": "insert",
       "name": "Field1",
       "values": {
           "visible": {"bindTo": "Field1Visible"},
           "bindTo": "Field1"
       },
       "parentName": "MyContainer",
       "propertyName": "items",
       "index": 2
   },
   {
       "operation": "insert",
       "name": "Field2",
       "values": {
           "visible": {"bindTo": "Field2Visible"},
           "bindTo": "Field2"
       },
       "parentName": "MyContainer",
       "propertyName": "items",
       "index": 1
   }
   

    

5. Add two methods: onMainFieldChange and method which will set visibility of you fields.

   setVisibility: function() {
       this.set("Field1Visible", false);
       this.set("Field2Visible", false);
    
       var param = this.get("MainField");
    
       if (param === "SomeValue") {
           this.set("Field1Visible", true);
       } else {
           this.set("Field2Visible", true);
       }
   },
   onStdNameChanged: function() {
       this.setVisibility();
   }