Question about Custom Components in Beta Designer

Anvil Q&A
21

I suspect this was a caching issue, with the bad deploy sticking around for longer than we would have liked. Please shout if it happens again!

1 Like
22

Here is a summary of my current situation. I came back from lunch and noticed some partial improvements, but also some persistent problems. The properties that I can modify now are the colors, border, and visibility. However, the property manager does not reflect these changes correctly.

My custom component in the designer:

image
image1340×153 10.9 KB

You will see that I have changed the foreground and background colors.

The property manager:

image
image841×568 34.9 KB

You will notice that the background color is NOT saving in the picker.

No Design Output:

image
image835×205 8.12 KB

If there is an error causing this, then there doesn’t seem to be any output to indicate it?

I hope this helps better explain what I’m seeing.

23

@chad63e - if there’s no errors in the output, then it looks like your custom component is rejecting the property updates. After trying to set a property value, the Editor reads back that attribute from your component, and puts that “true” value into the property panel. You don’t say how you’re “inheriting” the properties from the underlying component, but my guess is that however it’s implemented, those attributes are reading back as None, so the property box is ending up blank.

1 Like
24

Ah, now it’s a two-way street! This means that a component

  1. can reject settings that it doesn’t like
  2. must make its (editable) properties readable as well as writable
25

Bingo! You nailed it. I had an incorrect component listed in the getter. That problem is solved; thank you.

However, I’m still having an issue with this error popping up whenever I drop a custom component:

[An internal error has occurred] - see browser console for more details
TypeError: Cannot read properties of undefined (reading 'pyComponent')
    at https://anvil.works/runtime-new/runtime/dist/designer2.bundle.js?sha=8bea7b3a26270fb8697091bd19a22a0b7cc7b172735df0f73227a3e357fabd4a:20:58022
    at Generator.next (<anonymous>)
    at b (https://anvil.works/runtime-new/runtime/dist/designer2.bundle.js?sha=8bea7b3a26270fb8697091bd19a22a0b7cc7b172735df0f73227a3e357fabd4a:20:53217)
    at a (https://anvil.works/runtime-new/runtime/dist/designer2.bundle.js?sha=8bea7b3a26270fb8697091bd19a22a0b7cc7b172735df0f73227a3e357fabd4a:20:53420)
    at https://anvil.works/runtime-new/runtime/dist/designer2.bundle.js?sha=8bea7b3a26270fb8697091bd19a22a0b7cc7b172735df0f73227a3e357fabd4a:20:53479
    at new Promise (<anonymous>)
    at https://anvil.works/runtime-new/runtime/dist/designer2.bundle.js?sha=8bea7b3a26270fb8697091bd19a22a0b7cc7b172735df0f73227a3e357fabd4a:20:53360
    at E (https://anvil.works/runtime-new/runtime/dist/designer2.bundle.js?sha=8bea7b3a26270fb8697091bd19a22a0b7cc7b172735df0f73227a3e357fabd4a:20:55573)
    at https://anvil.works/runtime-new/runtime/dist/designer2.bundle.js?sha=8bea7b3a26270fb8697091bd19a22a0b7cc7b172735df0f73227a3e357fabd4a:28:34770
    at Generator.next (<anonymous>)
26

This is going to be really awesome once the bugs are worked out, unfortunately, for now I’m going to have to switch back to the regular IDE.

I have run into another issue when trying to run one of my main apps. During the start-up proceedure it makes an anvil.server.call() and I get this message.

image
image769×279 29.7 KB

27

Hi @chad63e

Please can you tell us

  1. Which app you’re editing
  2. Which custom component you’re dropping into which form
  3. Assuming the error is in the Designer Output, what do you see in the browser JS console? Or, if the error isn’t in the Designer Output, where is it?

I think I know what’s going on here - are you importing anvil.designer in a Module rather than a Form? If so, that will fail right now. We’ll sort this out, but in the meantime you should be able to avoid the error by only importing anvil.designer in your Forms, not in Modules.

Please can you let us know:

  1. Whether removing imports of anvil.designer from Modules resolves the issue.
  2. What the use-case is for importing it there in the first place. If we can understand that, we’ll be able to make sure we support it properly.

Thanks!

28

Update: It’s now OK to import anvil.designer on the server, in Python 3.10 (Full Python 3 is coming shortly :slight_smile: ). This means you can include that import in your Modules as well as your Forms, if that suits you.

(Of course, you can’t actually use that module on the server, for obvious reasons! But this should avoid anything blowing up :-D)

1 Like
29

Regarding the app and components I was working with, I would prefer to discuss those details privately for security reasons.

I have reverted all the changes I made involving anvil.designer and in_designer functionality, as they were causing issues in my main app. To answer your question about the import location, yes, I am importing from anvil.designer import in_designer within a module. I chose to do this because using a module for startup allows me to manage the startup process more cleanly. It also enables me to check the URL hash, which is crucial for controlling navigation within my app.

Additionally, my app constructs classes dynamically from JSON data retrieved from the database. This requires me to import all classes that might be serialized in a complex node tree structure used by the app. Hence, the module-based approach is not just a preference but a necessity for the architecture of my application.

I look forward to hearing your thoughts on how best to resolve this issue while maintaining the integrity of my app’s architecture.

30

Hi @chad63e – good news! About two minutes before your post, we shipped the update that makes the architecture you’re using work just fine! (That’s if you’re using Python 3.10 – Full Python 3 will follow in the next day or so).

Whenever you’re ready to jump back into the Beta Designer, please do continue sending feedback :slight_smile:

1 Like
31

Fantastic. I am currently using the Full Python 3, so I will check back in a few days. Thanks for the updates.

32

Update: You should now be able to import anvil.designer in Full Python 3 too, so please let us know how you get on!

2 Likes
33

Hello,

Despite the recent changes made to address the issue with importing anvil.designer, I’m still encountering the same problems. Below are the details:

Issue 1: Syntax Error Triggered by anvil.designer Import

I continue to face a syntax error specifically when there’s an import of the anvil.designer library in any module:

SyntaxError: invalid syntax (designer.py, line 1)

This error appears to be related to the following line of code involving a server call:

record = anvil.server.call("get_survey", survey_id)

Issue 2: Custom Component Error

I also still get an error when dragging and dropping a custom component into another form.
Error Message:

[An internal error has occurred] - see browser console for more details
TypeError: Cannot read properties of undefined (reading 'pyComponent')
    at https://anvil.works/runtime-new/runtime/dist/designer2.bundle.js?sha=fbfa1ca6f51fff38db01974c68b6375ee5bd409bda02671a17fbf2a36cc500fc:20:58108
    at Generator.next (<anonymous>)
    at b (https://anvil.works/runtime-new/runtime/dist/designer2.bundle.js?sha=fbfa1ca6f51fff38db01974c68b6375ee5bd409bda02671a17fbf2a36cc500fc:20:53217)
    at a (https://anvil.works/runtime-new/runtime/dist/designer2.bundle.js?sha=fbfa1ca6f51fff38db01974c68b6375ee5bd409bda02671a17fbf2a36cc500fc:20:53420)
    at https://anvil.works/runtime-new/runtime/dist/designer2.bundle.js?sha=fbfa1ca6f51fff38db01974c68b6375ee5bd409bda02671a17fbf2a36cc500fc:20:53479
    at new Promise (<anonymous>)
    at https://anvil.works/runtime-new/runtime/dist/designer2.bundle.js?sha=fbfa1ca6f51fff38db01974c68b6375ee5bd409bda02671a17fbf2a36cc500fc:20:53360
    at E (https://anvil.works/runtime-new/runtime/dist/designer2.bundle.js?sha=fbfa1ca6f51fff38db01974c68b6375ee5bd409bda02671a17fbf2a36cc500fc:20:55659)
    at https://anvil.works/runtime-new/runtime/dist/designer2.bundle.js?sha=fbfa1ca6f51fff38db01974c68b6375ee5bd409bda02671a17fbf2a36cc500fc:28:34971
    at Generator.next (<anonymous>)

I suspected that the problem might be related to the class inheritance in my custom components, so I created a simple custom component with a Headline component and one property mapped to its visible property. To my surprise, it produced the same error.

Additional Observations

Upon further investigation, I couldn’t identify any obvious issues. However, a line in the inspection console caught my attention:

Ignoring form constructor kwarg: asrisk_visible

Interestingly, this mistyped property name doesn’t appear anywhere in my app after conducting an app-wide search.

Issue 3: Custom Component Naming

Another issue I encountered is that the custom components seem to have relative names when they are placed on another form. For example, a currency box input component has the name self.components.inputs.currencyboxinput_1. However, this name does not work when I try to use it in the code.

For Example:

def form_show(self, **event_args):
        """This method is called when the HTML panel is shown on the screen"""
        self.components.inputs.currencyboxinput_1.visible = False

Error Message:

AttributeError: 'TestForm' object has no attribute 'components'
at TestForm, line 21

Any insights into these persistent issues would be greatly appreciated.

35

Hi @chad63e

Thanks for this summary - very helpful!

Now finally resolved in both Python 3.10 and Full Python 3. Please take it for a spin!

Thanks for experimenting with the minimal example. If you can point us to the app (by DM if you wish), we’ll take a look.

Please can you point us to the app? Again, by DM if you wish, although App IDs are not sensitive.

This one is interesting. Where are you seeing the name self.components.inputs.currencyboxinput_1 being generated? Clone link or app ID please!

36

Hi @chad63e,

Thanks for sending a link to your app privately. After much debugging, we finally worked out that you’re dragging custom components from the sidebar on the left, not from the toolbox, and that is where the bug is. Once we’d worked that one out, it was a quick fix, and so the remaining issues (2 and 3 above) are now resolved.

Thanks for your patience while we worked on this!

Side note: Custom components that you have already dropped from the left-hand sidebar will probably have invalid names (with dots in: something.widgets.my_widget_1). You will need to rename these manually to remove the dots. Newly-dropped components won’t have this issue.

1 Like
37

Awesome. You guys really are amazing to work with. I am so grateful for your diligent efforts to resolve everyone’s issues.

I do apologize, I did not even think to mention the little detail that it was being dragged from the navigation bar (left bar).

2 Likes