Welcome to my world

Hi, I’m Godwin Mbah
a Salesforce Developer Salesforce Sr. Admin Salesforce Consultant Business Analyst

As a Certified Salesforce Consultant, Senior Administrator, and Developer, I possess over 6 years of comprehensive experience in full-stack Salesforce configuration, integration, and implementation of Salesforce cloud technologies. With a proven track record of success in enterprise-level environments, I am committed to delivering high-quality Salesforce solutions that drive digital transformation and enhance business performance.

What i Can do for you

Salesforce Services

Consultation & Implementation

Carry out Business Analysis to understand the current state of your Salesforce deployment and [......] CLICK TO KNOW MORE

Salesforce Development

Everything regarding your project from development, testing and delivery I will handle, while [......] CLICK TO KNOW MORE

Salesforce Integration

Connecting your Salesforce instance with external systems you use with secure APIs and also [......] CLICK TO KNOW MORE

Salesforce Administraton

Management and configuration of your Salesforce instance, build complex reports and dashb [......] CLICK TO KNOW MORE

Support & System Maintenance

Ensure optimal Salesforce performance and longevity with expert support and system maintenance.

Salesforce Training

Do you want training for your Salesforce users? Or if you want to become a Salesforce Developer or Administrator, I will be your instructor.

strong Hands-On Expertise In these Products

Salesforce Solutions

Sales Cloud

CLICK HERE: See My Complete, Step-By-Step Implementation Approach.

Sales Cloud

Accelerate sales with Salesforce's intuitive Sales Cloud platform

Click Here

Service Cloud

CLICK HERE: See My Complete, Step-By-Step Implementation Approach.

Service Cloud

Elevate service quality with Service Cloud solutions.

Click Here

Experience Cloud

CLICK HERE: See My Complete, Step-By-Step Implementation Approach.

Experience Cloud

Empower customer and partner engagement with Experience Cloud.

Click Here

A simple, Concise, and efficient approach

Project Journey Lifecycle

The Project Journey Lifecycle section outlines the various stages of my implementation process. From Discovery to Support & Maintenance, each stage is critical in ensuring project success. By following this lifecycle, I help clients achieve their business goals and objectives by providing a comprehensive, customized solution that meets their specific needs.

PHASE 1Understanding Client Pain Points & Challenges

BUSINESS DISCOVERY

First, I get to know your business needs and goals.
Then, I analyze and identify opportunities for improvement.

Define your business objectives and goals for the project.
Conduct a thorough analysis of your current processes and systems.
Identify pain points and areas for improvement in your current workflows.
Determine opportunities for optimization and increased efficiency.

PHASE 2Design A Custom Solution For You

DESIGN & PLANNING

In the Design & Planning stage, I create a comprehensive plan to guide the implementation process and ensure project success.

Develop a customized implementation strategy tailored to your business needs.
Create a project plan with timelines, milestones and all key deliverables.
Define roles and responsibilities for each team member.
Provide detailed documentation and specifications for the implementation.

PHASE 3Build Custom Business Solutions

PROJECT DEVELOPMENT

In the Development stage, I execute the implementation plan and build the solution based on the project specifications and requirements.

Implement the solution based on the project specifications.
Develop and configure customizations and integrations.
Perform unit and integration testing to ensure quality.
Collaborate with your team to ensure a smooth rollout.

PHASE 4Proper Testing of Your Solution

UNIT & USER ACCEPTANCE TESTING (UAT)

In the Testing (Unit & UAT) stage, I perform thorough testing to ensure that the solution is functioning as expected and meets your business needs.

Conduct comprehensive unit testing to ensure quality.
Develop test plans and scenarios for User Acceptance Testing (UAT).
Collaborate with your team to execute UAT.
Identify and resolve any issues or bugs.

PHASE 5Deploy Solution To Your Production Environment

DEPLOY & LAUNCH

In the Deploy & Launch stage, I implement the solution and ensure a smooth rollout, providing support and training as needed to ensure user adoption.

Deploy the solution to your production environment.
Conduct end-to-end testing to ensure seamless integration.
Provide training and support to ensure user adoption.
Ensure a smooth transition to the new solution.

PHASE 6Continue To Support You Even After Project

CONTINOUS SUPPORT & MAINTENANCE

In the Support & Maintenance stage, I provide ongoing support to ensure the solution remains functional and up-to-date with the latest upgrades and enhancements.

Provide timely support and issue resolution.
Monitor and maintain the solution to ensure optimal performance.
Perform regular updates and upgrades to keep the solution current.
Continuously evaluate and improve the solution based on feedback.

Schedule An Appointment Today
Free One-To-One Call

Visit my portfolio and keep your feedback

View Recent Projects

What Clients Say About My Work

Client Reviews

"We have an amazing experience with Godwin He is dependable, knowledgable and understood what we were aiming for. Highly recommend!"

"Execution, adherence to schedule and quality all deserve 5 stars. However, the great thing about working with Godwin is that he does not just execute, but he also consults on the project and even the overall business ideas"

"Godwin was great to work with. He quickly understood what I needed to be completed and finished quickly and got it done right the first time. Will be using him again and would highly recommend."

"Godwin is very good at what he does. I was under a lot of pressure to complete a salesforce migration with very tight deadlines. I wouldn't have been able to complete the project without Godwin."

"Godwin did a great job fixing our Quickbooks/Salesforce integration. He jumped right in, found the problem and implemented a solution within just a few hours. Will definitely work with Godwin again. Highly recommend."

"Godwin rules! He understood my requirements, asked great questions, and delivered ahead of an already-tight schedule. 10/10. What a Salesforce hero."

Give me a call, Send me an email or Schedule an appointment

Let's Connect Today

Godwin Mbah

Salesforce Consultant | Developer | Admin

I am open to accepting contract and freelance work, including both small, short-term projects and larger, long-term engagements.

Phone: +971547684659 Email: mbahgodwin24@gmail.com

Visit my blog and keep your feedback

My Blog

March 4, 2023

Reusable Custom Calendar LWC Using FullCalendar JS Library

We needed a calendar to show information like event information, opportunity closing deadlines, customer verification deadline dates, etc. We can use Salesforce Calendars to show these data when information is available in Salesforce objects. If we have temporary data to show then we need some components.

We have a few limitations in Salesforce Calendars as well like the maximum number of events on the calendar is 150 and we can not hide weekends from it. See all limits here Considerations for Using Events and Calendars in Lightning Experience.

Let us create Lightning Web Component which is reusable and we can use it inside other lightning components as well as in lightning experiences like Lightning App Builder.

We are going to use the FullCalendar Js library to create a reusable lightning web component. The below steps are required to implement this library in LWC.

Download and add JS library in Static Resource
Create reusable LWC
Test reusable LWC

1. Download and add JS library in Static Resource

The latest build of the FullCalendar JS library is not compatible with LWC. We can use versions 3 and 4 to implement it. I have used v3.10.0 and it is available at FullCalendar

Upload this JS library in Static resource with the name fullcalendarv3. It should be available to the public.

2. Create reusable LWC

Let us create a reusable component that will get records/data from the caller component and Lightning App Builder page. For this, we need public properties which will set data in the calendar component.

We can also raise events to be handled by caller components like event click, event selection, etc. In this component, I have raised eventclicked event which will be handled in the child/caller component. Similarly, you can raise other events as well for the caller component. They can handle that event based on their requirement.

Properties events and eventDataString are created for assigning event data in the calendar. Property events is assigning event data in calendar events. This will be used by the caller component to pass array data. As this property is reactive it will update event data whenever events data are changed in the caller component.

Property eventDataString will be used to pass a string into the calendar. This property will convert the string to a JS array and then assign it to the calendar’s event property. This will be used in the Lightning App Builder page to pass event data in string format.

See block code below to better understand programatically

<template>
    <div style="background:#ffffff;" class="slds-grid">
      <div id="calendar" class="fullcalendarjs"></div>
    </div>
</template>

import { LightningElement,api,track } from 'lwc';
import FullCalendarJS from '@salesforce/resourceUrl/fullcalendarv3';
import { loadStyle, loadScript } from 'lightning/platformResourceLoader';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class Calender extends LightningElement {
    jsInitialised = false;
    @track _events;

    @api
    get events() {
        return this._events;
    }
    set events(value) {
        this._events=[...value];
    }


    @api
    get eventDataString() {
        return this.events;
    }
    set eventDataString(value) {
        try
        {
            this.events=eval(value);
        }
        catch{
           this.events=[];
        }
    }

  renderedCallback() {

    // Performs this operation only on first render
    if (this.jsInitialised) {
      return;
    }
    this.jsInitialised = true;

    Promise.all([
      loadScript(this, FullCalendarJS + '/FullCalenderV3/jquery.min.js'),
      loadScript(this, FullCalendarJS + '/FullCalenderV3/moment.min.js'),
      loadScript(this, FullCalendarJS + '/FullCalenderV3/fullcalendar.min.js'),
      loadStyle(this, FullCalendarJS + '/FullCalenderV3/fullcalendar.min.css')
    ])
    .then(() => {
      this.initialiseCalendarJs();
    })
    .catch(error => {
        alert(error);
        new ShowToastEvent({
            title: 'Error!',
            message: error,
            variant: 'error'
        })
    })
  }

  initialiseCalendarJs() { 
    var that=this;
    const ele = this.template.querySelector('div.fullcalendarjs');
    //Use jQuery to instantiate fullcalender JS
    $(ele).fullCalendar({
      header: {
          left: 'prev,next today',
          center: 'title',
          right: 'month,basicWeek,basicDay'
      },
      defaultDate: new Date(),
      navLinks: true, 
      editable: true,
      eventLimit: true,
      events: this.events,
      dragScroll:true,
      droppable:true,
      weekNumbers:true,
      selectable:true,
      //eventClick: this.eventClick,
      eventClick: function (info) {
        const selectedEvent = new CustomEvent('eventclicked', { detail: info.Id });
        // Dispatches the event.
        that.dispatchEvent(selectedEvent);
        }
    });
  }
}

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Generic Calender</masterLabel>
    <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__Tab</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__AppPage, lightning__HomePage, lightning__RecordPage">
            <property name="eventDataString" type="String" />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

targetConfig is required to pass data from the lightning app builder so create it in the meta.xml file.

3. Test reusable LWC

As we have built our reusable LWC component, let us consume this component. As mentioned, We can consume this component from another component as well as the lightning app builder page.

1. Test by using it in another LWC

Let us consume created calendar component in another component which is showing event records. Based on our requirement we can retrieve data from any object and show it on the calendar.

LWC Code

<template>
    <c-calender events={events} oneventclicked={handleEvent}></c-calender>

    <!-- Open a modal with event data  -->
   <template if:true={openModal}>
       <div data-modal="custom-modal" class="modalclass">
            <section
            role="dialog"
            tabindex="-1"
            aria-labelledby="modal-heading-01"
            aria-modal="true"
            aria-describedby="modal-content-id-1"
            class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">
                <header class="slds-modal__header">
                    <lightning-button-icon icon-name="utility:close" 
                                            class="slds-modal__close " 
                                            alternative-text="Close" 
                                            title="Close"
                                            size="large"
                                            variant="bare-inverse"
                                            onclick={handleCancel} >
 
                    </lightning-button-icon>
                </header>
                <div class="slds-modal__content slds-p-around_medium"
                    id="modal-content-id-1">
                    <lightning-input label="Title" name="title" type="text" required value={title} onkeyup={handleKeyup}></lightning-input>
                    <lightning-input label="Start Date" name="start" type="datetime" required value={startDate}></lightning-input>
                    <lightning-input label="End Date" name="end" type="datetime" required value={endDate}></lightning-input>
                </div>
                <footer class="slds-modal__footer">
                    <lightning-button-group>
                        <lightning-button label="Close" title="Close" icon-name="utility:close" onclick={handleCancel}></lightning-button>
                     </lightning-button-group>
                     
                </footer>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
       </div>
    </template>
</template>

import { LightningElement,track,wire } from 'lwc';
import getEvents from '@salesforce/apex/EventController.getEvents';

export default class CalenderTest extends LightningElement {
  @track startDate=new Date();
  @track endDate;
  error;
  openModal = false;
  @track events=[];
  @wire(getEvents)
    eventObj(value){
        const {data, error} = value;
        if(data){
            //format as fullcalendar event object
            let records = data.map(event => {
                return { Id : event.Id, 
                        title : event.Subject, 
                        start : event.StartDateTime,
                        end : event.EndDateTime,
                        allDay : event.IsAllDayEvent};
            });
            this.events = JSON.parse(JSON.stringify(records));
            this.error = undefined;
        }else if(error){
            this.events = [];
            this.error = 'No events are found';
        }
   }
    handleEvent(event) {
      var id=event.detail;
      let task = this.events.find(x=>x.Id=id);
      this.startDate=task.start;
      this.title=task.title;
      this.endDate=task.end;
      this.openModal = true;
      
    }
    handleCancel(event) {
      this.openModal = false;
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Calender Test</masterLabel>
    <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__Tab</target>
    </targets>
</LightningComponentBundle>

Apex Code

public class EventController {
    @AuraEnabled(cacheable=true)
    public static List<Event> getEvents() {
        return [SELECT Id, Subject, StartDateTime, IsAllDayEvent, EndDateTime 
                FROM Event 
                ORDER BY CreatedDate DESC
                LIMIT 100];
    }
}

I am getting event data using LWC apex, these data can be taken from any object. After retrieving apex data create a JS array in the format of FullCalendar event data.

2. Test by using it on Lightning App Builder Page

We can add the above-created generic component to the lightning app builder age and put calendar events as string. This will render event detail on the component. This will be useful when you have fixed events for any work. Below is a sample JSON string.

[	
	{
        title: 'Front-End Conference',
        start: '2022-09-16',
        end: '2022-09-18'
    },
    {
        title: 'Hair stylist with Mikes',
        start: '2022-09-20',
        allDay: true
    },
    {
        title: 'Car mechanic',
        start: '2022-09-14T09:00:00',
        end: '2022-09-14T11:00:00'
    },
    {
        title: 'Dinner with Garav',
        start: '2022-09-21T19:00:00',
        end: '2022-09-21T22:00:00'
    },
    {
        title: 'Chillout',
        start: '2022-09-15',
        allDay: true
    }
]

Add this JSON string into the eventStringData property to show events as a calendar.

March 4, 2023

When To Avoid Batch Apex And Use Queueable Apex In Salesforce

Salesforce has four asynchronous apex ( Queueable Apex , Scheduled Apex, Batch Apex, Future Methods) to run code asynchronously to handle different need of business application. These apex is used for syncing data in two systems, handling longer jobs which will hit Salesforce Governor limits. This asynchronous apex can be used in different use case. This post is to explain where to avoid batch apex and use Queueable Class instead. Although there are lot of use cases where batch job is sufficient to handle processing.

This post will explain how to handle callout issue You have uncommitted work pending. Please commit or rollback before calling out

Use Case To Solve:

We have around 30K+ account records of health care providers, we need to validate address of all records using address API (any API like SmartyStreet, Google Places, ZipCode ). After API call we need to update record with outcome of API call like address validation is successful or failed in ValidationStatus field. ValidationStatus is custom field in account object. All health care data are stored in account object.

Solution:

To solve this use case we can use batch apex which will handle 200 records (100 in case of callout in batch) in a single batch and batch job will be created for all records. As it will run in batch, we have to put some condition in batch SOQL so that it will not process same record again and again. So we can use query like

Select id, ValidationStatus__c from Account where ValidationStatus__c=false

This will only process record which is pending but there is another problem with this approach. As validation is not successful due to some reason that record will be pending and same records will be fetched in each job for process. This issue we can handle using adding another filter last modified date in SOQL

SOQL in Asynchronous Apex gives us the advantage of higher governor limits

Select id, ValidationStatus__c from Account where ValidationStatus__c=false and LastModifiedDate<>TODAY

Using this batch it will solve issue of not processing same record again and again. We will face another problem after that is , if we want to re-process pending record or error records after correction, it will not re-process those record on same day.

So what will be efficient solution for our use case. Can we use another asynchronous apex as we have lot of records to process? Yes, we have to use another asynchronous apex Queueable to handle this. We can query all pending records in one parent queueable class and then process records in another queueable class which will support callout. We will run chain of Queueable child class to process 100 records at once. Once 100 records are processed, start another queueable child job. This way we can call external system and make list of records to update before we start another job. This way we can avoid uncommitted work pending issue also.

Uncommitted work pending issue throws when we are calling external system and then updating response in object, when system start processing next record, previous records is still pending for commit so we get that error. This issue will be address by below approach

We will call external callout for reach record one by one
We will not update records immediately, instead we will add all records in collection
Once 99 records are processed, we will start new queueable job for processing another set of 99 records
Before we start new batch, we will update all records for status update.

Above approach will handle issue uncommitted work pending for commit issue.

Let us see code for this solution

public class AddressValidationQueueableRunner implements Queueable, Database.AllowsCallouts{
    public void execute(QueueableContext context) {
        integer counter=0;
        try
        {
            Map<Id,Account> recordMap=new Map<id,Account>([SELECT ID,ShippingStreet,ShippingCity,ShippingState,ShippingPostalCode,ValidationStatus__c from 
                                                           Account Where ShippingStreet!=null and ValidationStatus__c = false]);
            system.debug('record to process...'+recordMap.size());
            
            if(recordMap !=null && recordMap.size()>0){
				AddressValidationQueueable esync = new AddressValidationQueueable(recordMap);
                System.enqueueJob(esync);
            }
        }
        catch(Exception ex)
        {
            ApplicationException.logException(ex);
        }
    }
}

Above queueable apex code is getting all records which need to process and passing all records to another child queueable class. As we are passing all records to child queueable class we don’t require to run this class multiple time. So if any error occurs for any records and we want to re-process those records, we can run this class once again after record correction.

Let us see code for child queueable class which will process each record and also handle uncommitted code pending issue.

public class AddressValidationQueueable implements Queueable, Database.AllowsCallouts{
    public Integer MAX_RECORD = 99;
    public Integer processingCount = 0;
    Map<Id,Account> accounts;
    List<Account> accts;
    
    public AddressValidationQueueable(Map<Id,Account> acts)
    {
        accounts=acts;
    }
    public void execute(QueueableContext context) {
        integer counter=0;
        boolean startNewQueue=false;
        try
        {
            accts=new List<Account>();
            
            for(ID index:accounts.keySet())
            {
                Account act=accounts.get(index);
                if(!startNewQueue)
                {
                    if(act!=null)
                    {
                        try
                        {
                            accts.add(AddressVerification.processRecord(act));
                        }
                        catch(Exception ex)
                        {
                            system.debug('ex:'+ex.getMessage());
                            ApplicationException.LogException(ex);
                        }
                        counter=counter+1;
                        accounts.remove(index);
                    }
                    system.debug('accts:'+ counter);
                    if(counter>MAX_RECORD)
                    {
                        startNewQueue=true;
                        break;
                    }                         
                }
            }
            if(startNewQueue)
            { 
                processTargets(accts);
                AddressValidationQueueable esync = new AddressValidationQueueable(accounts);
                counter=0;
                System.enqueueJob(esync);
            }
        }
        catch(Exception ex)
        {
            ApplicationException.LogException(ex);
        }
    }
    
    public void processTargets(List<Account> accounts){
        if(accounts!=null && !accounts.isEmpty())
        {
            update accounts;
        }
    }
}

public class AddressVerification{
    
    public static string NAMED_CREDENTIAL ='SmartyStreet';
    
    public static Account processRecord(Account act)
    {   
        APIConfiguration__mdt mdt = APIConfiguration__mdt.getInstance('SmartyStreet');
        
        Map<String, String> ncParams;
        if(string.isNotBlank(act.ShippingCity) && string.isNotBlank(act.ShippingState))
        {
            ncParams=new Map<String, String> {
                	'auth-id' => mdt.UserName__c,
                    'auth-token' => mdt.Password__c, 
                    'street' => act.ShippingStreet,
                    'city' => act.ShippingCity,
                    'state' => act.ShippingState,
                    'zipCode' => act.ShippingPostalCode,
                    'candidates' => '10'
           	};
                        }
        else if(string.isNotBlank(act.ShippingPostalCode))
        {
            ncParams=new Map<String, String> {
                'auth-id' => mdt.UserName__c,
                    'auth-token' => mdt.Password__c, 
                    'street' => act.ShippingStreet,
                    'zipcode' => act.ShippingPostalCode,
                    'candidates' => '10'
                    };
                        }
        else
        {
            ncParams=new Map<String, String> {
                'auth-id' => mdt.UserName__c,
                    'auth-token' => mdt.Password__c, 
                    'street' => act.ShippingStreet,
                    'candidates' => '10'
                    }; 
                        }
        system.debug('Auth:' + ExternalCallout.AUTH_TYPE.NAMED_CREDENTIAL);
        Map<String, String> headers=new Map<String, String> {'Content-Type' => 'application/xml'};
        HttpResponse response=new ExternalCallout().get('SmartyStreet', ncParams,headers);
        system.debug('response:'+response.getBody());
        if(response!=null)
        {
            act.ValidationStatus__c=true;
        }
        return act;
    }
}

AddressVerification class do external callout to Smarty Street address API. External callout code is available in another blog Generic Apex class for Calling External System. To store API detail, I have used named credential SmartyStreet which will store API url https://us-street.api.smartystreets.com/street-address , username and password.

AddressValidationQueueable is child queueable class which will call AddressVerification class for each record and add those accounts in list. Once set of 99 records are processed, we will update those records and start new child queueable class to process next set of 99 records. We are also removing that record from list so that it will not process again.

March 4, 2023

Pass lightning-input field Value from a Button Click to LWC Controller

Big Idea or Enduring Question

How to pass lightning-input field value as a parameter to controller class method in Lightning Web Component?

Objectives:

After reading this blog, you’ll be able to:

Understand what is lightning-input field and how to work with them
Understand when to use querySelector vs querySelectorAll to access element
Use custom data attribute to query or set the lwc component
Pass lightning-input field value to lightning web component (lwc) controller

Business Use case

Godwin Mbah is working as a Developer at Salesforce innovate LLC. he just started learning the lightning web component and wondering if someone could help him understand how to build the following screen and pass email and mobile field values to the lwc JavaScript controller on a button (Next) click.

What is a lightning-input component?

The lightning-input component is used to create interactive forms in order to accept data from the user; a wide variety of types of input types and attributes are available, depending on the use cases. The lightning-input element is one of the most powerful and complex in all LWC components due to the sheer number of combinations of input types and attributes.

This component supports the following input types:

checkbox
checkbox-button
date
datetime
time
email
file
password
search
tel
url
number
text (default)
toggle

Data attributes in Lightning Web Components

While working with a lightning web component, sometimes, we want to pass components’ values to JavaScript on a button click. You can do this in many ways, and data attribute is one of them.

For example, we are showing a form with few input fields. We want to pass entered values to the component JavaScript file on the button click. To achieve this, create the custom attributes by appending any string to data- and providing the information to it, like data-name, data-element, data-title, etc. Remember, you can only be able to enter string values to the data attributes.

<lightning-input 
   type="email" 
   data-element="user-input-email" 
   label="Email Address"> 
</lightning-input>

Using querySelector and querySelectorAll

The querySelector() and querySelectorAll() are DOM APIs available on modern web browsers. They are used to query DOM elements that match a specified selector.

The difference between these two is that querySelector() returns a single element matching its selection criteria. querySelectorAll(), on the other hand, returns all elements matching the search criteria in an iterable list.

Syntax

this.template.querySelector('p'); // Selects first paragraph element in document
this.template.querySelectorAll('p'); // Selects all paragraph elements in document
this.template.querySelectorAll('[target]'); //Get all elements that contain the attribute target

So Here is How I will approach this:

Now you have a basic understanding of all ingredients we need to build the lightning web component for the given business requirement. Let’s get started.

lightningInputExample.js-meta.xml

A lightning web component can be used to build custom pages for Lightning Experience and the Salesforce mobile app quickly with point-and-click tools. Make sure to add the right target for it.

This configuration file makes the component available for all Lightning page types but restricts support on desktops.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

lightningInputExample.html

Every UI component must have an HTML file with the root tag <template>. The template contains two lightning-input tags that create input for email and mobile. The template includes one lightning-button (Next) with the onclick method handleNext.

It is possible to use data-element attributes in the lightning-input component to pass email and mobile details to javascript for further logic. But we will use onchange event and store the values in variables in LWC controller.

When a user clicks on the Next button, it will call a JavaScript method handleNext() which will usevariablesto get the email and mobile field values.

<!-- lighntingInputExample.html -->
<template>
    <form>
        <div
            class="slds-p-top_small slds-p-bottom_medium slds-align_absolute-center slds-theme_default slds-text-heading_medium">
            <b>Lightning-Input Example</b></div>
        <div class="slds-box slds-theme_default">
            <lightning-input 
                    type="email" 
                    label="Email Address"
                    value={emailvalue}
                    onchange={handleEmailChange}>
            </lightning-input>
            <lightning-input 
                    type="tel" 
                    name="mobile"
                    label="Mobile"
                    value={mobilevalue}
                    onchange={handleMobileChange}>
            </lightning-input>
            <div class="slds-m-top_small slds-align_absolute-center">
                <lightning-button 
                    variant="Neutral" 
                    label="Cancel" 
                    class="slds-m-left_x-small" 
                    onclick={handleCancel}>
                </lightning-button>
                <lightning-button 
                    variant="brand" 
                    class="slds-m-left_x-small" 
                    label="Next" 
                    onclick={handleNext}>
                </lightning-button>
            </div>
        </div>
    </form>
</template>

lightningInputExample.js

Use variables from LWC controller to get the email and Mobile values. The alert will display the value of email and mobile when clicking on the Next button.

import { LightningElement } from 'lwc';

export default class InputExample extends LightningElement() {

    emailvalue ="username@example.com";
    mobilevalue= "000-000-0000";

    handleEmailChange(event){
        this.emailvalue = event.target.value;
    } 

    handleMobileChange(event){
        this.mobilevalue = event.target.value;
    } 

    handleNext() {

        alert('email '+ this.emailvalue);
        alert('Mobile '+ this.mobilevalue);
        
    }
}

Hi, I’m Godwin Mbah a Salesforce Developer Salesforce Sr. Admin Salesforce Consultant Business Analyst

Salesforce Services

Support & System Maintenance

Salesforce Training

Salesforce Solutions

Sales Cloud

Sales Cloud

Service Cloud

Service Cloud

Experience Cloud

Experience Cloud

Project Journey Lifecycle

Schedule An Appointment TodayFree One-To-One Call

View Recent Projects

Client Reviews

Let's Connect Today

Godwin Mbah

My Blog

Hi, I’m Godwin Mbah
a Salesforce Developer Salesforce Sr. Admin Salesforce Consultant Business Analyst

Schedule An Appointment Today
Free One-To-One Call