0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

画面フローでリンクを踏めるようにしてみた

Last updated at Posted at 2021-11-12

##ご挨拶

皆さんこんにちは!
突然ですが皆さんはフロー活用してますか?
私はフロー大好き人間ですのでSalsforceで何か解決したいことがあると大体フローで作ってしまいます。
しかし、フローを使い倒しているとこの機能があればもっと便利なのになーと思ったことはないでしょうか?
今回は私自身が使っていてそれがあれば、、、!と思った機能を実装してみたのでご紹介させていただきます。

#画面フローでリンクを踏ませたい
画面フローはコーディングの知識がなくてもユーザに対して入力を誘導したり、画面開発ができる便利なツールです。
ユーザに対する誘導をしたいときに結構な割合で発生する要望が、外部リンクへの誘導や作成したレコードへの誘導をしたいというケースです。
しかし、画面フローには表示テキストや数式など様々なリソースがあるにも関わらず、いずれもリンクには対応していません。これはSalesforceの仕様でハイパーリンクが削除されてしまうからです。(https://help.salesforce.com/s/articleView?id=000314433&type=1)
もちろんフローURLをカスタマイズしてフロー完了時に任意の組織内のページに飛ばすことは可能ですが、今回やりたいのはそういうことじゃない。
入力中に外部のヘルプページのリンクを置いておいたり、Calltoタグで電話番号入力せずにソフトフォンで電話かけたいとかそういうことです。
一応上記のSalesforceのHELPにもあるように、Salesforceとしては非推奨の動作のようなので以下自己責任でお願い致します。

##ファイルの中身
前置きはこの辺にしておいて早速実現したい機能の解説をしていきます。
今回はLigtning webコンポーネントで作成してみました。

用意したのは以下のファイルです。

flowLink.html
<template>
    <div>
    <a href={linkURL} target="_blank" >
        <lightning-button label={linkText} ></lightning-button>
    </a>
    </div>
</template>
flowLink.js
import { LightningElement, api } from "lwc";

export default class FlowLink extends LightningElement {

    @api linkURL;
    @api linkText;

}
flowLink.js-mata.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>フローでリンク</masterLabel>
    <description>Lightning フローで利用できるリンクコンポーネントです。</description>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property name="linkURL" label="URL" type="String" role="inputOnly" required="true" default="https://"/>
            <property name="linkText" label="表示テキスト" type="String" role="inputOnly" required="true" default="リンク"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

私はコーディングできませんので、自社のエンジニアに頼んで作って貰いました笑
格好よく解説などできたらいいのですが、作成したエンジニアに聞いても解説するほどの内容がないと言われたので割愛させていただきます、、、
今はファイルさえ用意してもらえたらデプロイはできるようになりましたが、一昔前の私みたいにデプロイって何ぞやっていう方も居られると思うのでパッケージでも用意させていただきました。
https://login.salesforce.com/packaging/installPackage.apexp?p0=04t5h0000005RqL

これをインストールするとフローの編集画面にフローでリンクコンポーネントが出現すると思います。
flowlink1.png

##使ってみる
では早速使ってみたいと思います。
今回は冒頭に例として挙げた以下のケースを解決してみました。

ケース:外部のヘルプサイトのリンクを表示させる
取引先の作成を行う画面フローに外部のヘルプサイトを表示して、困ったときに飛んでもらおうと思います。(その場にヘルプテキスト用意しろという意見はブラックホールに吸い込まれました)
flowlink4.png
コンポーネントを配置したらURLの項目に外部リンクを入力します(今回は自社のHPのURLとしました)
表示テキストの項目にユーザ側に見せたいテキストを入力したら完了です。
ユーザ側から見たらこんな感じ
flowlink5.png

というわけで今回はここまで。
次回はこのコンポーネントを利用したもう少し高度なフローを解説してみようと思います。(次回⇒画面フローを使ってソフトフォン発信してみた
弊社では、このようなフローやプロセスビルダーを中心としたローコードでお客様の課題を解決することを目指しています。
既にSalesforceを利用しているが使い切れていない、解決したい課題ある方が居られましたらお気軽にお問合せ下さい。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?