1

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.

  • Can you also add the apex method you have currently now ? I have not tried this but i think all you need is an object and then use JSON.parse() to create the final object and send to apex method – Mohith Shrivastava Feb 13 at 18:25
  • Added Apex Method to the original post. It is nothing fancy, but a method call to call a Soap API. – Balaji Pooruli Feb 13 at 18:36
  • You are going to have to call Apex imperatively with the three JS values directly. You can't use import statements like that for code. Only for objects, so the Lightning Data Service won't help here and you don't need to make those variables @AuraEnabled unless you send data TO the component. Try calling apex, and let us know if you get stuck trying to do so. – Sebastian Kessel Feb 13 at 18:41
  • @BalajiPooruli Check my response and let me know if thats not what you were looking for ? – Mohith Shrivastava Feb 13 at 19:50
0

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

| improve this answer | |
  • 1
    Thanks for your help. I tried to find similar info in youtube videos and I could not find much. I will try this and see how it goes. – Balaji Pooruli Feb 13 at 19:56
  • I am looking for a solution like the one you have posted. I will try this and see how it goes. – Balaji Pooruli Feb 13 at 20:17
  • Hi @Mohith Shrivastava, need one more help on this. In the above example, the outer class has a list of inner class items defined. However, in my case, the inner class is not a list, so, I don't think I need to use the push method as it is used for populating an array of items. How do I populate my inner class variables in my case? Sorry, I am not a web dev, so javascript is kinda new to me. – Balaji Pooruli Feb 14 at 17:08
  • It will just be a regular javascript variable. Just assign as you assign other objects. – Mohith Shrivastava Feb 14 at 19:35
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...?

| improve this answer | |
  • The AuraEnabledMethod in the Apex Class is making a callout to a Soap API. I am getting the values from the UI using event.target.value and assigning them to individual variables as agTaskHeaderName, agTaskDetailName etc. Can I directly use them while calling the AuraEnabledMethod? If necessary, I can create one more AuraEnabledMethod to take the values entered from the screen, that constructs an instance of TaskHeader class and then serialize it to make it a String so that I can pass it to the method that is calling the API. What is the purpose of Const seq? – Balaji Pooruli Feb 13 at 19:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.