CookBook

変数のkey, valueを取り出して配列にするアクション、式表現の利用方法

投稿日:2022-06-13 更新日:

このCookBookでは、2022 Spring で新しく追加された以下のアクションと式表現について紹介します。

  • アクション
    • 変数○に○の各キー名を配列にして代入する
    • 変数○に○の各要素の値を配列にして代入する
  • 式表現
    • keys()
    • values()

はじめに

2022 Spring 以前のBloomMakerでは、以下のようなmap型の変数の key または value を配列に修正するとき、カスタムスクリプトを利用していました。

{0 : '', 1:"Hokkaido", 2 : "Aomori"....}

2022 Spring 以降では式表現 keys(), values() またはアクションを利用することで、簡単にマップ型変数のkey, valueを配列に変換することができるようになりました。

「ドロップダウン」エレメントのプロパティ「labels」, 「values」を指定する際に、式表現keys(), values()を利用できます。

このCookBookでは、keys(), values()を利用して「ドロップダウン」エレメントを表示するサンプルを作成しています。

JavaScript の Object.keys() , Object.values()について

JavaScriptには Object.keys() 、 Object.values() というメソッドが用意されています。
2つのメソッドはそれぞれ以下のような処理をすることができます。

Object.keys()

指定されたオブジェクトが持つプロパティの 名前の配列を、通常のループで取得するのと同じ順序で返します。

Object.keys() - JavaScript | MDN (mozilla.org)

Object.values()

指定されたオブジェクトが持つ列挙可能なプロパティの値を、 for...in ループで提供される場合と同じ順序で配列にして返します。

Object.values() - JavaScript | MDN (mozilla.org)

今回追加したアクションと式表現は、Object.keys()、Object.values() と同じような動作をする機能です。

それぞれ以下のように対応しています。

  • Object.keys
    • 変数○に○の各キー名を配列にして代入する
    • keys()
  • Object.values
    • 変数○に○の各要素の値を配列にして代入する
    • values()

完成サンプルイメージ

このCookBookで作成したサンプルです。

完成サンプル

以下のサンプルをダウンロードしてご利用ください。

内容は以下のとおりです。

定義ID名称
コンテンツim_cookbook_209271im_cookbook_209271
ルーティングim_cookbook_209271im_cookbook_209271

インポート後、ルーティング定義の認可を設定してください。
ローカル環境でサンプルを表示させる場合は、intra-martのアカウントにログインし、次のURLにアクセスしてください。

http://localhost:8080/imart/im_cookbook/bloommaker/209271

なお、ベースURLである http://localhost:8080/imart はお使いの環境に合わせて適宜変更してください。

レシピ

サンプルの作成方法を説明します。

事前にコンテンツを作成し、デザイナ画面を表示してください。

エレメントの配置

「レイアウト(Bulma)」-「セクション」を2つ配置します。

次に、「フォーム部品(Bulma)」-「フィールド」を各セクションに配置します。

「フォーム部品(Bulma)」-「プルダウン」を各「フィールド」に1つずつ配置します。

画像のようになっていることを確認してください。

変数

以下の変数を変数タブの「JSON形式で編集」を選択し、入力してください。

各「プルダウン」エレメントの変数を指定します。「プルダウン」エレメントのプロパティを開いて、対応するプロパティに変数を指定してください。

上側(式表現側)のプルダウン

  • labels : = values($variable.prefectures)
  • values : = keys($variable.prefectures)
  • value : $variable.formulaPrefectureIndex

下側(アクション側)のプルダウン

  • labels : $variable.prefecturesValues
  • values : $variable.prefecturesKeys
  • value : $variable.actionItemPrefectureIndex

アクション

アクションを作成します。

アクションタブから新しいアクションを作成してください。

  • 「標準」 - 「変数○に○の各キー名を配列にして代入する」
  • 「標準」 - 「変数○に○の各要素の値を配列にして代入する」

を追加してください。

変数は以下のように指定してください。

  • 変数 $variable.prefecturesKeys に $variable.prefectures の各キー名を配列にして代入する
  • 変数 $variable.prefecturesValues に $variable.prefectures の各要素の値を配列にして代入する

作成したアクションをセットします。

「コンテナ」を選択し、「ページ読み込み時」イベントに作成したアクションを指定してください。

これでレシピは以上になります。サンプルでは、レシピで説明したこと以外に「ラベル」エレメントや「アクション」など追加しています。

動作確認

プレビューで表示し、プルダウンエレメントを選択すると、選択肢として都道府県が表示されることを確認してください。

keys(), values()の動作について

今回追加した機能は、具体的に以下のように動作します。

マップ型変数の場合

配列の場合

文字列の場合

他の型は keys(), values() にかかわらず空配列が返されます。

-CookBook

執筆者:


  1. 名無し より:

    いつもサンプル提供ありがとうございます。
    cookbookに掲載されている画面イメージのロケールがenなのは理由があるのでしょうか?
    intra-martを利用する方の多くはロケールがjaだと思いますので、jaの画像を掲載頂いた方が参考にしやすいのではないでしょうか。

    • imdeveloper より:

      ご質問ありがとうございます。
      英語圏や中国語圏のユーザがこの画面を参照すると、自動的に言語が切り替わるように作られています。
      文章は機械翻訳されるのですが、画像などは翻訳の対象外となるため英語に統一させていただいています。

comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

no image

IM-BloomMaker 変数セレクタを表示中でも変数を編集できます

IM-BloomMaker で画面を作成している際、エレメントのプロパティに変数値を設定しようとして変数セレクタを開いてから、『あ!変数を作り忘れてたから、いったん作成するために画面を戻らなくては』と …

BloomMakerでワークフロー処理モーダルと動的処理対象者設定機能を利用してWorkflowコンテンツを作成する

このCookBookでは、BloomMakerで、ワークフロー処理モーダルと動的処理対象者設定機能を利用したWorkflowのコンテンツを作成する方法を紹介します。 本稿では、BloomMakerでワ …

IM-BloomMaker 日付入力の preserveTime プロパティを利用して時刻入力に同一の変数を指定する方法

このCookBookでは、2020 Winter でリリースした「日付入力」エレメントと、2022 Winterでリリースした「時刻入力」エレメントを同一の変数に対して利用する方法を説明します。 「日 …

IM-BloomMakerでテーブルに行追加・行削除を行う方法

このCookBookでは、 IM-BloomMaker でテーブルに行追加・行削除を行う方法をご紹介します。カスタムスクリプトを利用して配列の変数を操作することで、行追加・行削除を実現します。 完成イ …

FormaDesignerのユーザプログラム前処理と後処理をロジックフローで作成する方法

このCookBookでは、FormaDesignerのユーザプログラム前処理と後処理をロジックフローで作成する方法を紹介します。 サンプルでは、ユーザプログラム前処理と後処理を利用して、Workflo …