【Salesforce】LWCを作成して画面フローにスクロールバー付き表示テキストを使う方法

Salesforce
この記事は約3分で読めます。

今回、大量の説明書きをする必要がありまして、表示テキストで直書きではスペースがとりすぎで見栄えがよくありません。

最初からLWCで画面を作成してあれば悩む必要もなかったのですが、画面フローで作成されていたため工夫が必要になってきます。

画面フローは簡単に画面を作れる反面、デザイン的に凝ったものが作れません。

デザイン的に凝ったものを作るには他の方法を使わなければなりません。最終的にはLWCで作りました。

スポンサーリンク

できないこと

パラメータでテキストを差し替えることはできません。
⇒平文なら可能ですが、HTMLタグがエスケープされてしまいます。
⇒カスタム表示ラベルを使えばテキストの差し替えはできますが、最大文字数は255です。複数使えば可能です。(2000文字近くあったので諦めました)

汎用的に使いづらい。
⇒LWCに直書きしてます。全文を複数個所に表示することはできます。

以上です。文字数が多いため選択肢が少ないです。

スポンサーリンク

スクロールバー付き表示テキストを作る

VSCodeでLWCを作成します。「SFDX:Lightning Web コンポーネントを作成」から任意の名前で作成します。

htmlを置き換える

<template>
    <div style="text-align: center;width:100%;">
        <div style="text-align: left;margin: 0 auto;border: 1px solid;overflow: auto;height: 100px;">
            ここにテキストを書く         
        </div>
    </div>
</template>

「ここにテキストを書く」の所を直書きして置き換えましょう。

文字が指定した高さを越えれば縦スクロールバーが出現します。

style(CSS)を編集すれば思い通りの表示テキストにすることができます。
※一番内枠のdiv要素にwidthを指定すれば中央寄せになるようにしてます(text-alignとmarginは削除可能)

js-meta.xmlを置き換える

masterLabelを適切なコンポーネント名に変えてください。画面フローでコンポートを選ぶ時の名前になります。

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>56.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>スクロール表示テキスト</masterLabel>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
</LightningComponentBundle>

デプロイして組織反映させます

VSCodeからLWCを右クリックして「SFDX:組織へソースをデプロイ」を押下すれば組織反映できます。あとは、画面フロー内でコンポーネントを追加するだけ。