Custom HTML Component - Visible Property

Elements Custom Components
1

I have the following Custom HTML Properties defined:

{
    "groups": [
            {
      "title": "SWITCH TEST",
      "icon": "switch.2",
      "properties": [
  
        {
          "title": "Test Switch",
          "property": "testSwitch",
          "switch": {
            "trueValue": "ONE",
            "falseValue": "ZERO",
            "default": false
          }
        },

        {
    "information": {},
    "title": "[Displays when FALSE]",
    "visible": "!testSwitch"
    },
        {
    "information": {},
    "title": "[Displays when TRUE]",
    "visible": "testSwitch"
    },
  ]
        
    }
    ]
}

I can’t get the appropriate information text to display when I toggle the switch in the properties pane, no information text displays whether the switch is True or False.

Am I doing something wrong (most likely :wink: ) or is it a bug?

2

not sure if this will help I used this to toggle overflow off and on
Html
overflow-{{displayoff}}
Properties

{
“title”: “Visible”,
“id”: “displayoff”,
“switch”: {
“trueValue”: “block”,
“falseValue”: “hidden”,
“default”: true
}
},

3

This is what isn’t working for me:

{
    "information": {},
    "title": "[Displays when FALSE]",
    "visible": "!testSwitch"
    },
        {
    "information": {},
    "title": "[Displays when TRUE]",
    "visible": "testSwitch"
    },

It should display the first information text or the second information text in the right hand properties panel, depending on the state of the “testSwitch" property and “visible” property test.

4

Not sure if this is related but could be - Banner visibility - #2 by dan

5

is this what you are trying to do

https://we.tl/t-LSWK98S9aF

links do not download and open for me

create html component
copy to html

create html component
copy to html

<div class="text-black text-center">{{display1}}
    
</div>```

copy below to properties


{
    "groups": [{
        "title" : "Main Area",
        "properties" : [


   
{
          "title": "Visible",
          "property": "display1",
          "switch": {
            "trueValue": "Hello",
            "falseValue": "Goodbye",
            "default": true
          }
        },



 ]
		
	}
    ]
}
7

ok copied to dropbox see if this works

https://www.dropbox.com/scl/fo/z3xyouj5pa688a7wv5oog/AKMbl0-OopwcglC8pBaJH5w?rlkey=a0eoab7nvxl0pme5mta3yql6f&st=ennk2bia&dl=0

8

Hey @logrunner

The code below will display and hide other controls in the inspector based on the state of the switch. Let me know if you need anything else!

{
    "groups": [
            {
      "title": "SWITCH TEST",
      "icon": "switch.2",
      "properties": [
  
        {
          "title": "Test Switch",
          "property": "testSwitch",
          "switch": {
            "trueValue": true,
            "falseValue": false,
            "default": false
          }
        },

        {
          "information": {},
          "title": "I'm False",
          "visible": "testSwitch == false"
        },

        {
          "information": {},
          "title": "I'm True",
          "visible": "testSwitch == true"
        },

  ]
        
    }
    ]
}
1 Like
9

@upssjw - Thanks for taking the time and effort to try and understand and resolve my issue. :+1:

@dan - I think I was led astray by the “visible” documentation that states:

3. Negation to Hide Elements
"visible": "!mySwitchControl"

It is all working now, thanks. :smile:

1 Like
10

Dan sorted it

2 Likes