モバイル画面でのブロックアクションの呼び出し
質問
作業中に、大きなフォームを複数のブロックに分割する必要があります。これらのブロックを含むモバイル画面で、各ブロックの検証アクションをトリガーするにはどのようにすればよいですか?
回答
モバイル画面でブロックアクションをトリガーするには、以下の手順を実行します。
-
ブロック内に最上位コンテナを作成します。これでコンテナの親要素としてブロックにアクセスできるようになります。この例の最上位コンテナの名前はRootです。
-
ブロックのOnReadyアクションで、JavaScriptノードを使用して、ブロックアクションを公開するJavaScript関数を定義します。この例では、validatePhone関数がValidatePhoneNumberブロックアクションを公開し、最上位コンテナrootIdを使用してブロックの親要素にアクセスします。
var wbElement = document.getElementById($parameters.rootId).parentElement; wbElement.validatePhone = $actions.ValidatePhoneNumber;
-
最上位コンテナのIdをパラメータとしてJavaScriptノードに渡します。
-
コンシューマ画面で、JavaScriptノードを使用してブロックのDOM要素で定義されたJavaScript関数にアクセスし、ブロックのIdをパラメータとして渡します。この例では、BlockIdを使用してブロックのDOM要素を取得し、validatePhone関数を呼び出します。
var wbElement = document.getElementById($parameters.BlockId); wbElement.validatePhone();
改善された方法では、この2つ目のJavaScriptコードをグローバルクライアントアクション(PhoneNumberValidate(PhoneNumberBlockId)など)内に配置します。これにより、呼び出し側の画面がローコードで実行されます。
ブロックの名前を指定した場合、Expressionエディタでのみブロックの「Id」ランタイムプロパティを選択できます。上記の例では、ソースブロック名は「PhoneNumber」ですが、これをコンシューマ画面にドラッグ(ブロックインスタンスを作成)すると、プロパティエディタでは「PhoneNumberBlock」という名前になります。