[Salesforce]Lightning Web Component @api decorator

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

[Salesforce]Lightning Web Component wiredRecord

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

[Salesforce]lightning__RecordPage

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

[Salesforce]Lightning Web Components Asynchronous processing Sample5

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

[Salesforce]Lightning Web Components Asynchronous processing Sample4

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

[Salesforce]Lightning Web Components Asynchronous processing Sample3

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

[Salesforce]Lightning Web Components Asynchronous processing Sample2

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 1' );
        // setTimeout('callback function', 'timeout time(ms)')
        setTimeout( function(){
                console.log( 'processing 2' );
                console.log( 'processing 3' );
                setTimeout( function(){
                        console.log( 'processing 4' );
                        console.log( 'processing 5' );
                }, 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 1
processing 2
processing 3
processing 4
processing 5

[Salesforce]Lightning Web Components Asynchronous processing Sample1

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 1' );
        console.log( 'Synchronous processing 2' );
        console.log( 'Synchronous processing 3' );

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

}

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 1
Synchronous processing 2
Synchronous processing 3
*** Asynchronous processing ***
Asynchronous processing 1
Asynchronous processing 3
Asynchronous processing 2

[Salesforce](Lightning Web Component) for each

(Lightning Web Component) for each

HTML


<template>
    <lightning-card>
        <lightning-accordion active-section-name={activeSections} allow-multiple-sections-open >
            <lightning-accordion-section label="普通文字" name="1">
                <lightning-layout multiple-rows>
                    <template for:each={fontList} for:item="item" for:index="index">
                        <lightning-layout-item size="6" key={item} class={item.class} >
                            {index} - {item.label}
                        </lightning-layout-item>
                    </template>
                </lightning-layout>
            </lightning-accordion-section>

            <lightning-accordion-section label="太文字" name="2">
                <lightning-layout multiple-rows>
                    <lightning-layout-item size="6">
                        太文字1列目
                    </lightning-layout-item>
                    <lightning-layout-item size="6">
                        太文字2列目
                    </lightning-layout-item>
                </lightning-layout>
            </lightning-accordion-section>

            <lightning-accordion-section label="テーブル" name="3">
                <lightning-layout multiple-rows>
                    <lightning-layout-item size="6">
                        テーブル1列目
                    </lightning-layout-item>
                    <lightning-layout-item size="6">
                        テーブル2列目
                    </lightning-layout-item>
                </lightning-layout>
            </lightning-accordion-section>

        </lightning-accordion>
    </lightning-card>
</template>

JS


import { LightningElement } from 'lwc';

export default class FontSample extends LightningElement {

    activeSections = ['1', '2', '3'];

    fontList = [
        {
            label: 'フォント9',
            class: 'size_9',
        },
        {
            label: 'フォント10',
            class: 'size_10',
        },
    ];    
}

CSS

.size_9 {
    font-size: 9px !important;
}
.size_10 {
    font-size: 10px !important;
}

結果