MENU
  1. ホーム
  2. 記事
  3. アプリ
  4. Appsで作成したテンキーボタンとキーボードを併用した入力（３入力）

Appsで作成したテンキーボタンとキーボードを併用した入力（３入力）

広告
アプリ
PowerApps

下記の記事の発展形になるため未読の方はどうぞ

あわせて読みたい
Appsで作成したテンキーボタンとキーボードを併用した入力 Gallery内に挿入したテキストコントロールに、Apps側で作成したテンキーで入力させます。キーボード入力も可能です。テンキーには１文字ずつ消す「BS」ボタンと、一気に…
目次

追加：３つ目のテキストインプット

以前の記事ではGallery内で扱うテキストインプットが２つしかありませんでした。
３つ目のテキストインプットを追加する場合を今回の記事で作成します。

追加ボタン

Galleryの外に置きます

Onselect

コントロール名：Btn_Add

Collect に Value3: “” が増えただけです

Set(_id, GUID());

// 初回のみ明示的に初期化（既に存在する場合は何もしない）
If(
    IsBlank(LookUp(colRows, true, RowId)),
    ClearCollect(colRows, Table())
);

Collect(
  colRows,
  { RowId: _id, Value1: "", Value2: "", Value3: "" }
);

// 入力状態のクリア
UpdateContext({
  ctxActiveItemId: Blank(),
  ctxActiveTarget: Blank(),
  ctxResetRowId: Blank(),
  ctxResetTarget: Blank(),
  ctxPulse: false
});

テンキーボタン（例：Btn_9)

下記を参考にして他の 0 ～ 8 までのボタンも作成してください

OnSelect

ctxActiveTarget = “3”,　のブロックを追加しています。

If(
    IsBlank(ctxActiveItemId) || IsBlank(ctxActiveTarget),
        Notify("入力先を選択してください。", NotificationType.Information),

    ctxActiveTarget = "1",
        With(
            { cur: Coalesce(LookUp(colRows, RowId = ctxActiveItemId, Value1), "") },
            UpdateIf(colRows, RowId = ctxActiveItemId, { Value1: cur & "9" })
        );
        // ----Timerを起動
        UpdateContext({
            ctxResetRowId: ctxActiveItemId,
            ctxResetTarget: "1",
            ctxPulse: !ctxPulse
        }),

    ctxActiveTarget = "2",
        With(
            { cur: Coalesce(LookUp(colRows, RowId = ctxActiveItemId, Value2), "") },
            UpdateIf(colRows, RowId = ctxActiveItemId, { Value2: cur & "9" })
        );
        UpdateContext({
            ctxResetRowId: ctxActiveItemId,
            ctxResetTarget: "2",
            ctxPulse: !ctxPulse
        }),

    ctxActiveTarget = "3",
        With(
            { cur: Coalesce(LookUp(colRows, RowId = ctxActiveItemId, Value3), "") },
            UpdateIf(colRows, RowId = ctxActiveItemId, { Value3: cur & "9" })
        );
        UpdateContext({
            ctxResetRowId: ctxActiveItemId,
            ctxResetTarget: "3",
            ctxPulse: !ctxPulse
        })
)

テンキー（Btn_BS）

OnSelect

If(
    IsBlank(ctxActiveItemId) || IsBlank(ctxActiveTarget),
        Notify("入力先を選択してください。", NotificationType.Information),

    ctxActiveTarget = "1",
        With(
            { cur: Coalesce( LookUp(colRows, RowId = ctxActiveItemId, Value1), "" ) },
            UpdateIf(
                colRows, RowId = ctxActiveItemId,
                { Value1: If(Len(cur) > 0, Left(cur, Len(cur) - 1), "") }
            )
        );
        UpdateContext({
            ctxResetRowId: ctxActiveItemId,
            ctxResetTarget: "1",
            ctxPulse: !ctxPulse
        }),

    ctxActiveTarget = "2",
        With(
            { cur: Coalesce( LookUp(colRows, RowId = ctxActiveItemId, Value2), "" ) },
            UpdateIf(
                colRows, RowId = ctxActiveItemId,
                { Value2: If(Len(cur) > 0, Left(cur, Len(cur) - 1), "") }
            )
        );
        UpdateContext({
            ctxResetRowId: ctxActiveItemId,
            ctxResetTarget: "2",
            ctxPulse: !ctxPulse
        }),

    ctxActiveTarget = "3",
        With(
            { cur: Coalesce( LookUp(colRows, RowId = ctxActiveItemId, Value3), "" ) },
            UpdateIf(
                colRows, RowId = ctxActiveItemId,
                { Value3: If(Len(cur) > 0, Left(cur, Len(cur) - 1), "") }
            )
        );
        UpdateContext({
            ctxResetRowId: ctxActiveItemId,
            ctxResetTarget: "3",
            ctxPulse: !ctxPulse
        })
)

テンキー（Btn_Clear）

OnSelect

If(
    IsBlank(ctxActiveItemId) || IsBlank(ctxActiveTarget),
        Notify("入力先を選択してください。", NotificationType.Information),

    ctxActiveTarget = "1",
        UpdateIf(colRows, RowId = ctxActiveItemId, { Value1: "" });
        UpdateContext({
            ctxResetRowId: ctxActiveItemId,
            ctxResetTarget: "1",
            ctxPulse: !ctxPulse
        }),

    ctxActiveTarget = "2",
        UpdateIf(colRows, RowId = ctxActiveItemId, { Value2: "" });
        UpdateContext({
            ctxResetRowId: ctxActiveItemId,
            ctxResetTarget: "2",
            ctxPulse: !ctxPulse
        }),

    ctxActiveTarget = "3",
        UpdateIf(colRows, RowId = ctxActiveItemId, { Value3: "" });
        UpdateContext({
            ctxResetRowId: ctxActiveItemId,
            ctxResetTarget: "3",
            ctxPulse: !ctxPulse
        })
)

ボタン（Focus03）

OnSelect

UpdateContext({ ctxActiveItemId: ThisItem.RowId, ctxActiveTarget: "3" })

テキストインプット（Text03）

Default

Coalesce(ThisItem.Value3, "")

OnChange

If(
  IsMatch(Self.Text, "^\d*$"),
  UpdateContext({ ctxActiveItemId: ThisItem.RowId, ctxActiveTarget: "3" });
  UpdateIf(colRows, RowId = ThisItem.RowId, { Value3: Self.Text }),
  Notify("数字のみ入力可能です。", NotificationType.Warning)
)

OnSelect

UpdateContext({ ctxActiveItemId: ThisItem.RowId, ctxActiveTarget: "3" })
アプリ
PowerApps

広告

関連記事

目次