MENU
  1. ホーム
  2. 記事
  3. アプリ
  4. Foam編集中の値を半角英数字に変換させたい

Foam編集中の値を半角英数字に変換させたい

広告
アプリ
PowerApps PowerAutomate

保存する値を半角英数字だけにしたいのに、ユーザーは全角英数字を使ったり、日本語入力したり、自由に投入してきます。こうなると、利用できないデータのできあがり。
でもユーザーに全部を求めると「入力が面倒」という方向で攻撃されてしまいます。理不尽。
極力ユーザーの稼働を使わないように、こちら側が変換ボタンを作ってあげよう、という内容です。
（まぁ限界はあるけどね）

目次

テキスト入力ボックス

Appsには入力自体を半角英数字で縛る機能はないようです。
まずはユーザーに気づきやすい環境を作ってあげましょう。

この記事で利用しているテキスト入力ボックスは、挿入で表示される左のようなアイコンの「テキスト」です。

「テキスト入力」や「テキストラベル」の場合は利用できるプロパティが異なる可能性があるためご注意ください。

どのような値を入れるボックスなのか明示する

一番簡単なのは、左記のように「半角英数字」とか「半角英数字以外禁止」とか、言葉で表示させておくことです。

テキストボックスの「Placeholder（プレースホルダー）」というプロパティで設定します。

この文字はユーザーがタイピングするときは消え、値がnullになるとまた表示されます。

半角英数字以外が投入されたら背景を赤くする

下記のテキストボックス名称は
「DataCardValue1」

続いて簡単なのは、左記のように、設定された条件以外の値が入力されたら、背景を赤くする、です。

複数のプロパティに設定が必要です

OnChange　値が変更された後に実行する動作

IsMatch(DataCardValue1.Value, "^[a-zA-Z0-9]+$")

変更された値が半角英数字に合致しているか判断します。

Fill　背景色

If(
    !IsBlank(DataCardValue1.Value) && !IsMatch(DataCardValue1.Value, "^[a-zA-Z0-9]+$"),
    RGBA(255, 200, 200, 1),
    Parent.Fill
)

値が空欄ではなく、DataCardValue1がtrueではない場合は、RGBA(255, 200, 200, 1)を設定。それ以外はデフォルトの背景色、という設定をします

TriggerOutput　OnChangeが発動するタイミング

'TextInputCanvas.TriggerOutput'.Keypress

タイピング中に半角英数字以外が投入されたらすぐに反応するように設定

半角英数字以外が投入されたらAutomateで半角英数字にするボタンを表示する

今回やりたかったのはこちら
でも設定範囲が増えて管理が面倒になるので、できれば背景色変更で留まれるようにユーザーを誘導したい

投入された値が半角英数字か否かを判断して変数に格納し、falseなら背景色を赤くします

ユーザーが値を投入するテキストボックスの名称は「DataCardValue1」

背景を赤くする式を変更します

OnChange　値が変更された後に実行する動作

UpdateContext({isValidInput: IsMatch(DataCardValue1.Value, "^[a-zA-Z0-9]+$")})

変更された値が半角英数字に合致しているか判断して、変数isValidInputにtureかfalesを格納

Fill　背景色

If(
    !IsBlank(DataCardValue1.Value) && !isValidInput,
    RGBA(255, 200, 200, 1),
    Parent.Fill
)

値が空欄ではなく、変数isValidInputがtrueではない場合は、RGBA(255, 200, 200, 1)を設定。それ以外はデフォルトの背景色、という設定

TriggerOutput　OnChangeが発動するタイミング

'TextInputCanvas.TriggerOutput'.Keypress

タイピング中に半角英数字以外が投入されたらすぐに反応するように設定

Automate発動ボタンを表示させる設定

ユーザーが投入するテキストボックスの名称は「DataCardValue1」。
「変換」ボタンの名称は「ButtonCanvas2」。

半角英数字以外が投入されたら「変換」というボタンが表示されるように設定します

ButtonCanvas2　のプロパティ設定を行います

Visible　表示/非表示の条件

If(
    IsBlank(DataCardValue1.Value),
    false,
    !isValidInput
)

DataCardValue1が空欄だったらボタンは非表示。
DataCardValue1が空欄ではない場合、変数isValidInputの値に従う

OnSelect　ボタンを押したときの動き

UpdateContext({
    convertedText:
        半角英数字へ変換.Run(DataCardValue1.Value),
    showConverted: true
    });
Reset(DataCardValue1);
UpdateContext({
    isValidInput:
        IsMatch(DataCardValue1.Value,"^[a-zA-Z0-9]+$")
    })

変数convertedTextにPowerAutomateを格納
変数showConvertedにtrueを格納
Automateが起動したのでDataCardValue1をリセット
DataCardValue1が変更されたのでOnChangeが働き、変数isValidInputを再判定

この段階ではAutomateを設定していないためエラーがでます。無視して次へ進みましょう。

PowerAutomateフローを作成

Automateのフロー作成画面に出たら、一番最初に左上でフローの名称を「半角英数字へ変換」に設定！
無題のまま途中保存してしまうとApps側で名称設定するときに望み通りの挙動にならないことが多々あります

全体的なフロー図は左記の通りです。

Appsから値を受け取り、変数の設定で変換作業を実施し、最後に変換した値をAppsに戻しています。

トリガー

入力値に「テキスト」を追加
　左：inputText
　右：デフォルト

変数を初期化する

名前：変換する文字列
種類：文字列
値　：空白

変数の設定

名前：変換する文字列
値　：下記を「式」で設定
※全角のアルファベットと全角のアラビア数字を半角に変換しています

replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(replace(triggerBody()['text'], 'Ａ', 'A'), 'Ｂ', 'B'), 'Ｃ', 'C'), 'Ｄ', 'D'), 'Ｅ', 'E'), 'Ｆ', 'F'), 'Ｇ', 'G'), 'Ｈ', 'H'), 'Ｉ', 'I'), 'Ｊ', 'J'), 'Ｋ', 'K'), 'Ｌ', 'L'), 'Ｍ', 'M'), 'Ｎ', 'N'), 'Ｏ', 'O'), 'Ｐ', 'P'), 'Ｑ', 'Q'), 'Ｒ', 'R'), 'Ｓ', 'S'), 'Ｔ', 'T'), 'Ｕ', 'U'), 'Ｖ', 'V'), 'Ｗ', 'W'), 'Ｘ', 'X'), 'Ｙ', 'Y'), 'Ｚ', 'Z'), 'ａ', 'a'), 'ｂ', 'b'), 'ｃ', 'c'), 'ｄ', 'd'), 'ｅ', 'e'), 'ｆ', 'f'), 'ｇ', 'g'), 'ｈ', 'h'), 'ｉ', 'i'), 'ｊ', 'j'), 'ｋ', 'k'), 'ｌ', 'l'), 'ｍ', 'm'), 'ｎ', 'n'), 'ｏ', 'o'), 'ｐ', 'p'), 'ｑ', 'q'), 'ｒ', 'r'), 'ｓ', 's'), 'ｔ', 't'), 'ｕ', 'u'), 'ｖ', 'v'), 'ｗ', 'w'), 'ｘ', 'x'), 'ｙ', 'y'), 'ｚ', 'z'), '０', '0'), '１', '1'), '２', '2'), '３', '3'), '４', '4'), '５', '5'), '６', '6'), '７', '7'), '８', '8'), '９', '9')

PowerAppsまたはフローに応答する

出力追加
　左：inputText
　右：変換する文字列

Automateから変換された値が戻った後の設定

値を保存したあと変数をクリアします

FoamのOnSuccessか、保存ボタンのOnSelectに以下を設定

UpdateContext({showConverted:false})

変換後の値がデータソースに保存された後の設定

DataCardValue1が属するデータカード「契約ID_DataCard1」のデフォルト値を設定

Default　デフォルト表示させる値を設定

If(
    showConverted,
    convertedText.inputtext,
    ThisItem.契約ID
)

showConvertedがtrueだったら、変数convertedText.inputtextに格納された値を表示させる
showConvertedがfalseだったら、ThisItem.契約IDの値を表示させる

showConvertedがtrueになるのは半角変換のPowerAutomateが起動したときです。
起動し、半角変換された値を表示させるための設定です。
もしAutomateが起動しない場合、もしくはデータソースに保存してshowConvertedがfalseになった場合は、データソースの契約IDを表示させる、という設定です。

半角英数字以外が入ったまま保存させない方法

たまにね、いるんですよね。
変換ボタンを押さないで、背景色が赤いままでも気にせず保存かけるユーザーが。

さすがに変換ボタン実装後は保存させませんよ（怒）という設定を行います。

「半角英数字以外が投入されたらAutomateで半角英数字にするボタンを表示する」をすべて設定し終えた前提です

データ保存時に条件チェック

保存ボタンのOnSelectに以下を設定
※SubmitForm(Form1)のForm1は各自で利用しているフォーム名に書き換えてください

If(
    !isValidInput,
    Notify("入力に誤りがあるため赤色の部分を訂正してください。", NotificationType.Error),
    SubmitForm(Form1)
)

これで背景が赤いまま保存されることはなくなりました。

今回は「契約ID」というテキスト入力ボックス１つに対しての設定ですが、複数規制かける場合は１つ１つ条件判定する必要があります。面倒くさい。

そのため、なるべく手間を少なくするため条件判定の変数をそれぞれ設定しておいて、最後、保存ボタン押すとき「or」とかで変数の状態を一斉に確認し、エラーメッセージは今回のように汎用的にしておくのが良いです。

エラーがある場合はそもそも「保存」ボタンを無効化させておくのも良い手です。
ただし、なぜ無効化されているのか分からないユーザーが「保存ボタンを押せません。なんでですか？」とエスカレしてくる可能性があります。
ユーザーレベルに合わせた設計にするのがお互いのためですので、最もつまずきそうなユーザーを思い浮かべながら設定していきましょう。

設定終了

Automateで変換作業させるだけならまだ簡単ですが、変換後の値をテキストボックスに再表示させたり、その判定結果で背景色をデフォルトに戻したり、別のレコードを表示したときはちゃんとそちらの値を評価しないといけなかったり（これは当たり前だけど）。

画面上に「変換」ボタンをつけるなら、やっぱりここまで整えてあげないと使いにくいですね。
もしもっと簡単にやる方法があるなら誰か教えてください（笑）

アプリ
PowerApps PowerAutomate

広告

関連記事

目次