カテゴリー: Salesforce

Lightning Webコンポーネント作成

LWC.studio に移動します。

app.html

<template>
    <div id="waiting" if:false={ready}>Loading…</div>
    <div id="display" if:true={ready}>
        <div>Name: {name}</div>
        <div>Description: {description}</div>
        <lightning-badge label={material}></lightning-badge>
        <lightning-badge label={category}></lightning-badge>
        <div>Price: {price}</div>
        <div><img src={pictureUrl}/></div>
    </div>
</template>

app.js

import { LightningElement } from 'lwc';
export default class App extends LightningElement {
   name = 'Electra X4';
   description = 'A sweet bike built for comfort.';
   category = 'Mountain';
   material = 'Steel';
   price = '$2,700';
   pictureUrl = 'https://s3-us-west-1.amazonaws.com/sfdc-demo/ebikes/electrax4.jpg';
   ready = false;
   connectedCallback() {
       setTimeout(() => {
           this.ready = true;
       }, 3000);
   }
}

Lightning Web コンポーネントの概要

Lightning Web コンポーネントは、開発者とユーザーエクスペリエンスの両方に重点を置いています。

記述するコードの大部分は、標準の JavaScript および HTML です。

HTML、JavaScript、CSS を使用してコンポーネントを作成するだけです。

Lightning Web コンポーネントは、3 ステップで作成できます。(1) JavaScript ファイルを作成し、(2) HTML ファイルを作成し、必要に応じて (3) CSS ファイルを作成します。

• HTML は、コンポーネントの構造を提供します。
• JavaScript は、コアビジネスロジックとイベント処理を定義します。
• CSS は、コンポーネントのデザインとアニメーションを提供します。

HTML

<template>
    <input value={message}></input>
</template>

JavaScript

import { LightningElement } from 'lwc';
export default class App extends LightningElement {
  message = 'Hello World';
}

CSS

input {
   color: blue;
}

Hello World Lightning Web コンポーネントの作成

Lightning Web コンポーネントを作成する

新しいコンポーネントの名前として helloWorld と入力します。

helloWorld.html

<template>
    <lightning-card title="HelloWorld" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
          <p>Hello, {greeting}!</p>
          <lightning-input label="Name" value={greeting} onchange={changeHandler}></lightning-input>
        </div>
    </lightning-card> 
</template>

helloWorld.js

import { LightningElement } from 'lwc';

export default class HelloWorld extends LightningElement {
    greeting = 'World';
    changeHandler(event) {
      this.greeting = event.target.value;
    }    
}

helloWorld.js-meta.xml

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

Lightning Experience でアプリケーションにコンポーネントを追加する

1. アプリケーションランチャー () で、[Sales (セールス)] を見つけて選択します。
2.  をクリックして、[Edit Page (編集ページ)] を選択します。
3. Lightning コンポーネントのリストの [Custom (カスタム)] 領域から helloWorld Lightning Web コンポーネントをページキャンバスの上部にドラッグします。

1. [Save (保存)] をクリックします。
2. [Activate (有効化)] をクリックします。
3. [Assign as Org Default (組織のデフォルトとして割り当て)] をクリックします。
4. [Save (保存)] をクリックします。
5. もう一度 [Save (保存)] をクリックしてから、 をクリックしページに戻ります。
6. ページを更新すると、新しいコンポーネントが表示されます。

Lightning Web ComponentでquerySelector()メソッド

querySelector()メソッドは、DOM要素を検索するためのメソッドの一つ。

LWCコンポーネントのDOM要素を取得するために、

this.template.querySelectorを使用することができます。

これによってどのコンポーネントのDOM要素を取得するのかを指摘できます。

・使い方

使用元のメソッドやプロパティに@apiデコレータをつけて、

他のコンポーネントで使う場合には使用元のDOM要素を指定し、メソッドを記載すれば使用できるようになります。

Lightning Web Component開発手順

・JavaScript ファイルを作成

・HTML ファイルを作成

・(必要に応じて）CSS ファイルを作成

HTML：枠組

Javascritp：動く仕組み

デコレータ：昨日を繋ぐアイテム

デコレータの種類

@api

@tract

@wire

@tractについて

・コンポーネント内のJavascriptとHTMLを繋ぐためのデコレータ

@wireについて

・Javascriptの変数とApexのメソッドを繋ぐためのデコレータ

@apiについて

・公開するために使うデコレータ

SLDS

Salesforce Lightning Design System

Salesforce社が提供しているCSSフレームワーク

SLDSを利用することで、１からCSSを記述せずに Lightning Experience のデザインを踏襲した画面開発ができます。

よく使うSLDS

Box

例

<div class="slds-box">
  <p>hello world.</p>
</div>

Grid

例
<div class="slds-grid slds-gutters">
    <div class="slds-col">
        <lightning-input type="text" label="テキスト(1)" ></lightning-input>
    </div>
    <div class="slds-col">
        <lightning-input type="text" label="テキスト(2)" ></lightning-input>
    </div>
    <div class="slds-col">
        <lightning-input type="text" label="テキスト(3)" ></lightning-input>
    </div>
</div>

Modals

例
<section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="modal-heading-01" class="slds-modal slds-fade-in-open">
    <div class="slds-modal__container"> <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse">
            <svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
            </svg>
            <span class="slds-assistive-text">hello world</span>
          </button>
        <div class="slds-modal__header">
            <h1 id="modal-heading-01" class="slds-modal__title slds-hyphenate">hello world</h1>
        </div>
        <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
            <p>hello world.</p>
        </div>
        <div class="slds-modal__footer"> <button class="slds-button slds-button_neutral" aria-label="Cancel and close">Cancel</button> <button class="slds-button slds-button_brand">Save</button> </div>
    </div>
</section>
<div class="slds-backdrop slds-backdrop_open" role="presentation"></div>

Lightning Web Component間の通信方法

・publicプロパティ、publicメソッド

親コンポーネントから子コンポーネントへ値を渡す方法になります。

親コンポーネントから@apiデコレーターを使用して、子コンポーネントへ値を直接渡します。

publicParent.html

<template>
        <lightning-card title="Parent">
                <div class="slds-grid">
                        <div class="slds-p-around_medium">
                                <lightning-combobox 
                                        name="value" 
                                        label="value" 
                                        value={value} 
                                        options={options} 
                                        onchange={handleChange} 
                                        variant="label-hidden">
                                </lightning-combobox>
                        </div>
                        <div class="slds-p-around_medium">
                                <c-public-child value={value}></c-public-child>
                        </div>
                </div>
        </lightning-card>
</template>

publicParent.js

import { LightningElement } from 'lwc';

export default class PublicParent extends LightningElement {
        value = '';

        get options() {
                return [
                        { label: '', value: '' },
                        { label: 'A', value: 'A' },
                        { label: 'B', value: 'B' },
                        { label: 'C', value: 'C' }
                ];
        }

        handleChange(event) {
                this.value = event.detail.value;
        }
}

pulicChild.html

<template>
        <!-- Parentから渡された値を表示する -->
        <div>
                <span>通信値 {value}</span>
        </div>
</template>

publicChild.js

import { LightningElement, api } from 'lwc';

export default class PublicChild extends LightningElement {
        // publicプロパティは@apiデコレーターを使用して宣言します。
        // @apiをつけることで親コンポーネントからアクセス可能になります。
        @api value;
}

superキーワードは、親クラスのコンストラクタおよびメソッドを上書きできます。

例えば、次のクラスがあるとします。

public virtual class SuperClass {
    public String mySalutation;
    public String myFirstName;
    public String myLastName;

    public SuperClass() {

        mySalutation = 'Mr.';
        myFirstName = 'Carl';
        myLastName = 'Vonderburg';
    }

    public SuperClass(String salutation, String firstName, String lastName) {

        mySalutation = salutation;
        myFirstName = firstName;
        myLastName = lastName;
    }

    public virtual void printName() {

        System.debug('My name is ' + mySalutation + myLastName);
    }

   public virtual String getFirstName() {
       return myFirstName;
   }
}

Superクラスを拡張して、サブクラスで使います。

public class Subclass extends Superclass {
  public override void printName() {
        super.printName();
        System.debug('But you can call me ' + super.getFirstName());
    }
}

Subclass.printName をコールした場合に期待される出力は、「My name is Mr. Vonderburg. But you can call me Carl」です。

switch構文は次のとおりです。

switch on expression {
    when value1 {		// when block 1
        // code block 1
    }	
    when value2 {		// when block 2
        // code block 2
    }
    when value3 {		// when block 3
        // code block 3
    }
    when else {		  // default block, optional
        // code block 4
    }
}

switch on i {
   when 2 {
       System.debug('when block 2');
   }
   when -3 {
       System.debug('when block -3');
   }
   when else {
       System.debug('default');
   }
}

switch on i {
   when 2, 3, 4 {
       System.debug('when block 2 and 3 and 4');
   }
   when 5, 6 {
       System.debug('when block 5 and 6');
   }
   when 7 {
       System.debug('when block 7');
   }
   when else {
       System.debug('default');
   }
}

switch on someInteger(i) {
   when 2 {
       System.debug('when block 2');
   }
   when 3 {
       System.debug('when block 3');
   }
   when else {
       System.debug('default');
   }
}

Salesforceのディスク容量の計算

組織のエディションとユーザライセンスの数によってディスク容量は決まります。

計算式は「組織のエディションによって決まる固定ストレージ」＋「ユーザライセンス数にして比例して追加されるストレージ」です。

データストレージはオブジェクトのレコードを格納する容量です。

Salesforceでは一部のオブジェクトを除いて1レコード2KBです。

データストレージの容量と組織で使用を想定しているレコード数が分かれば、容量が十分かどうかを確認することができます。

ファイルストレージは関連ファイルなどにアップロードするファイルを格納する容量です。

ファイルストレージ容量と組織で扱うファイル数・サイズが分かれば、容量が十分かどうかを確認することができます。