カテゴリー: Salesforce

Lightning Web Component @tract decorator

Sample

//LwcTrack.js
import { LightningElement, track } from 'lwc';

export default class LwcTrack extends LightningElement {
    @track
    parsonObj = {
        name : 'test',
        age : 1
    };

    @track
    parsonObjList = [
        {name : 'listtest1', age : 11},
        {name : 'listtest2', age : 12},
        {name : 'listtest3', age : 13},
    ];

    handleChange = function(event) {
        this.parsonObj.age =  event.target.value;
        this.parsonObjList[0].age = event.target.value;
    }

}

<!-- lwcTrack.html -->
<template>
    <lightning-card>
        <div>
            objname : {parsonObj.name}
            objage : {parsonObj.age}
        </div>

        <template for:each={parsonObjList} for:item="parsonObj">
            <div key={parsonObj.name}>
                objListname : {parsonObj.name}
                objListage : {parsonObj.age}
            </div>
        </template>

        <form>
            <lightning-input type="number" default=40 onchange={handleChange}>

            </lightning-input>
        </form>

    </lightning-card>
</template>

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

Result

・Default

Input : 99

Lightning Web Component @api decorator

Sample

js (HowToUseVariables)

import { LightningElement, api } from 'lwc';

export default class HowToUseVariables extends LightningElement {
    @api
    childAge;
}

html (HowToUseVariables)

<template>
    <lightning-card>
        childAge : {childAge}
    </lightning-card>
</template>

js-meta.xml (HowToUseVariables)

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

js (Parent)

import { LightningElement, api } from 'lwc';

export default class Parent extends LightningElement {
    @api
    parentAge;

    handleChanges(event) {
        this.parentAge = event.target.value;
    }
}

html (Parent)

<template>
    <c-how-to-use-variables child-age={parentAge}></c-how-to-use-variables>
    <lightning-input type="number" default=40 onchange={handleChanges} label="parentAge"></lightning-input>
</template>

js-meta.xml (Parent)

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

Result

Default

Input Value at Parent

Lightning Web Component wiredRecord

The wiredRecord function receives a stream of data from this wire service. The record data is then returned in the data argument. Any errors are returned in the error argument.

Samle

js

import { LightningElement, api, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import NAME_FIELD from '@salesforce/schema/Account.Name';
export default class AccountSummary extends LightningElement {
    @api recordId;
    accountName;
    data;
    error;

    @wire(getRecord, { recordId: '$recordId', fields: [NAME_FIELD] })
    wireRecord({ data, error}) {
        if (data) {
            this.accountName = getFieldValue(data, NAME_FIELD);
            this.data = data;
        } else if (error) {
            this.error = error;
        }
    }
}

html

<template>
    <lightning-card>
        <div>
            <template if:true={data}>
                Account Name : {data.fields.Name.value}
            </template>
        </div>
    </lightning-card>
</template>

js-meta.xml

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

Result

lightning__RecordPage

html

<template>
    Sample
</template>

js

import { LightningElement } from 'lwc';

export default class LightningRecordPage extends LightningElement {}

js-meta.xml

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

Result

Lightning Web Components Asynchronous processing Sample5

html

<template>
    <lightning-button onclick={handleExecution} label="execution"></lightning-button>
</template>

js

import { LightningElement } from 'lwc';

export default class AsyncSample1 extends LightningElement {

    handleExecution() {
            console.log( '*** Promise1 ***' );
            const promise = new Promise( function( resolve, reject ) {
                    console.log( 'Asynchronous processing：execution' );
                    setTimeout( function(){
                            console.log( 'Asynchronous processing：End' );
                            reject(); 
                    }, 0 );
            } );
            promise
            .then( function(){ console.log( 'Success' ); } )
            .catch( function(){ console.log( 'Failuer' ); } );
    }

}

js-meta.xml

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

Result

*** Promise1 ***
Asynchronous processing：execution
Asynchronous processing：End
Failuer

Lightning Web Components Asynchronous processing Sample4

html

<template>
    <lightning-button onclick={handleExecution} label="execution"></lightning-button>
</template>

js

import { LightningElement } from 'lwc';

export default class AsyncSample1 extends LightningElement {

    handleExecution() {
            console.log( '*** Promise1 ***' );
            const promise = new Promise( function( resolve, reject ) {
                    console.log( 'Asynchronous processing：execution' );
                    setTimeout( function(){
                            console.log( 'Asynchronous processing：End' );
                            resolve(); 
                    }, 0 );
            } );
            promise
            .then( function(){ console.log( 'Success' ); } )
            .catch( function(){ console.log( 'Failuer' ); } );
    }

}

js-meta.xml

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

Result

*** Promise1 ***
Asynchronous processing：execution
Asynchronous processing：End
Success

Lightning Web Components Asynchronous processing Sample3

html

<template>
    <lightning-button onclick={handleExecution} label="execution"></lightning-button>
</template>

js

import { LightningElement } from 'lwc';

export default class AsyncSample1 extends LightningElement {

    handleExecution() {
        console.log( '*** Asynchronous processing ***' );
        this.asyncSample( function(){
                console.log( 'callback function' );
        }, 'Asynchronous processing' );
    }

    asyncSample( callback, param ) {
        console.log( param );
        // callback function
        callback();
    }

}

js-meta.xml

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

Result

*** Asynchronous processing ***
Asynchronous processing
callback function

Lightning Web Components Asynchronous processing Sample2

html

<template>
    <lightning-button onclick={handleExecution} label="execution"></lightning-button>
</template>

js

import { LightningElement } from 'lwc';

export default class AsyncSample1 extends LightningElement {

    handleExecution() {
        console.log( '*** Asynchronous processing⇒Synchronous processing ***' );
        console.log( 'processing １' );
        // setTimeout('callback function', 'timeout time(ms)')
        setTimeout( function(){
                console.log( 'processing ２' );
                console.log( 'processing ３' );
                setTimeout( function(){
                        console.log( 'processing ４' );
                        console.log( 'processing ５' );
                }, 0 );
        }, 0 );
    }

}

js-meta.xml

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

Result

*** Asynchronous processing⇒Synchronous processing ***
processing １
processing ２
processing ３
processing ４
processing ５

Lightning Web Components Asynchronous processing Sample1

html

<template>
    <lightning-button onclick={handleExecution} label="execution"></lightning-button>
</template>

js

import { LightningElement } from 'lwc';

export default class AsyncSample1 extends LightningElement {

    handleExecution() {
        console.log( '*** Synchronous processing ***' );
        console.log( 'Synchronous processing １' );
        console.log( 'Synchronous processing ２' );
        console.log( 'Synchronous processing ３' );

        console.log( '*** Asynchronous processing ***' );
        console.log( 'Asynchronous processing 1' );
        // setTimeout('callback function', 'timeout time(ms)')
        setTimeout( function(){ console.log( 'Asynchronous processing ２' ); }, 0 );
        console.log( 'Asynchronous processing ３' );
    }

}

js-meta.xml

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

Result

*** Synchronous processing ***
Synchronous processing １
Synchronous processing ２
Synchronous processing ３
*** Asynchronous processing ***
Asynchronous processing 1
Asynchronous processing ３
Asynchronous processing ２

slds

salesforce lightning design system

Classes prefixed by slds-p- are used for adding padding. Classes prefixed in slds-m- are used for adding margin

<div class=”slds-p-around_small”></div>