1

I have made my research, but couldn't find the answer.

I have a Lightning App in Salesforce, I used LWC Js and Apex. In one part of the app the user can add a 'desk item' (by typing its name) and select from a checkbox 1-2 items to add them to the 'desk'.

I used Apex to transfer the value of the 'desk item' to an Object and I can show it in a list (in the app).

How can I add the checkbox value(s) to the submitDesk(){...} so it sends its value(s) along with the 'desk item' value?
I don' know where/how exactly to add and to get it back?

The JS Code

import { LightningElement, track } from 'lwc';
import createDesk from '@salesforce/apex/FlexOfficeController.createDesk';
import getDesks from '@salesforce/apex/FlexOfficeController.getDesks';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class DeskList extends LightningElement {

// Desk

    @track data_desks = [];
   
    //table to show the desks's Id + Name, and the checkbox
    columns = [
        { label: 'Id', fieldName: 'Id', type: 'text' },
        { label: 'Name', fieldName: 'Name', type: 'text' },
        { label: 'Accessories', fieldName: **the checkbox value**, type: 'text' }
    ];

    // value to the picklist
    connectedCallback(){
            this.retreiveDesk();
    }


    retreiveDesk(){
        getDesks({})
        .then(d => {
            this.data_desks = JSON.parse(d);
        })
    }
    
    desk = {};
    changeValue(event){
        this.desk[event.target.name] = event.target.value
    }

    submitDesk(){

        console.log(this.desk, this.value + 'Hi there');
        createDesk({desk:JSON.stringify(this.desk)})
        .then(data=> {
            console.log(data + 'hello');
            this.retreiveDesk();
            // toaster
            const evt = new ShowToastEvent({
                title: "New desk",
                message: `succefully created. Check out your reservation.`,
                variant: "success"
            })
            this.dispatchEvent(evt);
        })
    }


// Checkbox

    value = [];

    get options() {
        return [
            { label: 'Mouse', value: 'mouse' },
            { label: 'Screen', value: 'screen' },
        ];
    }

    // put the checkbox values into a string ('join')
    get checkboxValues() {
        console.log(this.value);
        return this.value.join(',');
    }

    handleCheckboxChange(event) {
        this.value = event.detail.value;
    }
}

Apex Controller

public class FlexOfficeController {
   
    @AuraEnabled
    public static string createDesk(String desk){
        try {
            Desk__c d  = (Desk__c)JSON.deserialize(desk, Desk__c.class);
            insert d;
            return d.id;
        } catch (Exception e) {
            throw new AuraHandledException(e.getMessage());
        }
    }

    @AuraEnabled
    public static string getDesks(){
        try {
            List<Desk__c> desks = new List<Desk__c> ();
            desks = [SELECT Id, Name FROM Desk__c];
            return JSON.serialize(desks);
        } catch (Exception e) {
            throw new AuraHandledException(e.getMessage());
        }
    }
}

HTML

<template>
    <lightning-card>
        <div class="slds-m-around_medium slds-theme_alert-texture">
            <lightning-input name="Name" label="Name your desk" onchange={changeValue}></lightning-input>
            <lightning-checkbox-group name="Accessories" label="Checkbox Group" options={options} value={value}
                onchange={handleCheckboxChange}></lightning-checkbox-group>
            <p>{checkboxValues}</p>
            <lightning-button onclick={submitDesk} label="Submit"></lightning-button>
            <lightning-datatable key-field="id" data={data_desks} columns={columns} hide-checkbox-column></lightning-datatable> 
        </div>
    </lightning-card>
</template>

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.