"この記事は Salesforce 開発者向けブログキャンペーンへのエントリー記事です。"
Lightning Web コンポーネントの入力系のサンプルコードを試してみました。開発者向けドキュメント『Component Library』のサイトに公開されているサンプルです。
はじめに
Lightning Web コンポーネント開発の始め方はこちら。
つくってみたサンプル画面
実際に作ってみたのはこちらです。つくったLWCをLightningアプリケーションページに配置して表示しています。
コードのイメージ。(コードの全体は最後に記載します。)
lightning-accordion-section
今回のサンプルを試す際に画面が見づらくならないようにこちらの機能を利用しました。アコーディオンセクションはクリックでオープンとクローズを切り替えることができます。また常にひとつはオープンの状態にしている必要がありました。
lightning-input type="text"
通常のテキスト入力欄です。
lightning-input type="checkbox"
通常のチェックボックス入力欄です。
lightning-input type="checkbox-button"
LWCに用意されていたチェックボックスボタンです。チェックなしのときには＋と表示されていました。
lightning-input type="color"
カレーパレットを表示できる仕組みです。設定ページをつくるときなどに便利そうでした。
lightning-input type="date"
日付の入力欄を表示できます。
lightning-input type="datetime"
日時の入力欄を表示できます。
lightning-input type="email"
メールアドレスの入力欄を表示できます。
lightning-input type="file"
ファイルアップロードの入力欄を表示できます。ドラッグ&ドロップによるアップロードの仕組みもセットで用意されていました。
lightning-input type="number"
数値入力欄です。
lightning-input type="password"
パスワードの入力欄を用意できます。
lightning-input type="radio"
ラジオボタンの入力欄を用意できます。今回のサンプルコードを試したときはちゃんと調べなかったので見せかけだけ表示しています。
lightning-input type="range"
レンジ入力のやつです。タグ一つで簡単に設置できます。便利そう。
lightning-input type="search"
検索用の入力欄を用意できます。通常のテキストボックスと違い虫眼鏡アイコンが表示されたり処理中アイコンを表示できたりします。
lightning-input type="tel"
電話番号の入力欄を用意できます。patternで入力時の形式も制御できるようです。便利。
lightning-input type="time"
日時型の時間部分の入力欄を用意できます。
lightning-input type="toggle"
トグルボタンを配置できます。
lightning-input type="url"
URLの入力欄を用意できます。httpの部分から入力しないとエラーになる制御があるようです。
lightning-input-address
住所用の入力欄を用意できます。国もセットでついてくるようです。(非表示オプションの有無はまだ未確認)
lightning-input-location
緯度経度の入力用。必要だけども普段はあまり使わなさそう。
lightning-input-name
名前入力用。敬称部分は選択リストになっています。
lightning-input-rich-text
リッチテキスト入力欄です。
デモ動画
サンプルコード
サンプルの構成は下記のとおり。
- helloLwc.html
- helloLwc.js
- helloLwc.js-meta.xml
helloLwc.html
<template>
<div>
<lightning-accordion active-section-name="TextSection">
<lightning-accordion-section name="TextSection" label="Text Section">
<!-- TEXT -->
<div class="slds-m-bottom_medium">
<div class="slds-m-bottom_small">
<lightning-input type="text" label="テキスト" data-id="inputName" onkeyup={onNameChanged}></lightning-input>
</div>
<div class="slds-box slds-theme_default">
<p class="slds-text-title">Hello {name}!</p>
</div>
</div>
</lightning-accordion-section>
<lightning-accordion-section name="CheckboxSection" label="Checkbox Section">
<!-- Checkbox -->
<div class="slds-m-bottom_medium">
<div class="slds-m-bottom_small">
<lightning-input type="checkbox" label="チェックボックス" onchange={onCheckboxChanged} data-id="inputCheckbox" checked={isChecked}></lightning-input>
</div>
<template if:true={isChecked}>
<div class="slds-box slds-theme_default">Checkbox ON!</div>
</template>
<template if:false={isChecked}>
<div class="slds-box slds-theme_default">Checkbox OFF</div>
</template>
</div>
</lightning-accordion-section>
<lightning-accordion-section name="CheckboxButtonSection" label="CheckboxButton Section">
<!-- CheckboxButton -->
<div class="slds-m-bottom_medium">
<div class="slds-m-bottom_small">
<lightning-input type="checkbox-button" label="チェックボックスボタン" onchange={onCheckboxButtonChanged} data-id="inutCheckboxButton" checked={isCheckboxButtonChecked}></lightning-input>
</div>
<template if:true={isCheckboxButtonChecked}>
<div class="slds-box slds-theme_default">Checkbox Button ON!</div>
</template>
<template if:false={isCheckboxButtonChecked}>
<div class="slds-box slds-theme_default">Checkbox Button OFF</div>
</template>
</div>
</lightning-accordion-section>
<lightning-accordion-section name="ColorSection" label="Color Section">
<!-- Color -->
<div class="slds-m-bottom_medium">
<lightning-input type="color" label="Color" value="#EEEEEE"></lightning-input>
</div>
</lightning-accordion-section>
<lightning-accordion-section name="DateSection" label="Date Section">
<!-- Date -->
<div class="slds-m-bottom_medium">
<div class="slds-m-bottom_small">
<lightning-input type="date" label="日付" onchange={onDateChanged} data-id="inputDate" value={birthday}></lightning-input>
</div>
<div class="slds-box slds-theme_default">
<p class="slds-text-title">Your Birthday = {birthday}</p>
<p><lightning-formatted-date-time value={birthday}></lightning-formatted-date-time></p>
<p><lightning-formatted-date-time value={birthday} year="2-digit" month="short" day="2-digit" weekday="narrow"></lightning-formatted-date-time></p>
<p><lightning-formatted-date-time value={birthday} year="2-digit" month="short" day="2-digit" weekday="long"></lightning-formatted-date-time></p>
</div>
</div>
</lightning-accordion-section>
<lightning-accordion-section name="DateTimeSection" label="DateTime Section">
<!-- DateTime -->
<div class="slds-m-bottom_medium">
<div class="slds-m-bottom_small">
<lightning-input type="datetime" label="日付時間" onchange={onDateTimeChanged} data-id="inputDateTime" value={createdDateTime}></lightning-input>
</div>
<div class="slds-box slds-theme_default">
<p class="slds-text-title">CreatedDateTime = {createdDateTime}</p>
<p><lightning-formatted-date-time value={createdDateTime}></lightning-formatted-date-time></p>
<p><lightning-formatted-date-time value={createdDateTime} year="2-digit" month="short" day="2-digit" hour="2-digit" minute="2-digit" weekday="narrow"></lightning-formatted-date-time></p>
<p><lightning-formatted-date-time value={createdDateTime} year="2-digit" month="short" day="2-digit" hour="2-digit" minute="2-digit" weekday="long"></lightning-formatted-date-time></p>
</div>
</div>
</lightning-accordion-section>
<lightning-accordion-section name="EmailSection" label="Email Section">
<!-- Email -->
<div class="slds-m-bottom_medium">
<div class="slds-m-bottom_small">
<lightning-input type="email" label="メール" onchange={onEmailChanged} data-id="inputEmail" value={email}></lightning-input>
</div>
<div class="slds-box slds-theme_default">
<p class="slds-text-title">Your Email = {email}</p>
<p>Default = <lightning-formatted-email value={email}></lightning-formatted-email></p>
<p>Hide Icon = <lightning-formatted-email value={email} hide-icon></lightning-formatted-email></p>
<p>Label = <lightning-formatted-email value={email} label="Email"></lightning-formatted-email></p>
</div>
</div>
</lightning-accordion-section>
<lightning-accordion-section name="FileSection" label="File Section">
<!-- File -->
<div class="slds-m-bottom_medium">
<div class="slds-m-bottom_small">
<lightning-input type="file" label="ファイル" accept="image/png, .zip" onchange={handleFilesChange} data-id="inputFile" multiple></lightning-input>
</div>
</div>
</lightning-accordion-section>
<lightning-accordion-section name="NumberSection" label="Number Section">
<!-- Number -->
<div class="slds-m-bottom_medium">
<div class="slds-m-bottom_small">
<lightning-input type="number" label="数値" onchange={onNumberChanged} data-id="inputNumber" value={number}></lightning-input>
</div>
<div class="slds-box slds-theme_default">
<p class="slds-text-title">Number = {number}</p>
<p>Default = <lightning-formatted-number value={number}></lightning-formatted-number></p>
<p>Currency = <lightning-formatted-number value={number} format-style="currency" currency-code="USD"></lightning-formatted-number></p>
<p>Percent = <lightning-formatted-number value={number} format-style="percent"></lightning-formatted-number></p>
</div>
</div>
</lightning-accordion-section>
<lightning-accordion-section name="PasswordSection" label="Password Section">
<!-- Password -->
<div class="slds-m-bottom_medium">
<div class="slds-m-bottom_small">
<lightning-input type="password" label="パスワード" onchange={onPasswordChanged} data-id="inputPassword" value={password}></lightning-input>
</div>
<div class="slds-box slds-theme_default">
<p class="slds-text-title">Password = {password}</p>
</div>
</div>
</lightning-accordion-section>
<lightning-accordion-section name="RadioSection" label="Radio Section">
<!-- Radio -->
<div class="slds-m-bottom_medium">
<div class="slds-m-bottom_small">
<lightning-input type="radio" label="Red" value="red" checked></lightning-input>
<lightning-input type="radio" label="Blue" value="blue"></lightning-input>
</div>
</div>
</lightning-accordion-section>
<lightning-accordion-section name="RangeSection" label="Range Section">
<!-- Range -->
<div class="slds-m-bottom_medium">
<div class="slds-m-bottom_small">
<lightning-input type="range" label="レンジ" min="0" max="100" onchange={onRangeChanged} data-id="inputRange" value={range}></lightning-input>
</div>
<div class="slds-box slds-theme_default">
<p class="slds-text-title">Range = {range}</p>
</div>
</div>
</lightning-accordion-section>
<lightning-accordion-section name="SearchSection" label="Serach Section">
<!-- Search -->
<div class="slds-m-bottom_medium">
<div class="slds-m-bottom_small">
<lightning-input type="search" label="サーチ" data-id="inputSearch"></lightning-input>
</div>
<div class="slds-m-bottom_small">
<lightning-input type="search" label="サーチ" is-loading data-id="inputSearchIsLoading"></lightning-input>
</div>
</div>
</lightning-accordion-section>
<lightning-accordion-section name="TelSection" label="Tel Section">
<!-- Tel -->
<div class="slds-m-bottom_medium">
<div class="slds-m-bottom_small">
<lightning-input type="tel" label="電話" onchange={onTelChanged} data-id="inputTel" value={phone} pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"></lightning-input>
</div>
<div class="slds-box slds-theme_default">
<p class="slds-text-title">Tel = {phone}</p>
<p>Default = <lightning-formatted-phone value={phone}></lightning-formatted-phone></p>
</div>
</div>
</lightning-accordion-section>
<lightning-accordion-section name="TimeSection" label="Time Section">
<!-- Time -->
<div class="slds-m-bottom_medium">
<div class="slds-m-bottom_small">
<lightning-input type="time" label="時間" onchange={onTimeChanged} data-id="inputTime" value={time}></lightning-input>
</div>
<div class="slds-box slds-theme_default">
<p class="slds-text-title">Time = {time}</p>
<p>Default = <lightning-formatted-time value={time}></lightning-formatted-time></p>
</div>
</div>
</lightning-accordion-section>
<lightning-accordion-section name="ToggleSection" label="Toggle Section">
<!-- Toggle -->
<div class="slds-m-bottom_medium">
<div class="slds-m-bottom_small">
<lightning-input type="toggle" label="トグル" onchange={onToggleChanged} data-id="inputToggle" checked={isToggleChecked}></lightning-input>
</div>
<template if:true={isToggleChecked}>
<div class="slds-box slds-theme_default">Toggle ON!</div>
</template>
<template if:false={isToggleChecked}>
<div class="slds-box slds-theme_default">Toggle OFF</div>
</template>
</div>
</lightning-accordion-section>
<lightning-accordion-section name="UrlSection" label="URL Section">
<!-- URL -->
<div class="slds-m-bottom_medium">
<div class="slds-m-bottom_small">
<lightning-input type="url" label="URL" onchange={onUrlChanged} data-id="inputUrl" value={url}></lightning-input>
</div>
<div class="slds-box slds-theme_default">
<p class="slds-text-title">URL = {url}</p>
<p>Default = <lightning-formatted-url value={url}></lightning-formatted-url></p>
</div>
</div>
</lightning-accordion-section>
<lightning-accordion-section name="AddressSection" label="Address Section">
<!-- Address -->
<div class="slds-m-bottom_medium">
<div class="slds-m-bottom_small">
<lightning-input-address
address-label="Address"
street-label="Street"
city-label="City"
country-label="Country"
province-label="Province"
postal-code-label="PostalCode"
street="121 Spear St."
city="San Francisco"
country="US"
province="CA"
postal-code="94105"
required
field-level-help="Help Text for inputAddress field" ></lightning-input-address>
</div>
</div>
</lightning-accordion-section>
<lightning-accordion-section name="LocationSection" label="Location Section">
<!-- Location -->
<div class="slds-m-bottom_medium">
<div class="slds-m-bottom_small">
<lightning-input-location label="No default coordinates" ></lightning-input-location>
</div>
</div>
</lightning-accordion-section>
<lightning-accordion-section name="NameFieldsSection" label="Name Fields Section">
<!-- Name -->
<div class="slds-m-bottom_medium">
<div class="slds-m-bottom_small">
<lightning-input-name
label="Default Input Name Field"
first-name="John"
middle-name="Middleton"
last-name="Doe"
informal-name="Jo"
suffix="The 3rd"
salutation="Mr."
options={salutationOptions} ></lightning-input-name>
</div>
</div>
</lightning-accordion-section>
<lightning-accordion-section name="RichTextSection" label="RichText Section">
<!-- RichText -->
<div class="slds-m-bottom_medium">
<div class="slds-m-bottom_small">
<lightning-input-rich-text onchange={onRichTextChanged} data-id="inputRichText" value={richText}></lightning-input-rich-text>
</div>
<div class="slds-box slds-theme_default">
<p class="slds-text-title">RichText = {richText}</p>
<p>Default = <lightning-formatted-rich-text value={richText}></lightning-formatted-rich-text></p>
</div>
</div>
</lightning-accordion-section>
<lightning-accordion-section name="ListSection" label="List Section">
<!-- List -->
<div class="slds-m-bottom_medium">
<div class="slds-box slds-theme_default">
<!-- List Sample 1 -->
<ul>
<template for:each={members} for:item="member" for:index="index">
<li key={member.id}>{index}. {member.name}</li>
</template>
</ul>
</div>
<div class="slds-box slds-theme_default">
<!-- List Sample 2 -->
<ul>
<template iterator:it={members}>
<li key={it.value.id}>{it.index}. {it.value.name}: {it.first} : {it.last}</li>
</template>
</ul>
</div>
</div>
</lightning-accordion-section>
</lightning-accordion>
</div>
</template>
helloLwc.js
import { LightningElement,track } from 'lwc';
export default class HelloLwc extends LightningElement {
@track name = 'Lightning';
@track isChecked = false;
@track isCheckboxButtonChecked = false;
@track birthday = null;
@track createdDateTime = null;
@track email = 'sample@example.com';
@track number = null;
@track password = '';
@track range = 30;
@track phone = '0X0-1234-1234';
@track time = null;
@track isToggleChecked = false;
@track url = '';
@track richText = '';
@track members = [
{
id: "1",
name: "Sato"
},
{
id: "2",
name: "Suzuki"
},
{
id: "3",
name: "Tanaka"
}
];
onNameChanged() {
this.name = this.template.querySelector('[data-id="inputName"]').value;
}
onCheckboxChanged() {
this.isChecked = this.template.querySelector('[data-id="inputCheckbox"]').checked;
}
onCheckboxButtonChanged() {
this.isCheckboxButtonChecked = this.template.querySelector('[data-id="inutCheckboxButton"]').checked;
}
onDateChanged() {
this.birthday = this.template.querySelector('[data-id="inputDate"]').value;
}
onDateTimeChanged() {
this.createdDateTime = this.template.querySelector('[data-id="inputDateTime"]').value;
}
onEmailChanged() {
this.email = this.template.querySelector('[data-id="inputEmail"]').value;
}
handleFilesChange() {
console.log('Files OK!');
console.log(this.template.querySelector('[data-id="inputFile"]'));
}
onNumberChanged() {
this.number = this.template.querySelector('[data-id="inputNumber"]').value;
}
onPasswordChanged() {
this.password = this.template.querySelector('[data-id="inputPassword"]').value;
}
onRangeChanged() {
this.range = this.template.querySelector('[data-id="inputRange"]').value;
}
onTelChanged() {
this.phone = this.template.querySelector('[data-id="inputTel"]').value;
}
onTimeChanged() {
this.time = this.template.querySelector('[data-id="inputTime"]').value;
}
onToggleChanged() {
this.isToggleChecked = this.template.querySelector('[data-id="inputToggle"]').checked;
}
onUrlChanged() {
this.url = this.template.querySelector('[data-id="inputUrl"]').value;
}
onRichTextChanged() {
this.richText = this.template.querySelector('[data-id="inputRichText"]').value;
}
}
helloLwc.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>47.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__HomePage</target>
<target>lightning__AppPage</target>
</targets>
</LightningComponentBundle>
上記コードをコピペすればそのまま動くと思います。LWCコンポーネントの入力系のサンプルコードはこんな感じでした。
