I appreciate your work on this project. It looks very impressive and cool. However, I have a question about the appearance of the Custom Components. They all have a red border around them, which seems to indicate some kind of error or warning. Is this a deliberate design choice or a bug? If it is intentional, what is the purpose of the red border?
One feature that I think would enhance the user experience of custom components is the ability to access the “quick controls” popover that is available for the built-in components. This popover allows users to adjust some common properties of the components without opening the full property panel. It would be great if custom components could also have this option, so that users can customize them more easily and quickly.
1 Like
(I’ve moved this to its own thread)
Hi @chad63e,
A big change in the new designer is that Custom Components are “live” - that is, their Python code is up and running in the designer, while you’re using them! This means that when you update the component’s Properties, it can update live in the designer for a better preview. (Try @tobias.carlbom’s progress bars in the new designer; they’re hypnotic!)
However, this means that Custom Components can now raise exceptions in the designer! When a custom component raises an exception while being instantiated, you get the red border around the component, and the exception traceback is printed in the “Designer Output” tab at the bottom of the page. Open it up and see what the error is!
As for the feature request: Watch this space 
5 Likes
I have encountered an import error for the anvil.tz library when I run my script. Is this a known issue? I have fixed it by importing the library only inside the functions that use it, but I am not sure if this is the best solution.
Ah, that would do it! There’s a limited set of modules available inside the designer, but we’ll add anvil.tz to it 
However, here’s an as-yet-undocumented but useful feature: You can write:
from anvil.designer import in_designer
and now you have a boolean variable called in_designer, which you can use! So for example, you could replace your import anvil.tz with:
from anvil.designer import in_designer
if not in_designer:
import anvil.tz
Then you won’t get the ImportError in the designer. (Of course, you’ll then get an AttributeError anywhere you try to use anvil.tz – but if those usages are important you can stub them out in the designer).
Again, for this particular example there’s no point, because we’ll have anvil.tz supported in a few minutes’ time, but as a general strategy for dealing with APIs that aren’t available in the designer it’s a handy thing to know!
4 Likes
Can you expand on that, please? I don’t understand what is limited here.
There are things you can do in a running app that a Custom Component can’t do in the designer. For example, you can’t call Server Functions or access Data Tables (although as a convenience we’ve created stub modules, so import anvil.server won’t blow up, but anvil.server.call() will). The Python environment in the designer is a subset of that available when your app is running.
3 Likes
I notice that whenever I drop a cutom component onto the designer, I get this 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=7e2f229189b9d44b9096e71d2f657db8a5cf62e367015e2effab8f8a1a534ee3:20:57723
at Generator.next (<anonymous>)
at b (https://anvil.works/runtime-new/runtime/dist/designer2.bundle.js?sha=7e2f229189b9d44b9096e71d2f657db8a5cf62e367015e2effab8f8a1a534ee3:20:52918)
at a (https://anvil.works/runtime-new/runtime/dist/designer2.bundle.js?sha=7e2f229189b9d44b9096e71d2f657db8a5cf62e367015e2effab8f8a1a534ee3:20:53121)
at https://anvil.works/runtime-new/runtime/dist/designer2.bundle.js?sha=7e2f229189b9d44b9096e71d2f657db8a5cf62e367015e2effab8f8a1a534ee3:20:53180
at new Promise (<anonymous>)
at https://anvil.works/runtime-new/runtime/dist/designer2.bundle.js?sha=7e2f229189b9d44b9096e71d2f657db8a5cf62e367015e2effab8f8a1a534ee3:20:53061
at E (https://anvil.works/runtime-new/runtime/dist/designer2.bundle.js?sha=7e2f229189b9d44b9096e71d2f657db8a5cf62e367015e2effab8f8a1a534ee3:20:55274)
at https://anvil.works/runtime-new/runtime/dist/designer2.bundle.js?sha=7e2f229189b9d44b9096e71d2f657db8a5cf62e367015e2effab8f8a1a534ee3:28:34911
at Generator.next (<anonymous>)
Update: anvil.tz now works in the new designer 
As for your traceback, I don’t see that happening to me. Could you provide steps to reproduce this with a
(Also, if you’re using anvil-extras, you might want to upgrade to v2.5.0, which has some improved new designer support )
1 Like
Yikes, now It’s not loading anything! I’ve updated the anvil-extras to v2.5.0 as suggested and now nothing seems to load in the designer. I get this error as soon as any form designer is opened.
ModuleNotFoundError: No module named 'anvil'
[An internal error has occurred] - see browser console for more details
TypeError: Cannot read properties of undefined (reading 'enableLegacy')
at https://enek2h3qnbr4sjpi.anvil.app/debug/DBSKN3TE35WRUHUN6LHMWROA33KKXGMP%3DB62EXDXP3JL3DREQQB5QPK54/_/designer/designer2.html:3095:36
[An internal error has occurred] - see browser console for more details
TypeError: Cannot read properties of undefined (reading '_loadAppAfter')
at https://enek2h3qnbr4sjpi.anvil.app/debug/DBSKN3TE35WRUHUN6LHMWROA33KKXGMP%3DB62EXDXP3JL3DREQQB5QPK54/_/designer/designer2.html:3107:39
And this is what my IDE looks like:
Got a bit trigger-happy with the hotfixes to the beta there! We’re deploying a fix, stand by.
2 Likes
BETA - Breaking Everything To Advance
3 Likes
Aaand fixed. (With a slight delay as, immediately after the bad deploy and with immaculate timing, my workstation’s disk failed. Everyone’s getting caught up in the excitement today, including the chaos gremlins…)
4 Likes
As a previous Mechanical Engineer, we had a saying “break it fast”. With that said, I think I may have found another issue. LinearPanels do not seem to have any properties? Thus, I’m getting an error when I try to change the visibility of my LinearPanels.
Another issue I encountered is that the color attribute does not work for some properties. For example, I tried to change the background color of a component, but it did immediately deletes it. Also, some of the custom components I created have attributes like border and visible that are inherited from the built-in components, but they do not update when I change them in the code. The same thing happens there, the change gets immediately deleted.
It worked for a few minutes, it seems to be broken again…
Can I have a bit more detail than “it worked” and “it’s broken again”? This thread is sprawling a bit, and I don’t know what to check!
@chad63e – can you describe how to reproduce the colour error in a bit more detail? All the components I try are working fine, so I assume you’re dealing with your own custom components.
If you’re trying to change a custom component property but it rolls back as soon as you move away from the text box, what’s probably happened is that the custom component has raised an exception when you tried to set the property value. Check the Designer Output and you’ll probably see what went wrong.
(The LinearPanel issue we’re aware of, and won’t be as immediate as some of these other fixes 
)
Update: Guess I was wrong. The LinearPanel is fixed, and its properties now display properly in the new designer!
Sorry… I was referring to the ModuleNotFoundError: No module named 'anvil' error and the failure to load the form, reported by @chad63e, then reported fixed by you.
After you said it was fixed, I was able to work for a while. I created a new app, added dependencies, played with it and it was working. And then it stopped working with the same error message. I refreshed the editor open on 2 other apps, and they all failed to show the form.
Now, after the lunch break, I refreshed the editor on the 3 apps that I was editing and all were showing Loading..., and they all succeeded to load. I guess it’s fixed again.
