What is the trick creating custom properties?

Elements Component Development
1

@dan @ben Is there a trick to getting custom properties to show up? I realize that often there is a minor syntax error that causes problems. However, I have encountered situations where I have a working set of properties that I attempt to copy over to a new component, but nothing appears in the Property Inspector.

Or as has happened to me frequently in the last couple of days. I decide I need to add a property that is merely a copy of an existing one. I copy and paste it in, and it never shows up. The code is there, but nothing I do makes the property reveal itself.

I’m sure there is a trick to making these things appear when you add or remove them.

What am I missing?

I’m dreaming of a day when properties can be created for a custom component by simply assembling a bunch of appropriate “property blocks,” thereby avoiding likely coding errors.

1 Like
2

i’ve noticed this too. especially when you need help creating properties with the elementsbot, things often don’t work—or almost never work.

3

It could be that the resultant json (after the paste) isn’t valid e.g. missing comma etc. I have had this happen to me on numerous occasions.

I think Elements could be usefully enhanced to validate the properties json and flag it if it is in error. :thinking:

1 Like
4

This is always due to a syntax error in the code you’ve written. Happy to help fix property files if you paste the code here on the forum :slight_smile:

Same as above… If the UI is not appearing or updating, it’s often due to the code being incorrect… If you paste the code here we can debug it for you :slight_smile:

5

We’ve just launched Elements 1.0.9 (23745 ) which now has syntax validation in custom components!

If syntax errors are found, they’re highlighted like a spell checker. Hopefully that’ll help you to correct any issues if the properties don’t update.

image
image1920Ă—1096 447 KB

2 Likes
6

@dan I agree that it could be a syntax error, but in my case, I seriously doubt it. The reason I say this is because I copied the code from a fully functioning component into a new component, and no properties showed up at all. So clearly something else is going on.

I see a new version is out with syntax validation, that should be interesting and hopefully will be very helpful. Although a lot of the time I edit the code in an external editor because it is a lot better and tracking the general layout of the code.

7

Can you share the code that doesn’t work so we can re-produce the issue here?

8

@dan Using the new validation features, I have been able to debug it and get it working. I still need to test the case where I copied some working properties to a new component and nothing appeared.

This syntax validation makes a HUGE difference.

QUESTION: when editing properties there are small square boxes that can appear on the right edge of the pane, what do these mean and how do we leverage them?