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.
You could add a condition to the model where that option is required for that field or do an action sequence that launches in page render that populates that field with the option you want
I wasn’t clear. It’s not a data issue.
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.
Created an idea from this. Go vote for it.
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.
I agree with you that List needs to have a option for “Mark first item as selected” in the config. As much as I love the simplicity of the List component, because of this and a few styling limitations, I’ve found myself using Deck instead of List a lot of times.
Here’s a proposed solution: use Deck component and a Wrapper inside it with style variant condition to switch to selected style if the row in the List model matches the row in the page include (which you can achieve by a formula field on the list model).
HighlightFirstItemOnDeck.xml (4.4 KB)
Accompanying Design System:
SubstituteDeckForList.designsystem (123.2 KB)