Populate Apex Inner Class Variables in Lightning Web Component

Question

Need a help in Lightning Web Components. I am working on an assignment where I need to get some values from the UI, populate it on an inner class variables defined in an Apex class and then make a web service call. I have built the UI portion with local variables and I see that it is working.

My class definition is something like the one shown below.

public class TaskHeader {

    @AuraEnabled public String taskName;

    public class TaskDetails {
        @AuraEnabled public String taskDetailName;
        @AuraEnabled public Integer taskDetailSeq;
        @AuraEnabled public String taskDescription;
    }
}

In the .js file, I am not sure how to import these variables. I tried the following solutions and it did not work.

import TASKNAME_FIELD from '@Salesforce/schema/TaskHeader.taskName';
import TASKDETAIL_FIELD from '@Salesforce/schema/TaskHeader.TaskDetails.taskDetailName';
import TASKDETAILSEQ_FIELD from '@Salesforce/schema/TaskHeader.TaskDetails.taskDetailSeq';
import TASKDESCRIPTION_FIELD from '@Salesforce/schema/TaskHeader.TaskDetails.taskDescription';

I tried replacing the schema with apex and it did not work either. I am getting the below error message when I try to deploy the source into the Org.

> force-app/main/default/lwc/TaskComponent/TaskComponent.js  Exception
> while getting the LWC bundle for reference
> @Salesforce/schema/TaskHeader.TaskDetails.taskDetailName of type
> module in file TaskComponent.js

Can someone help?

Below is the sample code for the Apex method that calls the Soap API.

@AuraEnabled
public static String createTask(String strAction) {
}

It is a Soap API and hence strAction contains the Envelope and the Body of the message which contains the info about the TaskHeader and TaskDetails.

Answer 1

There is already a comprehensive example in the Trailhead Recipes repo for this use case.

Here is a documented example in the repo.

I will repeat it here for ease

Here is the apex class returning a wrapper

public with sharing class ApexTypesController {
@AuraEnabled(cacheable=true)
public static String checkApexTypes(CustomWrapper wrapper) {
    // Using System.debug() isn't good practice for production applications.
    // It's used here to showcase how the received data looks like in Apex.
    System.debug(wrapper);
    // The values are based on the data that is defined in the
    // apexImperativeMethodWithComplexParams Lightning web component.
    String response =
        'You entered "' +
        wrapper.someString +
        '" as String, and "' +
        wrapper.someInteger +
        '" as Integer value. The list contained ' +
        wrapper.someList.size() +
        ' items.';
    return response;
  }
}

---

Wrapper class

public with sharing class CustomWrapper {
class InnerWrapper {
    @AuraEnabled
    public Integer someInnerInteger { get; set; }
    @AuraEnabled
    public String someInnerString { get; set; }
}

@AuraEnabled
public String someInteger { get; set; }
@AuraEnabled
public String someString { get; set; }
@AuraEnabled
 public List<InnerWrapper> someList { get; set; }
}

The front end code

import { LightningElement, track } from 'lwc';
import checkApexTypes from '@salesforce/apex/ApexTypesController.checkApexTypes';

 export default class ApexImperativeMethodWithComplexParams extends 
 LightningElement {
   listItemValue = 4;
   numberValue = 50;
   stringValue = 'Some string';

  @track message;
  @track error;

  handleStringChange(event) {
    this.stringValue = event.target.value;
 }

 handleNumberChange(event) {
    this.numberValue = event.target.value;
 }

 handleListItemChange(event) {
    this.listItemValue = event.target.value;
 }

 handleButtonClick() {
    // Creating the object that represents the shape
    // of the Apex wrapper class.
    let parameterObject = {
        someString: this.stringValue,
        someInteger: this.numberValue,
        someList: []
    };
    // Populating a list
    for (let i = 0; i < this.listItemValue; i++) {
        parameterObject.someList.push({
            someInnerString: this.stringValue,
            someInnerInteger: this.numberValue
        });
    }

    // Calling the imperative Apex method with the JSON
    // object as parameter.
    checkApexTypes({ wrapper: parameterObject })
        .then(result => {
            this.message = result;
            this.error = undefined;
        })
        .catch(error => {
            this.message = undefined;
            this.error = error;
        });
    }
 }

Notice that there is a changeHandler attached in the HTML input to capture any change

Answer 2

You don't need to import the type details at all; if you have an Aura Enabled method that takes the object as a parameter, or as a return type, you simply use JavaScript object notation when accessing or sending such an object:

taskDetails.taskDetailName = 'abc';
const seq = taskDetails.taskDetailSeq;

myAuraEnabledMethod({ taskDetailName: 'abc', taskDetailSeq: 10, taskDescription: 'blah'});

I'm not clear what you mean by having a Soap API invoked from an LWC...?