- Add an icon to the title.
- Organise elements using a card and column panel.
- Create labels and text boxes for subject and details.
- Incorporate date pickers for start and due dates, ensuring correct format.
- Include an label for validation error messages.
- Add an "Add Assessment" button.
Now that we have somewhere to store assessment data, we need a way to input it. This will be completed through the AddComponent.
Checking our design we will see the layout of this component.
Open the AddComponent in the design mode.
Currently the only element on the component is the title. We'll start by adding an icon to the title.
- Click on the title
- Find Icon in the Properties panel
- Choose the
fa:plus-square
Looking at our design we can see that we will need a Card that contains a Column Panel so add these to your layout.
Now we need to add the labels and text boxes.
First add the subject elements
- Add a label
- Change the text to
Subject - Charge its role to
input-prompt - Add a text box
- Change the text box's name to
text_box_subject - Change the text box's placeholder to
Enter subject name - Change the text box's align to
right
Then add the details elements
- Add a label
- Change the text to
Details - Charge its role to
input-prompt - Add a text box
- Change the text box's name to
text_box_details - Change the text box's placeholder to
Enter assessment details - Change the text box's align to right
We now need to add the two date fields, Start date and Due date. Anvil uses Python's datetime module to handle dates. This means that dates are stores as a Python object, with the day, month and year all stored as separate values (it does the same for time). This way you can use each of the values independently, which includes choose how to format the date. In our website, we will display our dates in the format of dd/mm/yyyy so that the 1st of April 2024 would be displayed as 01/04/2024.
:class: note
Date formats can be problematic because different regions use different conventions. The most common format is "DD/MM/YYYY", but it is far from dominate. The US uses "MM/DD/YYYY" , while Japan, South Korea, China and others use "YYYY/MM/DD". This can lead to confusion and errors when processing dates from various sources. Additionally, dates can be represented in many ways, such as strings, timestamps, or specific date objects, requiring careful handling to ensure accuracy.
Anvil simplifies working with dates by using Python's datetime module, which provides a standard way to create, manipulate, and format dates. Anvil's date pickers and forms automatically handle date input in a consistent format. When dates are stored in Anvil's database, they are stored as datetime objects, ensuring that date operations are performed correctly and consistently, regardless of the user's regional settings. Anvil also provides utilities to format dates for display and to parse dates from strings, making it easier to handle different date formats accurately.
For more information check out **<a href="Geeks for Geeks datetime tutorial" target="_blank">Geeks for Geeks datetime tutorial</a>**
First we need to add the start date:
- Add a label
- Change the text to
Start date - Charge its role to
input-prompt - Add a date picker
- Change the date picker's name to
date_picker_start - Change the date picker's placeholder to
Enter start date - Change the date picker's format to
%d/%m/%Y - Change the date picker's align to right
Then we need to add the due date:
- Add a label
- Change the text to
Due date - Charge its role to
input-prompt - Add a date picker
- Change the date picker's name to
date_picker_due - Change the date picker's placeholder to
Enter due date - Change the date picker's format to
%d/%m/%Y - Change the date picker's align to right
Just like the SetDetailsComponent we will be validating the user's input, therefore we need an element to display warnings. Previously we have displayed warnings under the card, so we will continue this to maintain consistency.
- Add a label
- Change the name to
label.error - Untick visibility
- Change foreground to
#ff0000 - Change role to
headline - Change icon to
fa:warning - Change align to
center
Finally we are going to insert an Add Assessment Button.
- Add a button
- Change the name to
button_add - Change the text to
Add Assessment - Change the role to the same as the other buttons you have used (check the SetDetailsComponent)
- Change icon to
fa:save - Change align to
right
That is all the elements that the AddComponent needs. Your finished layout should look like:
