Lightning Web Component 値が入力できるページを作る

前提

• SFDXを使用
• 特にデータ更新などはなく、単純なHTML & JSのみの作成

手順

• force-app/main/default/lwc にて Create Lightning Web Componentを選択
• HTMLファイルを下記に編集

<template>
    <lightning-card>
        <lightning-input
            type="number"
            label="Annual Revenue"
            formatter="currency"
            value={annualRevenue}
            onchange={handleChange}>
        </lightning-input>
        <lightning-button
            label="reset"
            onclick={reset}>
        </lightning-button>
    </lightning-card>
</template>

• jsファイルを下記に編集

import { LightningElement } from 'lwc';

export default class AccountFinder extends LightningElement {
    annualRevenue = null;
    handleChange(event) {
        this.annualRevenue = event.detail.value;
    }
    reset() {
        this.annualRevenue = null;
    }
}

• .metaファイルを変更
  • 組織側で作成したlwcを配置できるようにする

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

• Lightningページを作成

  • 設定 → Lightning App Builder
    • 新規をクリックし、名前を入力して適当なレイアウトを選択
    • Customセクションから作成したlwcを配置

• アプリケーションランチャーから作成したLightingページの名前を入力