checkboxTree strikethrough text on check

Feature Requests
1

Is it possible for a checkboxTree resource to strikethrough an item when checked? For example, using an event handler?

When I try to create an event handler for a control component, I do not see the checkboxTree

Screenshot 2023-11-26 at 7.43.21 PM
Screenshot 2023-11-26 at 7.43.21 PM3456×1142 354 KB

2

Hello, currently you cannot control the component itself thru event handler directly but you can with the Action "Run script"

3

Hello @Skizhu,

I appreciate your response.

I have created a "Run Script" to get checkboxTree.structure. I do have one question. Is it possible to set checkboxTree.structure after the data has been populated? Setting the value has no effect.

for (let item of checkboxTree1.checked){
  console.log(item.strike());
}
// output: <strike>misc</strike>

// has no effect
checkboxTree1.structure = {};
checkboxTree1.label = "My ToDos```
4

Hi Timothy,

Happy to help out here.

I attempted this on my end and even when using strike(), it wraps the text with <strike></strike>. Since the checkbox tree doesn't support HTML, it just appears as such and doesn't strike out the text. One other way about this would be to write custom CSS - but that could get a bit complicated:

EvanKeith
EvanKeith694×379 21.5 KB

That said, I'll be sure to note this down to our product team as something to consider moving forward.

Hope this helps!

Best,
Evan

5

It's a bit hacky, but I believe you can solve like this:

[
  {
    "label": {{self.checked.includes('shoes')? "S̶h̶o̶e̶s̶" : "Shoes"}},
    "value": "shoes",
    "children": [
      {
        "label": {{self.checked.includes('athletic')? "A̶t̶h̶l̶e̶t̶i̶c̶" : "Athletic"}},
        "value": "athletic",
        "children": [
          {
            "label": {{self.checked.includes('tennis')? "T̶e̶n̶n̶i̶s̶" : "Tennis"}},
            "value": "tennis"
          },
          {
            "label": {{self.checked.includes('running')? "R̶u̶n̶n̶i̶n̶g̶" : "Running"}},
            "value": "running"
          }
        ]
      },
      {
        "label": {{self.checked.includes('dress')? "D̶r̶e̶s̶s̶ ̶s̶h̶o̶e̶s̶" : "Dress shoes"}},
        "value": "dress"
      }
        ]
  },
  {
    "label": {{self.checked.includes('misc')? "M̶i̶s̶c̶" : "Misc"}},
    "value": "misc"
  }
]
6

These properties are read-only and cannot be set with propertyname = value.

Instead, you'll want to use Javascript inside of double curlies {{}} to make the value dynamic

7

Instead of .strike(), I believe you might be able to use this long stroke overlay (copy to clipboard from here & paste into your JS code)

Definitely recommend doing your own testing, but this seems to be working well:

Here's some sample code that works for two levels of nesting. It could probably be written more efficiently with more time, but hopefully it helps to get started for your use case :crossed_fingers:

{{query3.data.map(x=>{x.label=self.checked.includes(x.value)?x.label.split('').join("̶")+"̶":x.label; x.children? x.children.map(y=>{y.label=self.checked.includes(y.value)?y.label.split('').join("̶")+"̶":y.label; y.children? y.children.map(z=>{z.label=self.checked.includes(z.value)?z.label.split('').join("̶")+"̶":z.label }): null}): null; return x})}}

Otherwise, custom css, as Evan noted.