きーんくん ブログ

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>

(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">
                        太文字２列目
                    </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">
                        テーブル２列目
                    </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;
}

結果

lightning-layout

lightning-layout で、multiple-rows=”true” とする

複数列での表示が可能になります。

lightning-layout-item で、size=”6″ とする

size では、画面幅を12分割したうちのいくつ分の幅にするかを指定します。今回は２列表示なので、”6″ にします。３列表示なら “4” 、４列表示なら “3” にすします。

HTML

<template>
    <lightning-card>
        <lightning-accordion active-section-name={activeSections} allow-multiple-sections-open >
            <lightning-accordion-section label="普通文字" name="1">
                <lightning-layout multiple-rows>
                    <lightning-layout-item size="6">
                        普通文字1列目
                    </lightning-layout-item>
                    <lightning-layout-item size="6">
                        普通文字２列目
                    </lightning-layout-item>
                </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">
                        太文字２列目
                    </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">
                        テーブル２列目
                    </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'];

    
}

結果

active-section-name

最初から複数のセクションを開いておくには active-section-name に配列を渡します。 

<lightning-accordion active-section-name={open}
                     allow-multiple-sections-open>
    <lightning-accordion-section name="1st">first</lightning-accordion-section>
    <lightning-accordion-section name="2nd">second</lightning-accordion-section>
    <lightning-accordion-section name="3rd">third</lightning-accordion-section>
</lightning-accordion>

import { LightningElement } from 'lwc';

export default class Accordion extends LightningElement {
  open = ['1st', '2nd'];
}

active-section-name

<template>
    <lightning-card>
        <lightning-accordion active-section-name="B">
            <lightning-accordion-section name="A" label="Accordion Title A"
                >This is the content area for section A</lightning-accordion-section
            >
            <lightning-accordion-section name="B" label="Accordion Title B"
                >This is the content area for section B</lightning-accordion-section
            >
            <lightning-accordion-section name="C" label="Accordion Title C"
                >This is the content area for section C</lightning-accordion-section
            >
        </lightning-accordion>
    </lightning-card>
</template>

lightning-accordion

An accordion allows a user to toggle the display of a section of content.

<template>
    <lightning-card>
        <lightning-accordion>
            <lightning-accordion-section>Accordion details - A</lightning-accordion-section>
            <lightning-accordion-section>Accordion details - B</lightning-accordion-section>
            <lightning-accordion-section>Accordion details - B</lightning-accordion-section>            
        </lightning-accordion>
    </lightning-card>
</template>