Monday, February 3, 2020

How to check current user is guest user or not in lightning web components(lwc)

To check the current user is a guest user, import the current user’s status from @salesforce/user/isGuest

Syntax
import isGuestUser from '@salesforce/user/isGuest';
isGuestuser identifier provides the guest user information if it returns true the current is a guest user or if it returns false current user not a guest user

HTML Code
<template>
    <lightning-card>
        <div class="slds-m-around_medium">
            <p>Current User is guest or not:  <b>{isGuestUser}</b></p>  
        </div>
 </lightning-card>
</template>

Javascript Controller
import { LightningElement } from 'lwc';
import isGuest from '@salesforce/user/isGuest';

export default class currentUserInfo extends LightningElement {
    isGuestUser = isGuest;
}

Output

Sunday, February 2, 2020

Using child component methods in parent component in Lightning Web Components(lwc)

This post explains how to use the child component methods in parent component in lightning web components(lwc)

To expose a public method, decorate it with @api. Public methods are part of a component’s API. To communicate down the containment hierarchy, owner and parent components can call JavaScript methods on child components.



Ex:
ChildInLWC.html
<template>
    {upperCase}
</template>

ChildInLWC.js
import { LightningElement, api } from 'lwc';

export default class ChildInLWC extends LightningElement {
    upperCase;

    @api
    handleChangeNameToUpperCase(name) {
        this.upperCase = name.toUpperCase();
    }
}

handleChangeNameToUpperCase method is declared as public with @api decorator so another component can call this method.

ParentInLWC.html
<template>
    <lightning-card title="Call child methods in Lightning Web Components">
        <lightning-input label="Enter Name" value={nameToChange} onchange={handleOnchange} ></lightning-input>
       <c-child-in-l-w-c></c-child-in-l-w-c>
 </lightning-card>
</template>

called the child component in parent component <c-child-in-l-w-c></c-child-in-l-w-c>

ParentInLWC.js
import { LightningElement } from 'lwc';

export default class ParentInLWC extends LightningElement {
    
    nameToChange;
    
    handleOnchange(event) {
        window.console.log('value ===> '+event.target.value);
        this.template.querySelector('c-child-in-l-w-c').handleChangeNameToUpperCase(event.target.value);
    }
}
ParentInLWC.js.meta-xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="parentInLWC">
    <apiVersion>47.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Output

Saturday, February 1, 2020

How to refer child components names in parent component in lightning web component(lwc)

When you are referring the child component name in parent component name in lightning web component some times you may face the error
LWC1010: Failed to resolve entry for the module

To resolve the error,  replace capital letters become lowercased and prefixed with a hyphen (-).

Examples:
Assume below names are the child component names

childNameInLWC
sampleDEMO
sampleDataTable
sampleDATAinLWC

refer above components like this in the parent component

<c-child-name-in-l-w-c></c-child-name-in-l-w-c>
<c-sample-d-e-m-o></c-sample-d-e-m-o>
<c-sample-data-table></c-sample-data-table>
<c-sample-d-a-t-a-in-l-w-c></c-sample-d-a-t-a-in-l-w-c>

Best practice tip
avoid more capital letters in your component name.


Resource
LWC Component folder