Mismatch between Design & Code Editors

What I’m trying to do:
Create a form using the Code Editor

What I’ve tried and what’s not working:
When switching from the Code Editor to the Design (Drag-and-drop) Editor, the changes made in the Code Editor are not being reflected.
When I run the app, the changes made in the Code Editor are reflected in the Running App version.
However, when I go back to the Design Editor, the changes are still not reflected.
When I refresh the page, the changes are still not reflected in the Design Editor, even though the changes made in the Code Editor have been saved.

The three interfaces side by side:

This happens in the Classic Anvil Editor too.

Any ideas why this might be happening? Or am I mistaken in thinking that changes made in the Code Editor are reflected in the Design Editor?

Thank you!

Hi @lohwenye ! First of all, welcome to the Forum and to the community!

Yes, unfortunately you are mistaken, hehehe. What you can see in the Design “mode” is what you set using the properties of the visual editor. You can think of “starting point” of your app.

What you type in your code only happens when you run your app, so the designer can’t know for sure about it.

What made you confuse this is that you typed a string constant, but imagine if it was a variable value:

class Form2(Form2Template):
  def __init__(self, custom_title, **properties):
    self.init_components(**properties)
    self.label_1.text = custom_title

In the above exemple, custom_title is a parameter received when you call open_form method. The designer can’t know what value it would be before you run the app. It could be different values in different parts of your app.

1 Like

Hi Gabriel @gabriel.duro.s ,

Thanks so much for your reply; it was very enlightening and well-written!

Alright, I now understand that the code in the Code Editor adds to/modifies the existing components in the Design Editor, and that this is a “one-way street”.

This certainly changes my plan to use the Grid Panel, since right now it seems I can’t control the contents of the Grid Panel in the Design Editor.

Will figure out a different way to get things to work!

Thank you so much once again :slight_smile:

2 Likes

No problem!

If you think my answer was the solution to your question, you could mark it as so by clicking the button “Solution” below my comment.

If you want to say more about what you were intending to do with the Grid Panel, we can try to help you further too (or maybe create a new topic, if it’s too different that the main question).

3 Likes