I have a table that want only one item to be selected.

  • 2
  • Question
  • Updated 9 months ago
  • Answered
Is there an example of a table where the selection is a check box and only one line can be selected at a time.  If a second box is selected, then the first box is unselected.  An enter button would be pressed and the item Id of the checked line would be passed?
Photo of Bill Fox

Bill Fox

  • 7,984 Points 5k badge 2x thumb

Posted 3 years ago

  • 2
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,026 Points 20k badge 2x thumb
Interesting. 

But I think you'll need a custom renderer or some custom code to get this done. 
Photo of Bill Fox

Bill Fox

  • 7,984 Points 5k badge 2x thumb
Does anyone know someone who could build this function as a reusable feature?
Photo of Tim Shores

Tim Shores

  • 568 Points 500 badge 2x thumb
My solution is not exactly to your specifications, and it may not be the optimal way to pull this off in Skuid, but I believe it meets the use case. I pull this trick several times in a Skuid wizard that guides my users through a complex contract request process.

In the first step, a search box feeds into the first table:



The empty checkbox is one of a pair of row actions. When you check the box, the table reloads and displays only the record you've selected.



If you click the checked checkbox row action, it deselects and loads the original list, and presents the empty checkbox row action. Then you can pick a different row. The wizard also offers a Clear Selection button that deselects and loads the original list, same as the row action.

The wizard's Next Step button is disabled until you pick a record from the table. Next Step hands off fields from the selected record to other models to be used by components in the next wizard step.

~

Here's my recipe for one table.

The table uses two models:


myFirstModel
  • Conditions:
  • Program__c = '' (single specified value) (inactive): activated by global search, in this case.
  • Id = '' (single specified value) (inactive)
This model is for data presented in the table and handed off to other models.

myFirstModelSelected
  • Conditions:
  • Id = '' (single specified value) (inactive)
This model is not used for data, per se, but is instead used to control rendering of components.


Table configuration
Model = myFirstModel

Row Action 1

Label: Pick
Action Type: Run Multiple Actions
  • Activate & Set Model Condition: myFirstModel > Id
  • Activate & Set Model Condition: myFirstModelSelected > Id
  • Query Models: myFirstModel, myFirstModelSelected. Behavior: Standard - Completely Replace Data.
Rendering: myFirstModelSelected has no data rows.

Row Action 2

Label: Cancel
Action Type: Run Multiple Actions
  • Deactivate Model Condition: myFirstModel > Id
  • Deactivate Filterable Conditions: myFirstModelSelected 
  • Query Model: myFirstModel
  • Remove all rows in Model: myFirstModelSelected 
Rendering: myFirstModelSelected has data rows





Wizard button: Next Step
Enable Conditions: myFirstModelSelected has data rows

This ensures that the user will pick a row before moving on to the next step.

~

This configuration produces a very clean, streamlined and controlled UX. Managing the configuration becomes challenging with each step, especially since my business process has branching conditions that introduce the need for even more component rendering hocus pocus. I have 16 models on this wizard. But I find that if I design and document the business process very clearly in advance, the difficulty is reduced to performing the above technical trick again and again for each branch.

I suspect that a javascript driven solution would be easier to manage, and might perform better, but I'm not there yet with my javascript skills in Skuid, and this solution was a high priority for my org. I'm very curious to hear how we might implement such a thing with javascript.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,026 Points 20k badge 2x thumb
Thanks for documenting this.  Looks like a cool solution