Is it possible to ‘pre-select’ an item in a list, so it displays as selected on page-load?
I’m making a console screen for campaigns with list on the left, and a page include on the right (like on the Skuid Skool “Battle of the compponents: Deck vs List vs Table - Level 2”
The initial page-include loads the model first row, and I’m looking to have the corresponding list-item be selected, as it will be when the user selects another one.
My expectation is it’s a line of JS, but as far as I can tell for v2, the JS docs aren’t available.
The list component rows can have a ‘selected state’ (and hover) state. I made a list style which shows the selected item with a different background color, so make it clear which item is selected in the list. (As in the skuid skool video)
The initial page-load loads the first row of the model in the page-include section.
I’l looking to make the corresponding row in the list be in a ‘selected state’ so it matches what happens when the user clicks on an item in the list. An interaction reloads the page-include for the selected row, and the chosen row switches to a ‘selected state’.
I’m just looking to the the pages initial display state, consistent with the actual in-use display state.
Also of note is that I’m working in V1 and when I go about doing this I’m also using a custom CSS hack to hide the standard table checkboxes. It may be unusual to try and replace the standard table checkboxes with a custom UI field checkbox if you can’t get the standard checkboxes to hide.
I ended up punting on this for now. UI consistency is a priority, so I don’t pre-load the first item in the list and I made a generic skuid page which as a message box which says: Select a on the left.