Very strange behaviour from Nativescript UI rad dataform when trying to dynamically render form


#1

I am trying to build a checklist app where a checklist consists of many sections and each section consists of many tasks. I am using Nativescript UI-dataform to render the forms as the forms are JSON models dynamically generated by a REST API. I created a paginator that sets the previous or next task in the current active JSON model’s template and metadata on the dataform’s [source and [metadata inputs. When I tap the previous or next chevrons the view changes as expected and the dataform gets updated. The problem seems to occur when I move at least two tasks forward and then tap on the left-chevron (previous task page icon). The form then for some reason displays the task in a text editor instead of the switch which is explicitly set on the metadata model and I then get the below error. My code is below the error. Any idea what might be going wrong here/how I can fix this? I’ve tried every other way I can thing of without any success and don’t see anything related when I do a Google search… From the error it seems like the issue is that rad dataform tries to use a text editor where a boolean switch editor should be used?

my error:

JS: ERROR Error: java.lang.Error: DataFormTextEditor does not support properties of type Boolean. Please specify a value converter for your property.
JS: com.telerik.widget.dataform.visualization.core.EntityPropertyViewer.loadPropertyValue(EntityPropertyViewer.java:430)
JS: com.telerik.widget.dataform.visualization.core.EntityPropertyEditor.loadPropertyValue(EntityPropertyEditor.java:201)
JS: com.telerik.widget.dataform.visualization.core.EntityPropertyViewer.load(EntityPropertyViewer.java:409)
JS: com.telerik.widget.dataform.visualization.core.EntityPropertyEditor.load(EntityPropertyEditor.java:189)
JS: com.telerik.widget.dataform.visualization.RadDataForm.load(RadDataForm.java:806)
JS: com.telerik.widget.dataform.visualization.RadDataForm.reload(RadDataForm.java:485)
JS: com.tns.Runtime.callJSMethodNative(Native Method)

my code:

my xml view code:


<ActionBar title="Dynamic Forms POC" class="action-bar">
</ActionBar>
<StackLayout>
<StackLayout class="m-x-auto m-b-30 p-t-20" orientation="horizontal">
    <Label (tap)="prevTask()" class="font-awesome p-t-4 p-r-10" text="&#xf053;"></Label>
    <Label class="p-b-5" [text]="'Task ' + displayTaskNo() + ' / ' + currentForm.sections[sectionID].tasks.length"></Label>
    <Label (tap)="nextTask()" class="font-awesome p-t-4 p-l-10" text="&#xf054;"></Label>
</StackLayout>

<StackLayout> 
        <RadDataForm #rdf  [source]="currentForm?.sections[sectionID].tasks[taskID].template" [metadata]="currentForm?.sections[sectionID].tasks[taskID].metadata" (propertyCommitted)="onPropertyCommitted()"></RadDataForm>    
    </StackLayout>
</StackLayout>

my prevTask() and nextTask() functions:


prevTask() {
        if (this.taskID === 0) {
            return;
        }
        
        this.taskID--;        
    }

    nextTask() {
        console.log(this.currentForm.sections[this.sectionID].tasks[this.taskID-1]);
        if (this.taskID === this.currentForm.sections[this.sectionID].tasks.length - 1) {
            return;
        }
        this.taskID++;
        
    }

a example json model:


{
  "name": "Form1",
  "sections": [
    {
      "secName": "Food Safety Criticals",
      "tasks": [
        {
          "taskName": "Restaurant free of insects / pests",
          "imageNames": [],
          "template": {
            "RestaurantShouldBeFreeOfAllInsectsOrPests": false
          },
          "metadata": {
            "isReadOnly": false,
            "commitMode": "immediate",
            "validationMode": "Immediate",
            "propertyAnnotations": [
              {              
                "name": "RestaurantShouldBeFreeOfAllInsectsOrPests",
                "displayName": "Restaurant should be free of all insects or pests",
                "index": 0,
                "editor":"Switch"
              }
            ]
          }
        },
        {
          "taskName": "only approved ingredients or food evident",
          "imageNames": [],
          "template": {
            "Onlyapprovedingredientsorfoodevident": false
          },          
          "metadata": {
            "isReadOnly": false,
            "commitMode": "immediate",
            "validationMode": "Immediate",
            "propertyAnnotations": [
              {
                "name": "Onlyapprovedingredientsorfoodevident",
                "displayName": "only approved ingredients or food evident",
                "index": 0,
                "editor":"Switch"
              }
            ]
          }        
        },
        {
          "taskName": "Restaurant must have hot water at all times",
          "imageNames": [],
          "template": {
            "Restaurantmusthavehotwateratalltimes": false
          },
          "metadata": {
            "isReadOnly": false,
            "commitMode": "immediate",
            "validationMode": "Immediate",
            "propertyAnnotations": [   
              {
                "name": "Restaurantmusthavehotwateratalltimes",
                "displayName": "Restaurant must have hot water at all times",
                "index": 0,
                "editor": "Switch"
              }
            ]
          }
        },
        {
          "taskName": "Spoiled potentially hazardous foods / ingredients are not in use and not for sale",
          "imageNames": [],
          "template": {
            "Spoiledpotentiallyhazardousfoods/ingredientsarenotinuseandnotforsale": false
          },
          "metadata": {
            "isReadOnly": false,
            "commitMode": "immediate",
            "validationMode": "Immediate",
            "propertyAnnotations": [
              {
                "name": "Spoiledpotentiallyhazardousfoods/ingredientsarenotinuseandnotforsale",
                "displayName": "Spoiled potentially hazardous food / ingredients are not in use and not for sale",
                "index": 0,
                "editor": "Switch"
              }
            ]
          }
        },
        {
          "taskName": "Cross-Contamination is not observed",
          "imageNames": [],
          "template": {
            "Cross-Contaminationisnotobserved": false
          },
          "metadata": {
            "isReadOnly": false,
            "commitMode": "immediate",
            "validationMode": "Immediate",
            "propertyAnnotations": [
              {
                "name": "Cross-Contaminationisnotobserved",
                "displayName": "Cross-Contamination is not observed",
                "index": 0,
                "editor": "Switch"
              }
            ]        
          }
        },
        {
          "taskName": "ColdpotentiallyHazardousFoodsmustbeheld4°Candwithinholdtimesperbrandstandards",
          "imageNames": [],      
          "template": {    
            "ColdpotentiallyHazardousFoodsmustbeheld4°Candwithinholdtimesperbrandstandards": false
          },
          "metadata": {
            "isReadOnly": false,
            "commitMode": "immediate",
            "validationMode": "Immediate",
            "propertyAnnotations": [                     
              {
                "name": "ColdpotentiallyHazardousFoodsmustbeheld4°Candwithinholdtimesperbrandstandards",
                "displayName": "Cold potentially Hazardous Foods must be held 4°C and within hold times per brand standards",
                "index": 0,
                "editor": "Switch"
              }
            ]
          }
        }
      ]  
    }
  ]
}


#2

So it turned out that when I changed the “tasks” index in my controller Rad Dataform picked up the change for the form’s source but not for the metadata… What I did to resolve this issue was: Whenever I navigate to the previous/next task manually set the forms metadata…