DEV Community: francheese9289

Solved: Nested Form Submission in Flask

francheese9289 — Fri, 10 May 2024 16:16:28 +0000

Disclaimer: I am fairly new to coding so although I'm sure there are better ways to do what I did, I really wanted to find a solution that I was comfortable with and I felt like I understood.

Though I hope this is helpful to someone else, this isn't so much a tutorial as it is a story and a gateway for deeper discussion about techniques and tools.

The Problem & My Attempts to Solve it
For a while now, I've been trying to incorporate a form feature into my debut Flask app that was a) formatted like a table and b) pre-populated the headers and first row dynamically, leaving the internal cells as inputs corresponding to each header and row value, to be added to my database.

This functionality felt essential, even for my MVP, but I couldn't find a way to do it that made sense using the tools I had (primarily WTForms). I did attempt to learn Dash to create an editable table and had it incorporated into my app (cred: Hackers and Slackers Plotly Dash in Flask Tutorial), but I didn't really enjoy how separate the Dash app felt from my main app (and I couldn't figure out the editable table feature right away, so boo).

I may have read the WTForms documentation 1,000 times, but so much of it still doesn't click for me. I also read a Tolstoy novel's worth of stack overflow posts and posted here, with out response, earlier this week (it's cool guys).

Original Post: ISO Help: Nested Form Submission in Flask

The Project & Journey
This is the solution that I ended up with and I'd love to hear some feedback. More importantly, if I make any mistakes please let me know so I can edit (with cred).

Originally I was designing this for my old job, a small rural public school district. The page in question is meant to allow an educator to enter the scores students in their classroom received on a variety of assessments. Each assessment has several components that are scored separately. So the app had to identify a user's current classroom & students and create a table to enter scores for the chosen assessment components in one of three periods.

forms.py

#Nested Form
class ComponentForm(Form):
    component_id = HiddenField('Component ID')
    score = FloatField('Score', default=0.0, widget=NumberInput())

#Main Form
class AssessmentScoreForm(FlaskForm):
    student_id = HiddenField('Student ID')
    assessment_name=HiddenField(u'Assessment Name')
    period = SelectField("Choose an option", validate_choice=False, choices={'1':'fall','2':'winter','3':'spring'}) 
    components = FieldList(FormField(ComponentForm)) #nested form
    submit = SubmitField()

As of posting on DevCommunity for help, I had been able to get the layout I wanted and could see my using 'View Page Source' in my browser, that the input cells in my table were in fact mini-forms corresponding to the student and assessment component. Where I believe the issue lied was in how I was dynamically populating my nested form.

api/routes.py

@api.route('/data_entry', methods=['GET', 'POST'])
def data_entry(): # <this will need to accept an assessment name as a parameter>

 #logic for getting user classroom & student data   

    #get all components for a given assessment 
    components = db.session.scalars(
        sa.select(AssessmentComponent).where(
            AssessmentComponent.assessment_name == assessment).order_by(
                AssessmentComponent.component_name)).all()
    #main form
    form = AssessmentScoreForm()
    #nested form
    component_form = ComponentForm()

    for component in components:
        component_form.component_id = component.id
        form.components.append_entry(component_form) #append nested form to main form

According to the WTForms documentation (as I understand it), because I was using .append_entry() to add the components, I could not then allow the user to update the score information in that entry.

append_entry([data])
Create a new entry with optional default data.
Entries added in this way will not receive formdata however, and can only receive object data.
WTForms Documentation > FieldList > append_entry

Looking at the page source again, I could see that the 'score' data in my nested form, was coming through as an object:
<td><input type="number" id="components-0" name="components-0" value="{'component_id': 'PARLW', 'component': 'Letter Word Calling', 'score': **<wtforms.fields.numeric.FloatField object at 0x0000016AFE5C23D0>}**"></td>

The Solution
First, I'll note that I was OK'd by my instructor to use ChatGPT for this particular feature as I was already working outside the scope of what I was taught and, apparently, forms can be really annoying (who knew). That being said, my experience is that ChatGPT is often more frustrating and confusing than it is helpful. Prior attempts to use it for this problem threatened angry tears, so I was pretty careful not to be super general or use its code without inspection.

Second, this might be an obvious answer for anyone who knows a lick more about this stuff than I do. Well, whoopee (jk, please share your knowledge with me).

The question I asked:

would it be possible for me to create score instances for each student and component, then populate object with score data? How would I attach the score data to each instance?

I was thinking I could create db entries like you would create a new user, then use WTForm's populate_obj to edit those entries, as in the example in their docs:

populate_obj(obj)
Populates the attributes of the passed obj with data from the form’s fields.
Note
This is a destructive operation; Any attribute with the same name as a field will be overridden. Use with caution.
One common usage of this is an edit profile view:

def edit_profile(request):
    user = User.objects.get(pk=request.session['userid'])
    form = EditProfileForm(request.POST, obj=user)

    if request.POST and form.validate():
        form.populate_obj(user)
        user.save()
        return redirect('/home')
    return render_to_response('edit_profile.html', form=form)

In the above example, because the form isn’t directly tied to the user object, you don’t have to worry about any dirty data getting onto there until you’re ready to move it over.
WTForms Documentation > Forms > populate_obj

As expected, Mr.GPT's first answer did not properly address the issue, but the follow up made me gasp a little 'oh', like the first time I learned about pivot tables in Excel.

data_entry.html

<form method="POST">
    {{ form.hidden_tag() }}
    {{ form.csrf_token }}
    {% for period in form.period.choices %}
    <label class="radio"> 
        <input type="radio" name="period" value="{{ period[0] }}"/>
        {{ period[1] }}
    </label>
    {% endfor %}
    <div class="table-container">
    <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
        <thead>
            <tr>
                <th>Student</th>
                {% for component in components %}
                <th>{{ component.component_name }}</th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            {% for data in roster_data %}
            <tr>
                <td>{{ data.full_name }}</td>
                {% for component in components %}
                <td>
                  <!--NEW CODE-->
                    <input type="number" name="score_{{ data.id }}_{{ component.id }}" value="0.0">
                </td>
                {% endfor %}
            </tr>
            {% endfor %}
        </tbody>
    </table>
    </div>
    <div class="buttons is-right is-focused">
        <input class="button" type="submit" value="Submit" />
        <input class="button is-primary is-inverted" type="reset" value="Reset" />
    </div>
</form>

api/routes.py

from flask import request

if form.validate_on_submit():
    period = request.form.get('period')

    for student_data in roster_data:
        student_id = student_data['id']

        for component in components:
            component_id = component.id

            # NEW CODE
            score_key = f"score_{student_id}_{component_id}"
            student_score = request.form.get(score_key)

            new_score = AssessmentScore()
            new_score.period = period
            new_score.component_id = component_id
            new_score.student_id = student_id
            new_score.classroom_id = current_class.id
            new_score.student_score = student_score

            db.session.add(new_score)

    db.session.commit()

In case you missed it, ChatGPT changed one line in my html:
<input type="number" name="score_{{ data.id }}_{{ component.id }}" value="0.0">

and added two lines to my function:
score_key = f"score_{student_id}_{component_id}" student_score = request.form.get(score_key)

So, rather than using append_entry to dynamically create form fields, I would create a form field using HTML and give it a name that corresponded with a student and a component, extract that data from the form and create an affiliated db entry. All other details (classroom, school year, period, etc.) are either handled elsewhere in the form or behind the scenes when accessing current_user data.

**Final Thoughts & Questions *

I know this is not some remarkable algorithmic thinking, but my HTML knowledge is limited to playing in Flask and some freecodecamp modules. I wanted to write about this solution to get feedback as well as to demonstrate how to make this work without copy & pasting code that I didn't understand or trying to learn a new language on the fly.
Some preliminary searching has shown me that WTForms is preferred over HTML forms for several reasons, the most prominent being security. I believe, however, that Flask request, which is used to retrieve the data, has similar security features. I'd love to get some clarity around this as, if this were in production, student privacy is major legal and ethical concern.
Even though for this particular project I wanted to stay within the bounds of my knowledge, I'm curious what other tools or approaches more experienced folks would recommend.
I'm curious if there is a way to do this with WTForms that I missed. I tried using the TableWidget, but I'm a little lost as to its application and if it works on nested forms. On top of that, similar to what I asked in my original post, would contributing to WTForms documentation be a worthwhile endeavor for a newbie? How does one do such a thing? Would there be a need/desire for this kind of functionality (pivot table form thing) in WTForms?

Please let me know your thoughts, if you have any questions and/or if I'm just straight up wrong about something I wrote here. Thank you!

ISO Help: Nested Form Submission in Flask

francheese9289 — Wed, 08 May 2024 22:28:16 +0000

UPDATE: SOLVED: Nested Form Submission in Flask

Note - I'm a new coder, so thanks for bearing with me!

My Project
I'm trying to create an organization centric data entry & analysis site for my capstone project. The parameters are ones that I set based on a real need we had at my last place of employment (public school district).

The Problem
I've been torturing myself trying to build a data-input table for users to enter student scores for various diagnostics/assessments and their individual components (i.e. a certain literacy assessment may test reading and writing separately). I'm working in Flask with Flask Forms and WTForms, my front end is using Bulma CSS.

Well hallelujah I've almost made it, but I have a few issues, the biggest and most immediate is that I can't figure out the syntax for submitting my nested form data.

forms.py

class ComponentForm(Form):
    component_id = HiddenField('Component ID')
    component = HiddenField('Component')
    score = FloatField('Score', default=0.0, widget=NumberInput())

class AssessmentScoreForm(FlaskForm):
    student_id = HiddenField(u'Student ID') 
    assessment_name=HiddenField(u'Assessment Name')
    period = SelectField("Choose an option", validate_choice=False, choices={'1':'fall','2':'winter','3':'spring'}) 
    components = FieldList(FormField(ComponentForm))
    submit = SubmitField()

As it stands, I've been able to render a table that has columns representing each assessment component and rows representing each student. From my page source and from playing around with the labels, I can see that each cell is correctly associated with a student and a component.

Trouble is, when I go to submit, I'm receiving an error regarding the score field, which is in my nested ComponentForm.

Here is my code for rending the page:

data_entry.py

@api.route('/data_entry', methods=['GET', 'POST'])
def data_entry():
    #find current user adn their most recent classroom
    user=current_user
    staff = db.session.scalar(sa.select(Staff).where(Staff.id == user.staff_id))
    current_class = staff.staff_classrooms[-1] #classroom object
    assessment = 'Predictive Assessment of Reading' #will be a variable

    #gather information for all students in that classroom
    students = current_class.class_students
    roster_data = []
    for student in students:
        roster_data.append({
            'id': student.class_student.id,
            'full_name': student.class_student.full_name
        })

    components = db.session.scalars(sa.select(AssessmentComponent).where(AssessmentComponent.assessment_name == assessment).order_by(AssessmentComponent.component_name)).all()
    form = AssessmentScoreForm()
    component_form = ComponentForm()
    for component in components:
        component_form.component_id = component.id
        component_form.component = component.component_name

        form.components.append_entry(component_form)

    for student in students:
        form.student_id.data = student.class_student.id
        if form.validate_on_submit():
            #create score instance and set period, student_id, classroom_id
            for i in enumerate(form.components.entries): 
                new_score = AssessmentScore()
                new_score.student_score = form.components.entries[i]['score'].data #score 
                new_score.period = form.period.data #period
                new_score.component_id = form.components.entries[i]['component_id'].data  #component
                new_score.student_id = student.class_student.id #student
                new_score.classroom_id = current_class.id #classroom

                print (f'score_instance {new_score}')

                db.session.add(new_score)
                db.session.commit()
                flash('Data entered successfully!','success')
                return redirect('main.user', username=user.username)

    return render_template('data_entry.html', form=form, components=components, roster_data=roster_data)

Attempt 1

        if form.validate_on_submit():
            #create score instance and set period, student_id, classroom_id
            new_score = AssessmentScore()
            new_score.student_score = form.score.data #score

Error 1
AttributeError: 'AssessmentScoreForm' object has no attribute 'score'

Attempt 2

if form.validate_on_submit():
            #create score instance and set period, student_id, classroom_id
            for component in form.components:
                new_score = AssessmentScore()
                new_score.student_score = form.components.score.data

Error 2
AttributeError: 'FieldList' object has no attribute 'score'

Attempt 3

        if form.validate_on_submit():
            for i in enumerate(form.components.entries): 
                new_score = AssessmentScore()
                new_score.student_score = form.components.entries[i]['score'].data

Error 3
TypeError: list indices must be integers or slices, not tuple

What Else I've Tried
I've had many other iterations of this and even tried to use Plot.ly Dash to make an editable table, but with my limited knowledge, I'm not sure how to make this work.

Also, there are a TON of questions on stackoverflow regarding WTForms and, specifically, FieldList and FormField, most of them haven't been edited in 8-10 years, haven't been solved and/or aren't addressing the same issue. The WTForms documentation is also lacking in examples and lord help me if I read another tutorial on how to login and logout (jk I'm probably just using the wrong tool).

That being said, I've been hacking at this way too long and would send a million roses (in my thoughts) to whomever can help me out.

p.s.
I'm also open to conversation regarding other tools (what should I learn when I'm done with my course?) and/or alternative strategies/ deeper discussion about the tools I am using. i.e. Is writing documentation for WTForms a thing that would be cool? Would making a new function for forms be worth it? Is there some WTForms/NumPy/Pandas lovechild waiting to be born so the layman can make a silly little table? I'm wide-eyed and curious.

What the heck do y'all do?

francheese9289 — Sat, 04 May 2024 13:13:33 +0000

Hi Dev Community!

Newbie & first time poster here with a question I've been afraid to ask!

What the heck do y'all do?

Some Background

I recently lost a job I loved due to a falling out with my boss of 5 years. I'm currently working on my capstone for a coding bootcamp my employer paid for so I could build them a DB management system.

I wasn't really considering a job in tech when I started the bootcamp or when I left my job. Further, I hear a lot of negative things about entering the tech world and as many encouraging things that I hear too, my throw caution to the wind 20s are behind me and though I have no choice, I'm weary of starting over.

All that being said, I've never had so much intrinsic motivation as I do when I'm programming (or is it coding? Developing? Help!).

So even though I have my doubts- about the job market, my abilities, my social ineptitude and thus lack of coding community- it feels time to peer into the dark, stormy basin of certificates, jargon, acronyms, etc. that is the field.

Question Specifics

I'll take any answer but here's a breakdown of what I'm curious about:

job title
type/industry/sector of company/organization/freelance work
day to day in layman's terms
work environment & work life balance
like it? Love it? Hate it? Is this a stepping stone or where you want to be?
a lil background (years in tech, education, interests, anything you wanna share)

My Thanks

I know I'm not the first one to ask and there are resources online with these answers, so I want to give thanks to anyone taking their time to respond (or read & smile). I can be a fiercely independent learner, so this is some social skills practice for me too. Moreover, all of this is a big change for me and talking to people with real experience is still very intimidating! Thanks all <3