Hello,
Work I complete:
Component I used in perspective screens are table, 2 dropdown and button
I use Named query, and display that in table component used in perspective.
I create 5 columns(P20,P21,P25,P27,P28), I attached Image of my screen
Need help here:
- How can I access column name of table and display in drop down (from dropdown and to dropdown)?. Any way is work for me either from named query or from table.
- Once we select column name in the drop down for example: dropdown from select P21 and dropdown to select P27, then how can we display data between selected column range(P21 to P27) after button press?
Any way is work for me either from named query or from table.
- In short want to display data on table depends or the range of column selected dynamically
You could use the props.column if the column names wont change
to show less columns you can set the visibilty to false
If they can change based on the query you best just get the name from your table data property there to fill up the dropdown and filter out the columns
Make a new custom property on your table, let’s call it data. bind it to your query, and make it return a dataset.
Now bind your dropdowns options property to this custom.data, and add a little transform script (might be doable with expressions, I leave that to you):
return [
{
'value': idx,
'label': col
} for idx, col in enumerate(system.dataset.getColumnHeaders(value))
]
Now bind your table props.data to custom.data, dropdown1.value and dropdown2.value in an expression binding, add a script transform that returns a filtered version of the original dataset:
start = int(value.start)
end = int(value.end) + 1
return system.dataset.filterColumns(value.data, range(start, end))
You’ll have to add some logic to prevent start > end, and some defaults in case no values are selected from the dropdowns, but that shouldn’t be too hard.
edit - actually, selecting the first column in the first dropdown and the last column in the second dropdown in the designer might be enough to handle the default case and show the full table.
And selecting a from column higher than the to column only results in an empty table, which might be good enough in most cases.
2 Likes
Thank you very much,
this is perfectly work for me.
but in the same case two more complexities are:
- In the code if one of the column want to make fix and display with column range when selected, is it possible?. I mean to say, I have one column, name is Date_time which show date and time, so when I select column range and get the values of selected column on table with this is it possible to Date_time column of that values display in the table?
- Can we bind different table dynamically for the same code? I mean to say,
one drop down which show 5 table names(with different number of columns), so we select table name and we use button whenever button is press selected table shown as per code send from you.
Thank You
- I’m not sure what you mean what you mean… Do you want the date column to always be displayed at all time, independently of the selected range ?
- If I understand correctly, yes we can. Instead of binding the
custom.data prop, you need to populate it when the button is clicked. The rest of the code should not have to change. An alternative solution would be to bind it to the dropdown that selects the table.
The first step is to bind the table dropdown to the tables you want to allow access to.
Let’s start by manually adding options to the dropdown:
If you need to dynamically populate those options, you’ll have to bind it to something and probably use a script transform to format it properly, but that’s another story.
Here, the label is what will appear in the dropdown, and value is the table to query.
Then, you need to run the query on the table selected in the dropdown when the button is pressed:
alternatively, you could bind
custom.data to the table dropdown and run the query from there:
The code that handles the columns selection should still work, BUT be aware that switching from one table to another will keep the previously selected column range. Which is imo the better behavior.
Just make sure to select the first and last columns for each table in the designer, to that the use those as the default.
edit:
Note that you could also add finer filtering with a multiSelect dropdown:
1 Like
Thank you very much for replay
- I’m not sure what you mean what you mean… Do you want the date column to always be displayed at all time, independently of the selected range ?
For this I am sharing two images
image 1 shows the complete data of all column in table
image2 2 shows the after selection of column range(here column range select from column B to column E). once button is pressed data display in the table including date column( I am looking for this)
(all the data display on table is coming from named query)
Thank you
Well then all you have to do is make sure that the index of the column with the date is always included in the indices passed to the filter function.
Since it appears to be the first:
filtered = range(int(value.start), int(value.end) + 1)
if 0 not in filtered:
filtered = [0] + filtered
return system.dataset.filterColumns(value.data, filtered)
Note that I used the not in syntax here because it can be used for any column. If you only want to apply this to the first one, you can use
if filtered[0] != 0:
filtered = [0] + filtered
I have a similar question. Can I populate live and historical OPC tags in my table based on dropdown selection. For selecting the datetime option I’ll need another component. But can i populate my table based on the selection in dropdown. Note that my table will have fixed number of tags…and i just want to show values of these tags based on the selection of a value from drop-down.
