Custom Components - Dropdown

I am developing an application and most of the input on this application consist of a textbox and an associated dropdown

The dropdown gets its items from the database and when the text in the textbox associated with it meets a certain condition (for example number become zero), the dropdown selected value becomes a predefined one.

I have done the behaviour and all good - is there a way to set this as a custom component? as in define what is the connected text box and the condition so that I don’t need to copy my code?

I have period as dropbox and income as the textbox, if income is zero, period selected will be change to a default value:

from anvil import *
import anvil.server
import tables
from tables import app_tables

class Form1(Form1Template):

def init(self, **properties):
# You must call self.init_components() before doing anything else in this function
self.init_components(**properties)

# Any code you write here will run when the form opens.
anvil.server.call('get_periods')    
all_periods = app_tables.frequency.search()
self.period.items = [(i['Frequency'], i['PayUnit']) for i in all_periods]
self.period.selected_value = app_tables.frequency.search(PayUnit=0)[0]['PayUnit']

def button_1_click (self, **event_args):
# This method is called when the button is clicked
pass

def income_change (self, **event_args):
# This method is called when the text in this text box is edited
if self.income.text == 0:
self.period.selected_value = app_tables.frequency.search(PayUnit=0)[0][‘PayUnit’]
pass

I cleaned up the code (hopefully), still need a response

class Form1(Form1Template):

response = {}
  def init(self, **properties):
  # You must call self.init_components() before doing anything else in this function
  self.init_components(**properties)

  # Any code you write here will run when the form opens.
  self.response = anvil.server.call('get_periods')    
  all_periods = app_tables.frequency.search()
  self.period.items = self.response['items']
  self.period.selected_value = self.response['zero']

def button_1_click (self, **event_args):
  # This method is called when the button is clicked
  pass

def income_change (self, **event_args):
  # This method is called when the text in this text box is edited
  if self.income.text == 0:
  self.period.selected_value = self.response[‘zero’]
  pass

where the servermodule is:

@anvil.server.callable
def get_periods():
  values = {}
  all_periods = app_tables.frequency.search()
  values[‘items’] = [(i[‘Frequency’], i[‘PayUnit’]) for i in all_periods]
  values[‘zero’] = app_tables.frequency.search(PayUnit=0)[0][‘PayUnit’]
  return values

To set a form as a custom component you do need a pro (paid) account. This allows you to set properties & methods which can be read and written just like standard components.

But you can also just drag/drop a form onto another one. I do this for my own “Nav Bar”.

(edit) - the custom component feature might be in beta.

https://anvil.works/doc/index.html#-div-id-custom_components-custom-components-div-

1 Like

Thank you,

Would sign up for a Trial on the pro give access to the feature?

Suggest you contact @meredydd or @daviesian at Anvil for that one.

1 Like

Hi @ialameh!

The Custom Components features are still in beta (the feedback has been great, and there’s just one technical corner to file off before we can open it to the world). We’re expanding the beta by request to paying users (Individual plan and higher).