[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 １' );
        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 ２

[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">
                        太文字２列目
                    </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;
}

結果

[Salesforce]lightning-layout

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'];

    
}

結果

[Salesforce]active-section-name

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'];
}

[Salesforce]active-section-name

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>

[Salesforce]lightning-accordion

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>

[Salesforce]lightning-card

lightning-card

cardとは

コンテナです。 タイトル、アクション、フッタを持たせることができます。

例）

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

Lightning アプリケーションビルダー

＞　新規

＞　アプリケーション

＞　表示ラベル：Lightning

＞　１つの画面

カスタムの一覧から、fontSampleを追加

保存

有効化

保存

完了

戻る

アプリケーションランチャー

＞　Lightning

<template>
        <lightning-card  title="Hello">
            <lightning-button label="New" slot="actions"></lightning-button>
            <p class="slds-p-horizontal_small">Card Body (custom component)</p>
            <p slot="footer">Card Footer</p>
        </lightning-card>
</template>

[CSS]What is !important?

What is !important?

The !important rule in CSS is used to add more importance to a property/value than normal.

Example
<!DOCTYPE html>
<html>
<head>
<style>
#myid {
  background-color: blue;
}

.myclass {
  background-color: gray;
}

p {
  background-color: red !important;
}
</style>
</head>
<body>

<p>This is some text in a paragraph.</p>

<p class="myclass">This is some text in a paragraph.</p>

<p id="myid">This is some text in a paragraph.</p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
#myid {
  background-color: blue !important;
}

.myclass {
  background-color: gray !important;
}

p {
  background-color: red !important;
}
</style>
</head>
<body>

<p>This is some text in a paragraph.</p>

<p class="myclass">This is some text in a paragraph.</p>

<p id="myid">This is some text in a paragraph.</p>

</body>
</html>

[CSS]CSSのidとclassの使い分け[CSS]

CSSのidとclassの使い分け

HTML
<h1>こんにちは</h1>
<p class="red">私の名前は田中太郎です</p>
<h1>こんにちは</h1>
<p class="blue">私の名前は田中次郎です</p>
<p id="green">よろしくお願いします</p>

CSS
h1 {
  color: orange;
}
.red {
  color: red;
}
.blue {
  color: blue;
}
#green {
  color: green;
}