Skip to main content
jmikesell1-Visitor
1-Visitor
May 30, 2018
Solved

What is the format for "List" in the Select widget

I'm trying to make use of the "Select" widget, AKA dropdown picker. Does anyone know what format the list values need to be in? I can state that this is not it ["Value 1", "Value 2", "Value 3"]

 

    ClayHelbergAnswer
    18-Opal
    May 31, 2018

    Hi--

     

    This stumped me for a while, too. Here's the general process:

     

    1) Define an application parameter to store the menu contents as a JSON string

    2) Bind the app parameter to the List field in your Select widget

    3) Add a filter to convert the string to a proper data object using JSON.parse()

    4) Enter the JSON for your menu choices in the app parameter

    twx_select.png

     

    For the JSON data structure, you'll want an array of objects, where each object has the same field(s) specifying the values (and display values, if different). For example, here's a very simple menu:

     

    [{"color":"Red"},{"color":"Green"},{"color":"Blue"}]

     

    For this menu, set both the "Value" and "Display" fields to "color".

     

    If you want the display text to be more descriptive, you can do something like this:

     

    [{"color":"#FF0000","name":"Red"},{"color":"#00FF00","name":"Green"},{"color":"#0000FF","name":"Blue"}]

     

    In this case, set the "Value" field to "color" and the "Display" field to "name". The menu will use the names, but will return the CSS color spec as the selected value.

     

    --Clay

     

     

    View in thread

    8 replies

    jmikesell1-VisitorAuthor
    1-Visitor
    May 31, 2018

    I have now also tried the full infoTable format and a keyed array. Still no luck here. How can i get a dropdown box into my experience with data not from a connected ThingWorx server?

    Translate
    ClayHelberg18-OpalAnswer
    18-Opal
    May 31, 2018

    Hi--

     

    This stumped me for a while, too. Here's the general process:

     

    1) Define an application parameter to store the menu contents as a JSON string

    2) Bind the app parameter to the List field in your Select widget

    3) Add a filter to convert the string to a proper data object using JSON.parse()

    4) Enter the JSON for your menu choices in the app parameter

    twx_select.png

     

    For the JSON data structure, you'll want an array of objects, where each object has the same field(s) specifying the values (and display values, if different). For example, here's a very simple menu:

     

    [{"color":"Red"},{"color":"Green"},{"color":"Blue"}]

     

    For this menu, set both the "Value" and "Display" fields to "color".

     

    If you want the display text to be more descriptive, you can do something like this:

     

    [{"color":"#FF0000","name":"Red"},{"color":"#00FF00","name":"Green"},{"color":"#0000FF","name":"Blue"}]

     

    In this case, set the "Value" field to "color" and the "Display" field to "name". The menu will use the names, but will return the CSS color spec as the selected value.

     

    --Clay

     

     

    Translate
      jmikesell1-VisitorAuthor
      1-Visitor
      May 31, 2018

      Thanks for the help on this. I want to note here that you can also set this from your JS file as follows

      $scope.view.wdg['select-1']['list'] =[
 {"color":"Red"},
 {"color":"Green"},
 {"color":"Blue"}
];

      I thought i tried this yesterday but must have not had the JSON format perfect. If you set the list via JS you will still need to enter your Display and Value keys in the Select dialog box.

      Translate
        ClayHelberg18-Opal
        18-Opal
        May 31, 2018

        Cool. I suspect, if you had to, you could also set the Value and Display fields dynamically via JS, something like this:

         

        $scope.view.wdg['select-1']['list'] =[
 {"color":"Red"},
 {"color":"Green"},
 {"color":"Blue"}
];
$scope.view.wdg['select-1'].valuefield = "color";
$scope.view.wdg['select-1'].displayfield = "color";
        Translate
          Terms & ConditionsAccessibility statement