Set property visibility dynamically

Set property visibility dynamically



I have the following typescript code:

@property ({ type: cc.Boolean })
get Checkbox () {
    return this._checkbox;

set Checkbox (value: boolean) {
    this._checkbox = value;

_customProperty: number = 0;

@property ({ type: cc.Integer, visible: false })
get CustomProperty () {
    return this._customProperty;

set CustomProperty (value: number) {
    this._customProperty = value;

In this example I have 2 properties:

  1. Checkbox
  2. CustomProperty is hidden in the editor.

I want to make the CustomProperty to be shown in the editor when the Checkbox becomes true.


CC Conponent has visibile attribute and you can play with it.


AllowJump: false,
JumpPower {
value: 100,
visible: this.AllowJump

So, when AllowJump is enable in editor, JumpPower field will become visible.

P.S. there could be error/typo as I just recalled it from past experience. Check documentation for deatils.

Edit: ref link:


It does not work on type script at all.
In type script the approach is different and from the document it should be like this:

    customOption: boolean = false;

    @property({ visible: () => { return this.customOption; } })
    position: boolean = false;

However, the editor outputs an error that defines that the this object is undefined.
Seems like the function of visible cannot see the object context.

I will be more than appreciated if you supply a typescript code that actually works.


visible should be assigned with a boolean value and you are assigning a function which I think is not right.


Actually, you can. And it is working. Its just cannot get the “this” properly.

If you can provide an example of how it can work in type script I will be appriciate that.


I see. I am not familiar with TS. So GL!


Try this

  visible: function( this: MyComponent ) { return this.customOption; }


Works Prefect!

I actually solved it by adding a static property to my class component but your approach seems to be more elegant.

Thank you…