User:HARO7095/Sample page

BASIC TOAST STRUCTURE

requires : import { ShowToastEvent } from "lightning/platformShowToastEvent";

showToastOnComplete() {

      this.dispatchEvent(

         new ShowToastEvent({

            title: this.saved,

            message: "Your updates have been saved",

            variant: "success"

         })

      );

   }

RECORD EDIT FORM

  <lightning-record-edit-form object-api-name={keyobjapi} record-id={keyrecordid} onsuccess={handleSuccess} onerror={handleError}>

         <lightning-messages></lightning-messages>

      <lightning-input-field

                     class="slds-hide"

                     field-name={}

                     data-id={}

                     variant="label-hidden"

                     data-type=""

                  >

                  </lightning-input-field>

APEX -> JS Conversions

FOR MAP:

recordData = new Map

for (let key in result) {

               this.recordData.set(key, result[key]);

            }

APPEND PROPERITES TO DATA (for iteration in HTML)

  let tempData2 = {

                  ...tempData.fieldData[j],

                  ...{

                     accordionList: tempData.accordionfieldData,

                     yesButton: false,

                     noButton: false}}'

DEEP CLONE APEX OBJECT TO JS OBJECT

let newRM = {}

      for (let key in this.responsemap) {

         if (this.responsemap.hasOwnProperty(key)) {

            newRM[key] =  [...this.responsemap[key]];;

         }

      }

      this.responseMap2 = newRM;  

RECORD EDIT FORM

CLEAR RECORD EDIT FORM

  const inputFields = this.template.querySelectorAll("lightning-input-field");

      if (inputFields) {

         inputFields.forEach((field) => {

            field.reset();

         });

      }

formatting:

<lightning-layout multiplerows="true" verticalalign="stretch">                          

                              <lightning-layout-item size="1" alignmentbump="left" style="margin-right: 2em">

                                 <div class="slds-col slds-size_9-of-12 slds-text-align_left">

                                    <div      style="    font-size: 18px;   width: 500px; word-wrap: break-word;  text-align: left;  padding: 1px 0; "

                                       class="required-field"

                                                   >

FIRE HIDDEN FORM BUTTON

    this.template.querySelector('[data-id="oppButton"]').click();

HIDE FIELD

class="slds-hide"

Query Selector

dataID Dynamic           this.template.querySelector("[data-id2= " + event.currentTarget.dataset.id + "]")

dataID Hardcoded     this.template.querySelector('[data-id="oppButton"]').click();

WIRE METHOD:

requires: import refName from "@salesforce/apex/ClassName.FunctionNAme";

@wire(refName , {

    recordId: "$applicantId"

  })

  refName ({ error, data }) {

    if (data) {

//some code

    } else if (error) {

      console.log("error on apex wire")

    this.error = error;

    }

  }

imperative call

getContactList({ searchKey: this.searchKey })

.then(result => {this.contacts = result;

})

.catch(error => {this.error = error;});}

NAVIAGATION

requires: import { NavigationMixin } from "lightning/navigation";

requires: export default class myClass extends NavigationMixin(LightningElement) {

NAV to RELATED LIST (PERSON ACCOUNTS)

this[NavigationMixin.Navigate]({

          type: 'standard__recordRelationshipPage',

          attributes: {

              recordId: this.applicantId,

              objectApiName: '',

              relationshipApiName: 'Fingerprint_Results__r',

              actionName: 'view'

          }

      });

EVENTS

Send Event to parent

  this.dispatchEvent(

         new CustomEvent("questionupdate", {

            detail: {

               key: this.tabinfo.tabName,

               value: this.questionMap

            }

         })

      );

LIGHTNING BUTTONS

HTML

   <lightning-radio-group variant="label-hidden" data-id="button1" options={options} data-type="buttonControlled"

                        value={fingerStatus} onchange={handelRadioButton} type="button" >

 </lightning-radio-group>

JavaScript

@track options = [

    { label: "Not Submitted", value: "Not Submitted" },

    { label: "Submitted", value: "Submitted" }

];

Wait for child page load:

         setTimeout(() => this.template.querySelector("c-tab-Content-Over-View").updateTabInfoOverview(this.currentTabInfo));

MOBILE TAG SETUP

ONE-COLLUMN

<lightning-layout>

        <lightning-layout-item size="6" large-device-size="6" small-device-size="12" medium-device-size="12">

            <lightning-layout>

                <lightning-layout-item>

</lightning-layout>

                </lightning-layout-item>

            </lightning-layout>

TWO-COLLUMN

<lightning-layout>

                <lightning-layout-item size="6" large-device-size="6" small-device-size="12" medium-device-size="12"> left side elements here

                    <lightning-layout>

                        <lightning-layout-item>

                        <lightning-layout-item>

                    <lightning-layout>

<///close tags>

<lightning-layout-item size="6" large-device-size="6" small-device-size="12" medium-device-size="12"> right side elements here

                    <lightning-layout>

                        <lightning-layout-item>

                        <lightning-layout-item>

                    <lightning-layout>

<///close tags>

</lightning-layout>

Important Links:

LWC Slots : https://niksdeveloper.com/salesforce/slots-in-lwc/

sub pub: https://salesforcecodes.blogspot.com/2020/06/Communication%20between%20independent%20lwc.html