HomeComponent Code

Assessments service

We noted in the last tutorial that the repeating panel needs to be linked to a list of items. For the HomeComponent the list of items will be a list of the assessments. This means that we will have to retrieve the list of assessments from the Assessments table, therefore, using the assessments_services.

Before we look at the code, we need to consider exactly what we are retrieving from the Assessments table:

  • the app can have multiple users, so we only want the assessments that belong to the current user.

  • the assessments are listed in the order they were entered, which is not much use. We will need to sort the list so the assessments are listed according to their due date.

Assessment services code

In the Server Code open the assessment_services.

Then add the new get_assessments function below:

18@anvil.server.callable
19def get_assessment():
20  user = anvil.users.get_user()
21
22  return app_tables.assessments.search(tables.order_by('due_date'),
23                                       user=user)

Code explaination

  • line 18 → the decorator that allows the frontend to call this backend function

  • line 19 → defines the get_assessment function, note no arguments required

  • line 20 → retrieves the details of the currently logged in user

  • lines 22 - 23 → retrieves the assessments from the Assessments table and returns them to the front end:

    • app_table.assessments → working with the Assessments table

    • search → command used to retrieve row from the table

    • tables.order_by('due_date') → sorts the results according to the assessments due date

    • user=user → only retrieves assessments that belong to the current user

HomeComponent

Now that we can retrieve the assessment items, we need to link them to the repeating panel. We do this in HomeComponent. It will also need to happen before the HomeComponent opens.

HomeComponent code

Open the HomeComponent in the code mode and then add the highlighted code to the __init__ method:

11  def __init__(self, **properties):
12    # Set Form properties and Data Bindings.
13    self.init_components(**properties)
14
15    # Any code you write here will run before the form opens.
16    self.repeating_panel_1.items = anvil.server.call('get_assessment')

Code explaination

  • line 6 → calls the get_assessment function and then connects the returned list to repearing_panel_1 items.

AssessmentPanel

Now that we have connected the list of assessments to the repeating panel, we can now connect the assessment values to their respective element in the AssessmentPanel. This needs to happen in the AssessmentPanel before it opens.

AssessmentPanel code

Open the AssessmentPanel in the code mode. Before we work on the __init__ method we need to import datetime so we can format the date correctly. So in the import section add the highlighted code:

1from ._anvil_designer import AssessmentPanelTemplate
2from anvil import *
3import anvil.server
4import anvil.users
5import anvil.tables as tables
6import anvil.tables.query as q
7from anvil.tables import app_tables
8import datetime

Now add the following code to the __init__ method.

12  def __init__(self, **properties):
13    # Set Form properties and Data Bindings.
14    self.init_components(**properties)
15
16    # Any code you write here will run before the form opens.
17    self.check_box_completed.checked = self.item['completed']
18    self.label_subject.text = self.item['subject']
19    self.label_details.text = self.item['details']
20    self.label_start.text = self.item['start_date'].strftime('%d/%m/%Y')
21    self.label_due.text = self.item['due_date'].strftime('%d/%m/%Y')

Repeating panels and items

The repeating panel is connected to a list of items. This means that each instance of the panel is connected to one of the items.

When the code uses self.item is refers to the specific data item belonging to this specific panel. This means you can acces the values in the item just like a dicitonary.

Code explaination

  • line 17 → read the completed value for this panel’s item and display it in the check_box_completed

  • line 18 → read the subject value for this panel’s item and display it in the label_subject

  • line 19 → read the details value for this panel’s item and display it in the label_details

  • line 20 → read the start_date value for this panel’s item. Format it to show dd/mm/yyyy and then display it in the label_start

  • line 21 → read the due_date value for this panel’s item. Format it to show dd/mm/yyyy and then display it in the label_due

Testing

Time to launch your website and see if the assessments are displayed on the Home page. Make sure that you are logged in.

The Home page should look like this:

test

We’re starting to get a functional web app. Try adding more assessment items and seeing how they display on the Home page.

Final code state

By the end of this tutorial your code should be the same as below:

Final assessment_service

 1import anvil.users
 2import anvil.tables as tables
 3import anvil.tables.query as q
 4from anvil.tables import app_tables
 5import anvil.server
 6
 7@anvil.server.callable
 8def add_assessment(subject, details, start_date, due_date):
 9  user = anvil.users.get_user()
10  
11  app_tables.assessments.add_row(user= user,
12                                 subject= subject,
13                                 details=details,
14                                 start_date=start_date,
15                                 due_date=due_date,
16                                 completed=False)
17
18@anvil.server.callable
19def get_assessment():
20  user = anvil.users.get_user()
21
22  return app_tables.assessments.search(tables.order_by('due_date'),
23                                       user=user)

Final HomeComponent

 1from ._anvil_designer import HomeComponentTemplate
 2from anvil import *
 3import anvil.server
 4import anvil.tables as tables
 5import anvil.tables.query as q
 6from anvil.tables import app_tables
 7import anvil.users
 8
 9
10class HomeComponent(HomeComponentTemplate):
11  def __init__(self, **properties):
12    # Set Form properties and Data Bindings.
13    self.init_components(**properties)
14
15    # Any code you write here will run before the form opens.
16    self.repeating_panel_1.items = anvil.server.call('get_assessment')

Final AssessmentPanel

 1from ._anvil_designer import AssessmentPanelTemplate
 2from anvil import *
 3import anvil.server
 4import anvil.users
 5import anvil.tables as tables
 6import anvil.tables.query as q
 7from anvil.tables import app_tables
 8import datetime
 9
10
11class AssessmentPanel(AssessmentPanelTemplate):
12  def __init__(self, **properties):
13    # Set Form properties and Data Bindings.
14    self.init_components(**properties)
15
16    # Any code you write here will run before the form opens.
17    self.check_box_completed.checked = self.item['completed']
18    self.label_subject.text = self.item['subject']
19    self.label_details.text = self.item['details']
20    self.label_start.text = self.item['start_date'].strftime('%d/%m/%Y')
21    self.label_due.text = self.item['due_date'].strftime('%d/%m/%Y')