select widget with key / value does not show initial value is resurfacing after jsonata change

[Finansion]

This [select widget with key / value does not show initial value] issue is resurfacing in latest build. Looks like jasonata change override the existing fix and now SELECT widget is not showing the initial value . Choice handler need to be fixed by implementing the code form #90

[Andreas Eberhart]

I cannot reproduce the issue. I changed the jsonPointer example to include a value:

      jsonPointer: {
        description: 'Getting autocomplete options from a REST service and processing the result via JSONata',
        value: 'United States',
        schema: {
          type: 'string',
          choicesUrl: '/assets/autocomplete-complex.json',
          jsonata: 'result.name',
          choicesVerb: 'GET'
        }
      },

Navigating to http://localhost:4200/#/example/jsonPointer the value shows up just fine.

Are you referring to a different example?

[Finansion]

select widget with key / value does not show initial value #90

[Finansion]

projects/dashjoin/json-schema-form/src/lib/choice.ts in this file

if (schema.jsonName && schema.jsonValue) {
return of({ value: value[schema.jsonValue], name: value[schema.jsonName] }); -- this line commented
if (value[schema.jsonValue] && value[schema.jsonName]) {
return of({ value: value[schema.jsonValue], name: value[schema.jsonName] });
} else {
// initially, value is a simple string
return of({ value, name: value });
}
}

#90 select widget with key / value does not show initial value
https://github.com/dashjoin/json-schema-form|dashjoin/json-schema-formdashjoin/json-schema-form | Nov 8th, 2020 |

aeberhart committed on Nov 9, 2020
1 parent 2b6e888 commit ac5e437

and when jsonata was introduced both jsonname and jsonvalue are removed . but the initial setting of value issue is resurfacing

Thanks so much for reviewing this issue.

[Finansion]

"VendorType": {
"title": "Vendor Type",
"name":"vendorType",
"type": "string",
"widget": "select",
"choicesUrl": "http://localhost:4500/venTypeLookup",
"jsonata": "$map(result, function($i){ {"name":$i.name, "value":$i.key} })",
"choicesVerb": "GET",
"style": { "paddingRight": "50px" }
},

in ven-component.ts
"formValues" : {
"VendorID" : 1,
"RegionName": "Newyork",
"VendorName": "Finansion L.L.C",
"VendorType": "BRK",
"Address": "4, Banko Farm Rd, Dayton, NJ-08810",
"Active": "OR"
}

JSON results from DB is
{"result":[{"key":"BRK","name":"Brokers"},{"key":"EXG","name":"Exchanges"},{"key":"PRV","name":"Providers"}]}

and when the page loads i see only "BRK" in mat-select VendorType in gui
once I click the control manually then it is working fine.
looks like bug in choice.ts when setting initial value from code

PLease review and let us know . Thanks so much

[Andreas Eberhart]

Consider the following schema with the data being a fixed string like "https://en.wikipedia.org/wiki/Demographics_of_India". This is the "jsonPointer" example modified such that a) there is an initial value and b) the jsonata expression creates an array of name / value objects.

{
  "type": "string",
  "widget": "select",
  "choicesUrl": "/assets/autocomplete-complex.json",
  "jsonata": "result.{\"name\": name, \"value\": url}",
  "choicesVerb": "GET"
}

The widget displays the "naked" string:

Once you click on the control, display changes to

This behavior is actually by design. The goal is to avoid a REST call for as long as possible. From the data, the UI does not know what the display value of "https://en.wikipedia.org/wiki/Demographics_of_India" should be, thus we default to that string. Once the user interacts with the component, the data is loaded and the display names are available.

[Andreas Eberhart]

We could add a "fetchMode" flag that allows the user to specify whether the data should be loaded on display or on focus.

[Finansion]

The main issue follows

This is my schema
"VendorType": {
"title": "Vendor Type",
"name":"vendorType",
"type": "string",
"widget": "select",
"choicesUrl": "http://localhost:4500/venTypeLookup",
"jsonata": "$map(result, function($i){ {"name":$i.name, "value":$i.key} })",
"choicesVerb": "GET",
"style": { "paddingRight": "100px" }
},

and this is my json data from db
{"result":[{"key":"BRK","name":"Brokers"},{"key":"EXG","name":"Exchanges"},{"key":"PRV","name":"Providers"}]}

when i set "VendorType": "BRK" in my ngOnInit function in my component.ts
the display in the form is
BRK
but I expect "Brokers" to be selected in the combo box

but If I click that combobox manually, then the name [ Broker ] are populating correctly and subsequent setting of any values [ EXG , PRV ] is populating its corresponding name correctly.

So some issue is in initial stetting when Name and Value provided thru Jsonata in the schema which need to be resolved.

I am not sure how this fetchMode flag is going to work and does it really address this name/value pair issue . Please check and let me know and I can send all my code thru email.

[Finansion]

I believe this may be the issue in choice.ts which is returning value as name initially

// initially, value is a simple string
return of({ value, name: value });
}

[Andreas Eberhart]

Right now, the select element's onFocus handler ( (focus)="focus()" ) calls the focus() method which call's the choice handler's load() method, where the data is fetched and inserted into the select element options.

So the idea is to allow the schema designer to control whether this call should happen onLoad instead of onFocus using a new schema field:

{
  "choicesUrl": ...
  "choicesLoad": "onLoad" (onFocus would be the default)
}

What do you think about this? Is the nomenclature clear? Was pondering whether to use a boolean instead, but there might be other load strategies in the future (maybe a timer, etc...)

[Finansion]

Thanks so much for reviewing the issue. [choiceLoad] is fine. In addition to loading choices [ choicesLoad], you need to check how the initial value is assigned as well. If user assigned initial value using [DefaultValue] or Schema's property name, then select control must match and get the [ Name ] for a given [Value] and display the Name in the select control. this was the bug in choice.ts. Name and Value pair is loaded to select control using Jsonata. Please consider to fix this bug as well .

[Andreas Eberhart]

Just published the new version (0.8.3).
You can see the syntax here:
https://dashjoin.github.io/#/example/jsonPointer
If you add the value "https://en.wikipedia.org/wiki/Demographics_of_the_United_States", the select box shows "United States" immediately.

[Andreas Eberhart]

According to our discussion on slack, seems like this issue is fixed.