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-LogicDesigner「繰り返し」「分岐」EL式の定義例

このCookBookでは、IM-LogicDesignerの「条件分岐」「繰り返し」制御要素の条件で利用するEL式について定義例を紹介しています。 ここでは主に「 IM-LogicDesigner上で …

no image

多要素認証(MFA)のバックアップコードを生成していないユーザに通知を送る方法

この CookBook では、多要素認証のバックアップコードを生成していないユーザに通知を送る方法について紹介しています。 多要素認証では Google Authenticator を用いて認証を行い …

IM-BloomMaker 画面操作後に入力規則のチェックが行われるフォームの作成

変数の入力規則のチェックは画面表示後すぐに行われ、入力規則に反している場合はエラーが表示されます。 このCookBookでは intra-mart Accel Platform 2020 Summer …

IM-Wiki

Wiki機能の活用例

このCookbookでは、intra-mart Accel Platform 2018 Springから利用可能なWiki機能(IM-Wiki)の活用例について紹介します。 今回の記事では実際にWik …

no image

IM-LogicDesignerで、Redmineカスタムクエリのチケット一覧を取得する方法

このCookBookでは、IM-LogicDesignerを使用してRedmineのチケット (issues) 一覧を取得する方法を紹介します。 Redmineは、外部からチケット一覧を取得するための …