Add standard properties to the properties tab of custom components

Feature Requests
1

Some properties (like visible or spacing_above) are available for custom components even if they are not explicitly defined as properties in the custom component, but they are not available on the Properties panel.

Please expose them on the Properties panel.

(I have the feeling that they used to be there and have disappeared, but I might be wrong)

4 Likes
2

They are?!? Then they are accessible only through code?

I remember trying to add my own version of visible and enabled, 2-3 years back, for some of my own custom components, precisely because it seemed that these properties did not exist. And had to use names like is_visible and is_enabled, in order to avoid conflicts. (And for readability.)

2 Likes
3

All custom components are also anvil forms. So the basic features like visible, role, etc are already available in them. You do not have to implement your own versions, but only add an option to change it in the Editor. Although I will agree with @stefano.menci that having these features by default would be nice.

2 Likes
4

This is on our list.

Currently the best way to implement these pass through properties, both in the designer and on your component, is to do something like the following:

  • add the visible property in the custom component dialogue
  • add the following code to your custom component
class CustomComonent(CustomComponentTemplate):
    def __init__(self, **properties):
        ...


    visible = HtmlTemplate.visible

The same works for role and other properties for HtmlTemplates (see API docs)
This assumes that your CustomComponent is a CustomHtml Form
(which is a subclass of the HtmlTemplate class)

spacing_above and spacing_below aren’t properties that exist on the HtmlTemplate class so they wouldn’t work in the same way.

anvil-extras adds spacing_above and spacing_below to some of its components.
The source code is available in the usual place - the Tabs component does it for example.

(If your CustomComponent class is a BlankPanel then spacing_above and spacing_below would work because a BlankPanel is a subclass of ColumnPanel. Just replace HtmlTemplate in the above example with ColumnPanel)

How can you tell the inheritance of a Form?

class CustomComonent(CustomComponentTemplate):
    def __init__(self, **properties):
        ...

print(CustomComponent.__mro__)
# (<class 'MyApp.CustomComponent'>, 
# <class 'anvil.CustomComponentTemplate'>, 
# <class 'anvil.HtmlTemplate'>, 
# <class 'anvil.Container'>, 
# <class 'anvil.Component'>, 
# <class 'object'>)
4 Likes
5

Adding this at the end of the code shows the inherited classes and their properties (and some more):

def show_all_attributes(item, show_unders=False):
    print(f'=== {item} ===')
    for a in dir(item):
        if show_unders or not a.startswith('_'):
            try:
                value = getattr(item, a)
            except Exception as e:
                value = f'** ERROR ** - {e}'
            print(f'  {a}: {value}')

for cls in CustomComonent.__mro__:
    show_all_attributes(cls)
1 Like
6

For anyone interested in what the mro does / is here is a video with the most condensed explanation I have seen.

At About the 4:30 mark he discusses the Method Resolution Order

(Youtube) mCoding - super, Python’s most misunderstood feature.

3 Likes
7

Pretty straightforward.

Just include the “Visible” Property in the UI designer like all other components.

1 Like