Display multi-column dataset in Perspective dropdown box options

I am migrating a database interface system from Microsoft Access across to Ignition Perspective with Microsoft SQL.

There are many instances of a dropdown box selector for a value where it is desirable to have the label/description column displayed alongside the value column in the options list. The options list is populated from a two column SQL table.

It seems that the dropdown will only display the label column. If I modify the query to only return the value column then the dropdown will display the values, which is preferable (if I can only display one column). But ideally I’d like the options list to show both. I have tried changing the return format on the binding from ‘dataset’ to ‘json’ however the result is the same.

Is this possible at all with the standard dropdown component or will I have to create my own custom popup view to achieve this function?


Screenshot 2022-06-08 121736

1 Like

There’s no good way to display both with a separator, but you could easily transform the binding to display the value IN the label. This is a lot easier if you change the Return Format from dataset to JSON.

return [{"label": "  -  ".join([op_val, op_label]), "value": op_val} for op_val, op_label in value]

or

options = []
for entry in value:
    options.append({"label": "  -  ".join(entry[0], entry[1]), "value": entry[0]})
return options

These should both give you options which look like this:

A  -  Active
B  -  Broken
CBU  -  Calibrate Before Use

While their underlying value is A, B, and CBU.

1 Like

Unfortunately neither of these work. The first option grabs the names of the keys, not the values. The second option presents a recursion error. I suspect the issue is that selecting json effectively returns a list of dictionaries, and I can't figure how to get the script to iterate through both the indices of the list and then the keys within each dictionary

Change your SQL to perform the concatenation for the description column.

3 Likes
return [{"label": "  -  ".join([str(entry.value), entry.label]), "value": entry.value} for entry in value]

Those original suggestions were pseudo-code because I didn’t have the same setup in place as you had. This example works for me after having changed the return format to json.

2 Likes

Perfect!

The examples presented always have the two fields left aligned with only a single whitespace between the field values.
"col1 - col2"

The drop down options list apparently automatically collapses multiple white-space characters into a single character.
For example: "col1 - col2" still displays as "col1 - col2".

Is there a way to NOT collapse the white-space? I've tried all of the style options to no avail:
-normal
-pre
-pre line
-pre wrap
-nowrap

In my case, the options will be much easier to read if the first column is always 20 characters wide (I'm using mono-spaced font) so that the second column is vertically aligned.

Okay - funny! The box for entering the text for this post also collapsed the white space in my second example:
"col1<16 spaces> - col 2"

My format string for the options label is:
"{0:<20s} - {1:s}".format("col1", "col2")

Output:
"col1 - col2"
Whitespace gets collapsed.

Regarding whitespace and posting code on the forum, see Wiki - how to post code on this forum.

Thanks.

My real question still stands, though. Can the perspective dropbox options list NOT collapse whitespace? Is there any style or setting on the dropbox component that will prevent collapsing whitespace?

The idea is to keep the two columns of information vertically alligned:
column 1 starting at position 1 and column 2 starting at position 21
so that the information is easier to read.

Browsers collapse whitespace in html. HTML has a special "non-breaking" space character that doesn't collapse. You'd want to replace all of your spaces with those.

Weird:

image

image

image

Yep, weird... Because now it's working properly.
I'm discovering that changes in the designer don't always take immediate effect in a running session even if configured to push changes automatically.

Now, I 'Save' the project, 'Update' the gateway, 'Reload' in the browser whenever I want to save changes. Even then, I occasionally have to close the browser window and relaunch the application in order to see changes. Particularly if the changes were in a project script library.

Are you sure that you were setting the dropdownOptionStyle and not the basic style?

1 Like