0

So I am extremely new when it comes to working with @wire and @track. I have tried to use the code from the web (But it is older due to the @track decorator). I would like to also refactor the code with the @wire.

I am trying to create a case from an account management page within an Experience Cloud site.

Can someone please let me know why this code doesn't do anything?

<template>
  <h1>Create a new case</h1>
  <lightning-card title={title} icon-name="standard:record">
      <div class="slds-m-around_medium">
          <lightning-input label="Case Subject" onchange={handleChange} class="slds-m-bottom_x-small"></lightning-input>
          <lightning-input label="Case Description" onchange={handleChange} class="slds-m-bottom_x-small"></lightning-input>
          <lightning-button label={buttonlabel} variant="brand" onclick={submitCase}></lightning-button>
      </div>
  </lightning-card>
</template>
import {
  LightningElement,
  track,
  api
} from 'lwc';
import {createRecord} from 'lightning/uiRecordApi';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
import CASE_OBJECT from '@salesforce/schema/Case';
import SUBJECT_FIELD from '@salesforce/schema/Case.Subject';
import DESC_FIELD from '@salesforce/schema/Case.Description';
import STATUS_FIELD from '@salesforce/schema/Case.Status';
import ORIGIN_FIELD from '@salesforce/schema/Case.Origin';

export default class WealthCreateCaseDemo extends LightningElement {

  @api title;
  @api buttonlabel;

  @track subject = '';
  @track desc = '123234345345';

  handleChange(event) {
      if (event.target.label === 'Case Subject') {
          this.subject = event.target.value;
      }
      if (event.target.label === 'Case Description') {
          this.desc = event.target.value;
      }
  }
  submitCase() {
      const fields = {};
      fields[SUBJECT_FIELD.fieldApiName] = this.subject;
      fields[DESC_FIELD.fieldApiName] = this.desc;
      fields[STATUS_FIELD.fieldApiName] = 'New';
      fields[ORIGIN_FIELD.fieldApiName] = 'Web';

      const recordInput = {
          apiName: CASE_OBJECT.objectApiName,
          fields
      };
      createRecord(recordInput)
          .then(result => {this.dispatchEvent(
                          new ShowToastEvent({
                              title: 'Success',
                              message: 'Case is submitted : ' + this.case.id,
                              variant: 'success',
                          }),
                      );
              })
          .catch(error => {
              this.dispatchEvent(
                  new ShowToastEvent({
                      title: 'Error creating record',
                      message: error.message,
                      variant: 'error',
                  }),
              );
          });
  }
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
    <apiVersion>47.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Case Create</masterLabel>
    <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightningCommunity__Default">
            <property name="title" type="String" default="Submit Case"></property>
            <property name="buttonlabel" type="String" default="Submit Case"></property>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>
1
  • 1
    Have you already considered using the Create Case Form plus a quick action to do this? Then you wouldn't need an LWC at all. Aug 4, 2023 at 16:08

1 Answer 1

0

When in the .then() block it tries to create the toast event, this.case is undefined, so trying to read the property id results in an error like

Cannot read properties of undefined (reading 'id')

If you want to show the id of the newly created record, you should use result.id

createRecord(recordInput)
    .then((result) => {
        this.dispatchEvent(
            new ShowToastEvent({
                title: 'Success',
                message: 'Case is submitted: ' + result.id,
                variant: 'success'
            })
        );
    })
    .catch((error) => {
        this.dispatchEvent(
            new ShowToastEvent({
                title: 'Error creating record',
                message: error.message,
                variant: 'error',
            }),
        );
    });

By the way, there is no need to use @track for subject and desc.
Moreover if you want to have a single handleChange method, you could add a data-* attribute with the name of the instance property to the lightning-input element, this way you will be able to avoid the if-else block:

HTML

<lightning-input data-property="subject" label="Case Subject" onchange={handleChange} class="slds-m-bottom_x-small"></lightning-input>
<lightning-input data-property="desc" label="Case Description" onchange={handleChange} class="slds-m-bottom_x-small"></lightning-input>

JS

handleChange(event) {
    const propertyName = event.target.dataset.property;
    this[propertyName] = event.target.value;
}

Please note that you could also use a lightning-record-form or a lightning-record-edit-form to create a new record. Take a look at Create a Record documentation page.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .