I spent some time playing around with the dropdown component in perspective today and I was trying to dynamically bind the options through a SQL Query. In 7.9 I would be able to bind the query directly to the data property as a dataset and the dropdown list would populate, no matter what the column names were. In 8.0 it appears I need to change my SQL query to provide ‘value’ and ‘label’ as the column names for the binding to work. Is this intended? For dynamic binding will we need to convert any dataset into a specific ‘value’ and ‘label’ structure before binding?
Another question is around system.file.openFile(). There seems to be the rest of the system.file functions for perspective, but not the openFile(). Is this because this is being done in a browser? I’m looking to read a file into the client, is this going to be done differently for perspective?
I’m only able to answer the first part of this question at this time, but I’ll try to get back to you about the latter question.
The Dropdown does indeed require that the options array contain objects which contain exactly two keys: ‘label’ and ‘value’ (additional keys are ignored, and you’ll see a warning in the Property Editor).
This does mean you’ll need to modify the incoming dataset, although what you might want to consider is moving the query into a tag, and binding the Dropdown.props.options to the tag instead; since you will not be able to do anything with additional ‘options’ keys, you should use any logic you might have used here to reference the tag instead.
When it comes to components, you can always add additional properties to the custom properties area, but you should avoid adding/removing properties from the props and meta area unless you’re very confident the property will never be accessed. This is because these components are all expecting to have very specific structures when constructed in the browser (hence, why we require the ‘label’/‘value’ keys). If your Dropdown doesn’t have those keys, the browser doesn’t know what to do with the Dropdown.
Okay, time for the second part:
In Vision, the openFile() functionality executed against your local file system. Perspective does not yet have a File System component (it is on our roadmap).
So consider system.file.openFile() to be a Vision-specific method, even though it’s in the system.file package - which is why you are unable to find it in Perspective, but you can see it in Vision. The functionality openFile() contains may not be used within Perspective.
I feel like this is almost a bug. None of the other transforms seem to be able to, so the only quick way to correct it is with a script transform, such as:
ds2arr = []
valueCol = 'ID'
labelCol = 'Name'
for row in range(value.getRowCount()):
ds2arr.append({'value':value.getValueAt(row,valueCol),'label':value.getValueAt(row,labelCol)})
return ds2arr
We have to repeat this boilerplate in pretty much every dropdown we use, or other components that are bound to SQL. It would be so much nicer if there the query screen included a quick and simple picker to map columns to whatever the expected values for the array are (‘value’ and ‘label’ here, a table is going to be more complicated). I can’t use a tag because the queries are based on who’s logged in.
I kind of miss the ability to have multiple columns, but I’ll get over it. I’ll figure out a way to concatenate the data without being too ugly for now.
Preaching to the choir, @silverbacknet, but improving the dataset -> dropdown value/label is currently pretty far down the list of things to fix because this “expected behavior”/“quasi-workaround” works. I know a few of us would love for it to be fixed, but we need to prioritize items that are actually broken before we fix things that could be better.
As an additional workaround, if you return your query results in a manner such as
select id as "Value", name as "Label" from beverages;
then the Dropdown will auto-populate. I don’t know why it requires capital letters - I’m opening a ticket for that right now.
3 Likes
Oh, nice trick, thanks! I’ll sock it into my toolbox and probably use it regularly.
1 Like