Using Python and Transcrypt to Build a Complete Web Application/

...

/

Editing Items

Editing Items

Explore the modifications in the existing module to enable add, edit, and delete for the lookup table.

We'll cover the following...

About the application

In this application, we’ll look at adding, deleting, and saving an item in the lookup list. We’ll experience major changes in our lookupList.py module that includes modification in the existing four modules to incorporate add, edit and delete. Also, there was a fifth component ItemEditCell as well mainly for an editable TableCell.

This is what the application looks like:

Note: To log in, use the username admin and password 123.

Copyright (c) 2020 John Sheehan

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
Adding the front-end functionality for adding, editing and saving items

How to edit an item in a lookup list

Let’s look at how we can enable editing of the lookup list. That way, if an item gets double-clicked, it will switch to an editable text box. Clicking off the text box or pressing “Enter” will trigger the edited item to be saved.

How to add an item in a lookup list

To allow for adding new items, we have an “Add” icon button at the end of the list. Clicking that button will append a new blank item to the editable list. Clicking off the new item or pressing “Enter” will save the new item, just as it does when updating an item.

How to delete an item in a lookup list

To delete an item from the list, double-click to put the item into edit mode, and then clear the fields in the row. When the item is saved, our saveItem() function in the lookupView.py module will detect that there is no data and delete the item from the table. ...