Conditionally Grey out ChoiceLabels for Checkbox field

Question

Hi, 
 Could anyone suggest how can we conditionally grey out only some of the choiceLabels for checkbox field while displaying all the choicelabels to the user. 
 
 thanks in advance

bradc · Accepted Answer

Hi nehar572 , 
 
While I think has the best solution to use an editable grid, I took this as a bit of a challenge because I think it may be a use case I would have at some point. 
 
Below is some example code I put together to show this functionality. Putting this into a live application will take some additional work, but shows the idea you are attempting to implement. 
 
load( 
 local!options: { 
 "A", 
 "B", 
 "C", 
 "D" 
 }, 
 local!disabledOptions: { 
 "A", 
 "C" 
 }, 
 local!values, 
 { 
 a!richTextDisplayField( 
 label: "Disabled Check Boxes Example" 
 ), 
 a!forEach( 
 items: local!options, 
 expression: a!checkboxField( 
 labelPosition: "COLLAPSED", 
 choiceLabels: fv!item & if( 
 length( 
 wherecontains( 
 fv!item, 
 local!disabledOptions 
 ) 
 ) = 0, 
 {}, 
 " - Disabled" 
 ), 
 choiceValues: fv!item, 
 disabled: wherecontains( 
 fv!item, 
 local!disabledOptions 
 ), 
 value: index( 
 local!values, 
 wherecontains( 
 fv!item, 
 local!values 
 ), 
 null 
 ), 
 saveInto: a!save( 
 target: local!values, 
 value: if( 
 isnull( 
 save!value 
 ), 
 remove( 
 local!values, 
 wherecontains( 
 fv!item, 
 local!values 
 ) 
 ), 
 append( 
 local!values, 
 save!value 
 ) 
 ) 
 ) 
 ) 
 ), 
 a!paragraphField( 
 label: "Saved Values", 
 value: local!values 
 ) 
 } 
)

Mike Schmitt · Answer

There is not a way to do this within the CheckboxField component. 
 
But for clarification, do you mean *labels* or *checkboxes*? I'm not sure what a "grayed out" label would look like. 
 
I had a use case for selectively disabling certain *checkboxes* in the past, and I was able to accomplish this by using an Editable Grid with Selection enabled - it works much the same except you can disable selection on a row-by-row basis.

Arpit Bhargava · Answer

Hi, 
 
You can create different checkboxes and on the basis of your conditions, apply conditions on disabled one. 
And one more thing you can do is to have one column in the table of IsDisabled and have disable according to this column

Abhay Giri · Answer

OK. there is a way but it would not good approach at all. Instead of one checkbox you can use two checkbox . One for users selection and other is for gray out options , but make sure keep second check box beside to first one and it should not have blank label . By doing this way there will be little space can be seen between first checkbox options and second one. Regards Abhay Giri

Amit Mishra · Answer

Then use an expression rule to display two types of checkbox, dynamically enable and disable check boxes based on your conditions. Thanks

Mike Schmitt · Answer

You can do this if you refer back to my original suggestion for using a selectable editable grid, in my original comment here. Let me know if you want a screenshot / help with a recipe for this.

Mike Schmitt · Answer

That could be a good approach too, though there may be some unintended consequences in the future of using multiple fields (i dunno, tab-ability maybe), but it looks pretty good. 
 As a side note, when pasting a big chunk of code like that, I strongly recommend you go into Rich Text mode and insert a Code block, which allows retention of spacing as well as a scrollable box so you don't blow everyone out of the water with a pages-long code snippet, like this: 
 load(
 local!options: {
 "A",
 "B",
 "C",
 "D"
 },
 local!disabledOptions: {
 "A",
 "C"
 },
 local!values,
 {
 a!richTextDisplayField(
 label: "Disabled Check Boxes Example"
 ),
 a!forEach(
 items: local!options,
 expression: a!checkboxField(
 labelPosition: "COLLAPSED",
 choiceLabels: fv!item & if(
 length(
 wherecontains(
 fv!item,
 local!disabledOptions
 )
 ) = 0,
 {},
 " - Disabled"
 ),
 choiceValues: fv!item,
 disabled: wherecontains(
 fv!item,
 local!disabledOptions
 ),
 value: index(
 local!values,
 wherecontains(
 fv!item,
 local!values
 ),
 null
 ),
 saveInto: a!save(
 target: local!values,
 value: if(
 isnull(
 save!value
 ),
 remove(
 local!values,
 wherecontains(
 fv!item,
 local!values
 )
 ),
 append(
 local!values,
 save!value
 )
 )
 )
 )
 ),
 a!paragraphField(
 label: "Saved Values",
 value: local!values
 )
 }
)

Mike Schmitt · Answer

Additionally, here's a code snippet for my Editable Grid based solution: 
 load(
 local!selectedValues: {},
 
 local!allOptions: {
 "Option 1",
 "Option 2",
 "Option 3 (disabled)",
 "Option 4",
 "Option 5 (disabled)"
 },
 
 a!gridLayout(
 label: "Select Options",
 selectable: true(),
 
 selectionSaveInto: local!selectedValues,
 selectionValue: local!selectedValues,
 
 shadeAlternateRows: false(),
 spacing: "DENSE",
 borderStyle: "LIGHT",
 
 headerCells: {
 a!gridLayoutHeaderCell(
 label: ""
 )
 },
 
 rows: a!forEach(
 local!allOptions,
 a!gridRowLayout(
 id: fv!item,
 selectionDisabled: find("disabled", fv!item) <> 0,
 contents: {
 a!textField(
 value: fv!item,
 readOnly: true()
 )
 }
 )
 )
 )
)

Mike Schmitt · Answer

If you can't use a radio button field with validations on disabled options, then the next best solution is probably still to use the editable grid with selections, and simply make the saveIntos work such that selecting one row deselects any previously-selected row.

Conditionally Grey out ChoiceLabels for Checkbox field

Top Replies