9月 2023 - 2ページ目 (3ページ中)

[Tools]PlantUML

PlantUML

This is an open source project that allows you to quickly draw diagrams like the one below in text.

Sequence diagram
Usecase diagram
Class diagram
Activity diagram
Component diagram
State diagram
Object diagram

Install PlantUML from the Visual Studio Marketplace.

PlantUML handles files in the *.wsd, *.pu, *.puml, *.plantuml, and *.iuml formats as UML diagram files, so please use these extensions.

Once you have written the text that will become the base of your UML diagram, press Alt + D. You can preview the UML diagram as shown below.

Example

@startuml

title test

class class1 {
    method1()
}

class class2 {
    method2()
}

class1 --|> class2

@enduml

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

[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]slds

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

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

    
}

結果