How to find who created the lightning web component 

 We can find aura and LWC in Setup > Quick find > Lightning Components. The Type column gives information on Aura/LWC. It provides CreatedBy, CreatedDate, and the LastModifiedDate of LWC and Aura.

 

 

Unable to see the Reset Security Token option                 

There are a few different reasons the Reset Security Token feature may not be available. 

1. IP Restrictions in the Login IP Ranges
2. Network Access missing from Security Controls
3. User Profile is Corrupted

• IP Restrictions in the Login IP Ranges

          In order for the Reset My Security Token option to appear, you will need to remove the Login IP Ranges or change the User to a profile that does not have Login IP Ranges listed.

 

• Network Access missing from Security Controls

    System administrators can confirm if Network Access is missing by following these steps:

1. Go to Setup
2. On the Quick Find box, enter Network Access.
3. If you don't see the 'Network Access' link above, the system administrator can log a Case with Support to request the following features enabled for the organization:
4. Login Challenge Enabled
5. Login with API Token

• User Profile is Corrupted

         If none of the previous scenarios are true try editing the User profile that's missing the security token and save it without making any modifications. This will reset the profile and might result in the token option being available.

If the information provided does not resolve the issue open a case with Salesforce Support for assistance.

Usage of utility classes in Lightning web component:

In this demo, explaining about the usage of utility classes in Lwc. I have created utility class inside the  component folder. Utility class name is "Utilityhelper".

Utility helper is referred in component of JavaScript Like below :

import {add,sub} from './utilityhelper.js';

Complete code Snippet:

shareCode.html

<template>

    <lightning-card title="Usage of Javascript Utility Classes">

    <p> add : {resultFromHelper} </p>

    <p> sub : {substractVal} </p>

</lightning-card>

</template>

Javascript

import { LightningElement } from 'lwc';

import {add,sub} from './utilityhelper.js';

export default class UtilityComponent extends LightningElement {

    resultFromHelper;

    substractVal ;

    constructor(){

        super();

        const result = add(1,9);

        this.resultFromHelper=result;

        this.substractVal=sub();

 }

}

xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>50.0</apiVersion>

     <isExposed>true</isExposed> 

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

utilityhelper

/** helper class */

function add(a,b){

  return a+b;

}

function sub(a,b){

  return 5-3; //Hardcoded 

}

export{add,sub};

                                         Configuration File Tags

apiVersion:- A double value that binds the component to a Salesforce API version. To check the current version, take help of this knowledge article.

description:-A short description of the component, usually a single sentence. Appears in list views, like the list of Lightning Components in Setup, and as a tooltip in the Lightning App Builder and in Community Builder.

When you hover your mouse to the custom component deployed to the org, you can see the description with the label.

isExposed:-A Boolean value. Exposes the component in all orgs, and in Lightning App Builder and Community Builder. To make a component usable in a managed package, set isExposed to true. To make a component usable in Lightning App Builder and Community Builder, set isExposed to true.

masterLabel:-The title of the component. Appears in list views, like the list of Lightning Components in Setup, and in the Lightning App Builder and in Community Builder.

targetConfig:- It is subtag of targetConfigs and used for different page type configuration. For Example:-

<targetConfig targets=”lightning__RecordPage”>

<targetConfig targets=”lightning__AppPage, lightning_HomePage”>

targets:-The targets attribute value that you specify must match one or more of the page types that you listed under <targets> for the component. It Supports the property and objects subtags.

property:-Specifies a public property of a component that can be set in Lightning App Builder or Community Builder. The component author defines the property in the component’s JavaScript class using the @apidecorator.

objects:-A set of one or more objects the component is supported for. This tag set works only inside a parent targetConfig that’s configured for lightning__RecordPage. Specify the objects tag set only once inside a targetConfig set. Supports the object subtag.

 Note

object:-Defines which objects the component is supported for. Use one object tag for each supported object. You can’t use ‘*’ to denote all objects.

 

Html

<template>

    <div class="slds-m-around_small">

        <strong>

            Metadata File Example {message} <br/>

            page no  : {pageno}

        </strong>

    </div>

</template>

Javascript

import { LightningElement,api } from 'lwc';

export default class MetaExample extends LightningElement {

    @api message;

    @api pageno;

}

xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>50.0</apiVersion>

     <isExposed>true</isExposed>

    <masterLabel>Metadata File Configuraton</masterLabel>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

        <target>lightningCommunity__Default</target>

        <target>lightningCommunity__Page</target>

        <target>lightning__Tab</target><!-- Winter 20 -->

        <target>lightning__Inbox</target>

    </targets>

    <targetConfigs>

        <targetConfig targets="lightning__RecordPage" >

            <property name="message" type="String" label="Welcome Message"/>

            <property name="pageno" type="Integer" label="Page No" />

            <objects>

                <object>Contact</object>

              </objects>

        </targetConfig>

    </targetConfigs>

</LightningComponentBundle>

 Getter property in Lightning web components

1. Use getter property if you want to modify the property before you use in template

2. Use getter property when you don't  want to create a variable

html

<template>

    <lightning-card title="Getter Property"  icon-name="custom:custom14">

     <p> Passing variable without declaring variable : {passProperty}</p>

     <p> changemessage :  {changemessage}</p>

    </lightning-card>

</template>

Js

import { LightningElement } from 'lwc';

export default class GetProperty extends LightningElement {

    msg='Test';

    get passProperty(){

        return 'Without Declaring Variable';

    }

    get changemessage(){

        return this.msg+'-->'+'add value';

    }

}

xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>50.0</apiVersion>

   <isExposed>true</isExposed> 

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

   Render Multiple Templates

You may want to render a component with more than one look and feel, but not want to mix the HTML in one file. For example, one version of the component is plain, and another version displays an image and extra text. In this case, you can import multiple HTML templates and write business logic that renders them conditionally. This pattern is similar to the code splitting used in some JavaScript frameworks.

Note

NOTE Although it’s possible for a component to render multiple templates, we recommend using an if:true|false directive to render nested templates conditionally instead.

Create multiple HTML files in the component bundle. Import them all and add a condition in the render() method to return the correct template depending on the component’s state. The returned value from the render() method must be a template reference, which is the imported default export from an HTML file.

In this example, the template references are templateOne and templateTwo.

miscMultipleTemplates.js

import { LightningElement } from 'lwc';

import templateOne from './templateOne.html';

import templateTwo from './templateTwo.html';

export default class MiscMultipleTemplates extends LightningElement {

    templateOne = true;

    render() {

        return this.templateOne ? templateOne : templateTwo;

    }

    switchTemplate(){ 

        this.templateOne = !this.templateOne; 

    }

}

xml file:

<?xml version="1.0" encoding="UTF-8" ?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>47.0</apiVersion>

    <isExposed>true</isExposed> 

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

templateTwo.html

<!-- templateTwo.html -->

<template>

    <lightning-card title="Template Two">

        <div>

            This is template two.

        </div>

        <p class="margin-vertical-small">

            <lightning-button label="Switch Templates" 

                onclick={switchTemplate}>

            </lightning-button> 

        </p>

    </lightning-card>

</template>

templateOne.html

<!-- templateOne.html -->

<template>

    <lightning-card title="Template One" icon-name="custom:custom14">

        <div>

            This is template one.

        </div>

        <p class="margin-vertical-small">

            <lightning-button label="Switch Templates" 

                onclick={switchTemplate}>

            </lightning-button> 

        </p>

    </lightning-card>

</template>

Lightning components: can helpers call other helpers

You can definitely call another function within the same object using the this keyword.  Below Example doesnt make sense but it demonstrates the functionality of code

Lightning component : 

<aura:component >

    <input type="button" onclick="{!c.buttonClicked}" value="Click Me" id="myButton" />

</aura:component>

Controller :

({

    buttonClicked : function(component, event, helper) {

        helper.callHelper(component, event.target.id);

    }

})

Helper:

 ({

    callHelper : function(component, buttonId) 

    {

        console.log('call1',buttonId);

     this.helper1(component, buttonId,'Test');  

    },

    helper1 : function(component, buttonId, newLabel)

    {

        console.log('call2',buttonId);

       console.log('call3',newLabel);

    }

})