Adding Form Elements Via Code

Anvil Q&A
1

Hi,

I’m looking at writing screen-builder; a user logs in an xml string is retrieved for his GUI setup and the GUI is created.

I dropped a plot on the form design view but I can’t find the code added to the form code view. What I’m looking at creating is a screen builder. When a user logs in system will retrieve his screen-setup via an XML string stored in the PostGres DB. It then setup the elements, plots etc… for that user.

class Form1(Form1Template):
  def __init__(self, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)

    # Any code you write here will run before the form opens.
    ''' 
    obj_gauge = plotly_graph.Figure(plotly_graph.Indicator(mode="gauge+number", value=270, domain={'x': [0, 1], 'y': [0, 1]}, title={'text': "speed"}))

    self.plot_1.data = obj_gauge
    '''
    
    int_person_id = 1
    str_datetime = 'get_latest'
    print(f'client-side str_datetime({str_datetime})')

    int_grade_latest = anvil.server.call('return_grade_value', int_person_id, str_datetime)
    print(f'client-side int_grade_latest({int_grade_latest})')
    
    obj_gauge = plotly_graph.Figure(plotly_graph.Indicator(mode="gauge+number", 
                                                           value=int_grade_latest, 
                                                           gauge={'axis': {'range': [None, 100]}, 
                                                                  'bar': {'color': "black"},
                                                                  'steps' : [{'range': [0, 30], 'color': "red"}, {'range': [80, 100], 'color': "gold"}], 
                                                                  'threshold' : {'line': {'color': "black", 'width': 4}, 
                                                                  'thickness': 0.75, 
                                                                  'value': int_grade_latest}}, 
                                                           domain={
                                                                   'x': [0, 0], 
                                                                   'y': [0, 0]}, 
                                                                   title={'text': 'Grade Latest'}))
    self.plot_1.data = obj_gauge

I physically added ‘plot_1’ plot via the form designer drag & drop, how can I add it to the form via code?

Thanks
Haider

2

It’s found in the design view, under the code tab self.plot_1 , i suggest
looking here to find out how to use it .

3

I’m looking to add more plots and other elements but via code without having to add them via the drag & drop form designer screen…

4

You need this section of the docs: https://anvil.works/docs/client/components/containers

1 Like
5

Thanks, I’ll make sure I read through the docs in future…

1 Like
6

We all need help sometimes!!