HTMLDialog select and choice

[novaeus]

Hello CSProusers,
I'm trying to pass a simple json data for displaying using HTML Dialog choice and select.
The function for select is:

function showJsonInSelect(string value)
errmsg("%s",
htmlDialog("select.html",
value,
displayOptions := maketext('{ "width": %d, "height": %d, "resizable": %d }',
500,
500,
true)
)
);
end;

string jsonSample="[ 0, 1, 2, 3, 4, 5]";

showJsonInSelect(jsonSample);
And, in the webview Dev Tools it display this error: Uncaught TypeError: Cannot read properties of undefined (reading 'length')
at select.html:634:41

The concerned line have this:

SelectError.jpg (35.55 KiB) Viewed 7084 times

I also have the same issue with choice. Please how to solve it?

[justinlakier]

Hello novaeus,

You can try printing input.header out before you use its length, to make sure it contains a string or array. I don't see the header being initialized, which would make accessing its length an issue. You can also print out the input variable to make sure you're accessing the correctly initialized header data from it. Hope that helps, and keep us posted.

Justin La Kier

[novaeus]

Thank you Mr Justin for helping me.
I was unable to display a basic Json data as choice and select using CSPro HTML dialog.
Please take a look and let me know where I'm wrong.

Select-Choice Dialog.zip

(11.03 KiB) Downloaded 90 times

Regards,

[Gregory Martin]

What is your long-term plan with these dialogs? Are you planning to modify them in any way? If not, you would be best using the CSPro logic versions of these dialogs. Instead of choice.html, you'd use the accept function. Instead of select.html, you'd use the showArray function.

But if you want to continue using these, note that they're designed so that you do not need to provide displayOptions. You simply need to format the inputData correctly. For example, to use choice:

Instead of:

csproValue='["Ford", "BMW", "Audi", "Fiat"]';

You could do:

csproValue = '{ "title": "What is your favorite car?",            '
             '  "choices": [ { "caption": "Ford", "index": 0 },   '
             '               { "caption": "BMW",  "index": 1 },   '
             '               { "caption": "Audi", "index": 2 },   '
             '               { "caption": "Fiat", "index": 3 } ] }';

[novaeus]

Thank you Mr Martin for your accurate response. I was trying to display dynamic checkbox based of CSPro input (Array). Unfortunately, the CSPro checkbox property can't be assigned dynamically other than for dictionary element properties. So, I was thinking using HTMLDialog. Regarding your explanations, I can understand that you don't have yet any HTMLDialog for displaying checkbox.

Another element is, It seem that you don't offer the way for using the same Map Engine on Android and Windows (Leaflet) as you did it with pff for allowing us using the same HTML dialog on Windows and Android. Does that can be change in the future?

Regards,

[Gregory Martin]

If you want to allow multiple selections, you'll have to use the select.html dialog. Here is an example input:

{
  "title": "Select each country that you have visited:",
  "multiple": true,
  "header": [
    {
      "caption": "Country"
    },
    {
      "caption": "Code"
    }
  ],
  "rows": [
    {
      "index": 1,
      "columns": [
        {
          "text": "Canada"
        },
        {
          "text": "CA"
        }
      ]
    },
    {
      "index": 2,
      "columns": [
        {
          "text": "Mexico"
        },
        {
          "text": "MX"
        }
      ]
    },
    {
      "index": 3,
      "columns": [
        {
          "text": "United States"
        },
        {
          "text": "US"
        }
      ]
    }
  ]
}

Regarding your other question, are you asking if we intend to put Leaflet on Android in the future? If so, that's something that we have considered as an option for people who prefer that to Google Maps.

[novaeus]

Thank you Mr Martin. It work like a charm, but only for numeric index. However, we can need them also in alpha.
Do you have an idea on how to optionaly return string? As example, if I choose Canada, sometimes I could have the string (text) Canada as return from the this function:

function dialogReturn() {
var selRowsIdx = [];
selRows.forEach(function (item) {
var idx = parseInt(item.substring(1));
selRowsIdx.push(idx);
});

if (selRowsIdx.length == 0) {
CSPro.returnData('{}');
return;
}

//sorting index array
selRowsIdx.sort(function (a, b) { return a - b });

//building and returning JSON object
CSPro.returnData(JSON.stringify({ "rowIndices": selRowsIdx }));
}

Regards,

[htuser]

This topics give us a great way to have a more dynamic on the fly checkbox. Thanks to Novaeus and Greg.
I posted a basic demo implementing a small lib to simplify this.
It based on the following two functions:
1) SelectJson with three arguments:
a) A string: titleName who will display the heading text for the checkbox dialog;
b) A list string: headerCaption who have two items for displaying text for column heading;
c) A two dimensions string array: data who have data/items who'll be selected;
This function will output a Json string following the same logic of the one that Greg posted for displaying checkbox with htmlDialog.

2) extractNumeric with a string argument: alphanumeric This function will parse the result of the htmlDialog (in the demo: showCsproValueInSelect function) and extract a list of numeric indexes;

However, you'll have to use the result of extractNumeric to loop in the array used as the argument of SelectJson and having the final string. It's the undone last part of this demo. I assume that it's the easiest part that anyone will be able to do... However, I can complete and improve it in the future.
Hope this will help!
Best,