function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Albert RaulAlbert Raul 

Can you show me example, how to use @wire with function with js, html and apex code?

Arun Kumar 1141Arun Kumar 1141
Hello Albert,
Check out the below code for fetching Bank details from Org:
 
JavaScript 
import { LightningElement, track, wire } from 'lwc';

import getBank from '@salesforce/apex/FetchingBankDetails.getBank';

export default class CustomClass extends LightningElement {

@track searchKey;

@track mybank;

@track error;

@wire (getBank,{text:'$searchKey'})

wiredBanks({data, error}){

  if(data){

    this.mybank = data;

    this.error = undefined;

  }

  else{

    this.mybank = undefined;

    this.error = error;

   }

}

handlemyBank(event){

   this.searchKey = event.target.value;

  }

}

Apex Code 
public with sharing class FetchingBankDetails {

 @AuraEnabled(cacheable=True)

 public static List<Bank__c> getBank(String text){

    List<Bank__c> bList = [SELECT id, Name, Bank_Name__c FROM Bank__c WHERE Name LIKE :'%'+text+'%'];
 
    return bList;

   }
 
Html Code 
<template>

  <lightning-card>

    <b>CA Bank with function</b>

    <div>

     <lightning-input label="My Bank Details" onchange={handlemyBank}></lightning-input>

       <template if:true={mybank}>

         <template for:each={mybank} for:item="b">

           <lightning-layout key={b.Id}>

               <li>{b.Name}</li>

               <li>{b.Bank_Name__c}</li>

          </lightning-layout>

       </template>

     </template>

   </div>

  </lightning-card>

</template>

If you find this helpful, please mark it as the best answer.
Thank you.
Albert RaulAlbert Raul
Hey thanks arun
SubratSubrat (Salesforce Developers) 
Hello Albert ,

Here's an another example of how you can use the @wire decorator in JavaScript, along with Apex code and HTML markup.

HTML Markup (example.html): 
<template>
  <lightning-card title="User Information">
    <div class="slds-p-around_medium">
      <template if:true={user.data}>
        <div>
          <p>First Name: {user.data.FirstName}</p>
          <p>Last Name: {user.data.LastName}</p>
          <p>Email: {user.data.Email}</p>
        </div>
      </template>
      <template if:false={user.data}>
        <p>Loading user information...</p>
      </template>
    </div>
  </lightning-card>
</template>


JavaScript Code (example.js): 
import { LightningElement, wire } from 'lwc';
import getUserInfo from '@salesforce/apex/UserController.getUserInfo';

export default class ExampleComponent extends LightningElement {
  @wire(getUserInfo) user;
}


Apex Code (UserController.cls): 
public with sharing class UserController {
    @AuraEnabled(cacheable=true)
    public static User getUserInfo() {
        return [SELECT Id, FirstName, LastName, Email FROM User WHERE Id = :UserInfo.getUserId()];
    }
}
In this example, we have an LWC component (ExampleComponent) that uses the @wire decorator to fetch user information from the getUserInfo Apex method. The user information is then displayed in a Lightning Card component in the HTML template.

The getUserInfo method in the Apex controller retrieves the user's first name, last name, and email based on the current user's ID.

Note that you need to make sure that the Apex method is marked as @AuraEnabled and cacheable=true to leverage the @wire functionality.


If the above example helps , please mark this as Best Answer.
Thank you.