• Kent Heberling 24
  • NEWBIE
  • 0 Points
  • Member since 2016
  • Salesforce Engineer
  • Twitch

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 0
    Questions
  • 2
    Replies
Hello All,
I am currently looking into Lightning Web Components and have hit a wall. I have a wire decorator that calls to an apex function returning a wrapper class. This Wrapper actually contains a Wrapper that contains a Wrapper, so it is nested 3 times. What I would like to do is updated a field on the 3rd Wrapper when a checkbox is checked or unchecked.

important HTML:
<template if:true={progWrap.progList}>
                    <template for:each = {progWrap.progList} for:item = "prog">
                        <tr key = {prog.progAuth.Id} >
                            <td>{prog.programName}</td>
                            <td>{prog.programCountry}</td>
                            <template if:true={prog.checkboxes}>
                                <template for:each={prog.checkboxes} for:item="checkbox">
                                    <template if:true={checkbox.visible}>
                                        <td key={checkbox.section}><lightning-input type="checkbox" value={checkbox.section} checked={checkbox.checked} data-prog-name ={prog.programName} onchange={handleCheckboxChange}></lightning-input></td>
                                    </template>
                                    <template if:false={checkbox.visible}>
                                        <td key={checkbox.section}>-</td>
                                    </template>
                                </template>
                            </template>
                        </tr>
                    </template>
                </template>

JS:
import { LightningElement, api, track, wire } from 'lwc';
import initWrapper from '@salesforce/apex/programAuthComponentController.initWrapper';

export default class programAuthWebComponent extends LightningElement {
    
    @api recordId;
    @track progWrap;
    @track error;
    @wire(initWrapper, {accId: '$recordId'}) 
    progWrapper({
        error,
        data
    }){
        if(data){
            this.progWrap = data;
        }
        else{
            this.error = error;
        }
    }

    handleCheckboxChange(event){
        var checkValue = event.target.value;
        var checkValue2;
        var programName = event.target.dataset.progName;

        if(checkValue === 'Spring / Semester 1'){
            checkValue = 'Spring';
            checkValue2 = 'Semester 1';
        }
        else if(checkValue === 'Fall / Semester 2'){
            checkValue = 'Fall';
            checkValue2 = 'Semester 2';
        }

        for(let i = 0; i < this.progWrap.progList.length; i++){
            if(this.progWrap.progList[i].programName === programName){
                //console.log(this.progWrap.progList[i].checkboxes.length);
                for(let j = 0; j < this.progWrap.progList[i].checkboxes.length; j++){
                    if(this.progWrap.progList[i].checkboxes[j].section === checkValue){
                        console.log(JSON.stringify(this.progWrap.progList[i].checkboxes[j]));
                        this.progWrap.progList[i].checkboxes[j].checked = true;
                    }
                }
            }
        }
    }
}

Apex Wrappers:
public class wrapperClass{
        @AuraEnabled public List<progAuthWrapperClass> progList{get;set;}
        @AuraEnabled public List<String> sections{get;set;}
        @AuraEnabled public List<String> modifiedSections{get;set;}
    }

    public class progAuthWrapperClass{
        @AuraEnabled public String programName {get;set;}
        @AuraEnabled public String programCountry {get;set;}
        @AuraEnabled public Program_Authorization__c progAuth {get;set;}
        @AuraEnabled public Boolean updated {get;set;}
        @AuraEnabled public Set<String> avaliableTerms {get;set;}
        @AuraEnabled public List<checkboxWrapper> checkboxes {get;set;}
    }

    public class checkboxWrapper{
        @AuraEnabled public Boolean visible {get;set;}
        @AuraEnabled public Boolean checked {get;set;}
        @AuraEnabled public String section {get;set;}
    }

    @AuraEnabled(cacheable=true)
    public static wrapperClass initWrapper(Id accId){
        wrapperClass returnWrapper = new wrapperClass();
        returnWrapper.sections = returnSections();
        returnWrapper.modifiedSections = returnModifiedSections(returnWrapper.sections);
        returnWrapper.progList = returnPrograms(accId);
        return returnWrapper;
    }
The UI Looks like this currently (this is a work in progress):

User-added image

Essentially what we want to have happen is when on of these checkboxes is clicked, it updates the checked boolean on the checkboxWrapper. I thought I could update the this.progWrap.progList[i].checkboxes[j].checked in my for loop but everytime I do this I get an error from salesforce that says this: ['set' on proxy: trap returned falsish for property 'checked'].

This may be too much information but really my question is, what does that mean? and How do I actually update this field?

Thank you all for any help!
Hi 
I am doing Superbadge Advanced Apex Specialist. I have completed 7 steps successfully. I am doing development in developer console. 
When I am clicking on check challenge on step 8 I am getting below error
User-added image

As all other chalenges are already completed how can i fix the issue because i am unable to retake those steps again (I am not getting any option to check chalange for completed chalenges). I am also not having previous code as I am doing development in developer console.

I am ready to retake all changes again but how can I do it without creating other trailhead account.