例: カスタム Lightning Web コンポーネントに対する標準フローコンポーネント (ベータ)

カスタムコンポーネントを標準フローコンポーネントの変更に反応するように設定します。

colorName カスタムコンポーネントを作成して Flow Builder に追加します。

例

Text コンポーネントと colorName コンポーネントを追加し、それぞれの表示ラベルを指定します。
colorName のプロパティで、Name of Color 項目のソースとして Text コンポーネントを選択します。

Text 入力に加えられた変更は、自動的にカスタム Lightning Web コンポーネント colorName 内の color 公開項目に反映されます。たとえば、magenta を Text 入力に入力すると、LWC に、同じ色の magenta で書式設定された色名が表示されます。

1<!-- colorName.html -->
2<template>
3  <p>
4    Color name has the same color :
5    <span style={colorStyle}>{color}</span>
6  </p>
7</template>

1// colorName.js
2import { LightningElement, api } from "lwc";
3
4export default class colorName extends LightningElement {
5  @api color;
6
7  get colorStyle() {
8    return "color:" + this.color;
9  }
10}

1// colorName.js-meta.xml
2<?xml version="1.0" encoding="UTF-8"?>
3<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
4 <apiVersion>52.0</apiVersion>
5 <isExposed>true</isExposed>
6 <masterLabel>Color Name</masterLabel>
7 <description>Reactive Color Name</description>
8 <targets>
9     <target>lightning__FlowScreen</target>
10 </targets>
11<targetConfigs>
12      <targetConfig targets="lightning__FlowScreen">
13          <property name="color" label="Name of Color" type="String" />
14      </targetConfig>
15</targetConfigs>
16</LightningComponentBundle>

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。