2022.10.28

【LWC】ボタン君に自由な世界を/ Liberty for you, Button

SK

目次

はじめに

初めまして。2022年4月に新卒入社した福岡支店所属のSKです。
Salesforceの勉強を始めてから半年が経ち、さまざまな機能に触れてSalesforceの便利さを実感する毎日を過ごしています。
しかし裏を返すとそれは、標準機能で出来ないことを理解していくもどかしい毎日でもあります。

その中で私が感じたもどかしさはボタンの配置です。

Lightning編集ページでは標準のボタンコンポーネントが無いので、ボタンの配置ができるのは強調表示パネルのみです。
そこでボタンを自由の身にさらすために以下の2つを試しましたが、納得のいくものができませんでした。
・数式項目でIMAGE()を使ってボタンっぽい画像を表示させる方法​
・リッチテキストとカスタム表示ラベルを組み合わせる方法（裏ワザ）
​
「標準で無理ならLightning Web Componentを利用してボタン君に自由な世界を見せたい…！」と思い、ボタンコンポーネントを作成しボタンを好きな場所に配置してみようと思いました。

作ったもの

結果から申し上げますと、ボタン君を自由の身にすることに成功しました。
また、サブ機能ですがボタンのラベルと種類、クリック時のURLを指定することができました。
以下にキャプチャを貼ってますのでご覧ください。

強調表示パネルの下に作成したコンポーネントを配置しました。 コンポーネントには何もありませんが、プロパティ欄にはラベル、ボタンの種類、ページの遷移先が設定できるようになっています。 ボタンの種類にはデフォルトで「base」が入っています。

ラベルに「TerraSkyBase」、種類に「neutral」、遷移先にTerraSkyBaseのURLを入力しました。 するとパレットの方にボタンが表示されるようになりました。

ちなみに、こちらのボタンはタブコンポーネント内にも配置することができ、種類を選択するとボタンの雰囲気を変更することもできます。 そして、このボタンをクリックするとTerraSkyBaseのHPに遷移するようになります。

ソースコード

このコンポーネントのソースコードを以下に掲載します。
<template >
    <div>
        <lightning-button label={btn1_label} 
        variant={btn1_variant} 
        onclick={handleClick1} >
        </lightning-button>
    </div>
</template>
button.html
import { LightningElement, track, api } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class ActionButtonList extends NavigationMixin(LightningElement) {
    @api btn1_label;
    @api btn1_variant;
    @api btn1_destination;

    handleClick1() {
        this[NavigationMixin.Navigate]({
            type: 'standard__webPage',
            attributes: {
                url: this.btn1_destination
            }
        });
    }    
}
button.js
<?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>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__FlowScreen</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage, lightning__FlowScreen">
            <property name="btn1_label" label="bottun1 ラベル" type="String" description="画面に表示するラベルを入力して下さい" />
            <property name="btn1_variant" label="bottun1 種類" type="String" default="base" datasource="base,neutral,brand,brand-outline,destructive,destructive-text,inverse,success"/>
            <property name="btn1_destination" label="bottun1 遷移先" type="String" />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>
button.js-meta.xml
xmlファイルの方でtargetConfigタグ内のpropertyタグを設定することで、プロパティ欄で値を編集することができるようになります。
詳しくはこちらの記事にも書いてあるので参考にしてください。

さいごに

いかがでしょうか。
xmlファイルのtargetConfigタグ内のpropertyタグで、Lightning編集ページのプロパティ欄を編集することができるとは知りませんでした。
AppExchangeとして何気なく使っているListEditorやRecord Hunterも裏側でこのような設定がされているのか、、、と考えると、AppExchangeを作るハードルも下がりそうですね。

今回作ったコンポーネントはリッチテキストのリンクと機能的に全く同じなので、今後はアクションや画面フローの起動ができるように引き続き開発を進めていこうと思います。
最後までご覧いただき、誠にありがとうございました。
16 件
    　
  • banner
  • banner

関連する記事

関連するキーワード