CookBook

IM-BloomMaker スプレッドシートのシート全体を DB に保存する

投稿日:

この CookBook では intra-mart Accel Platform 2020 Winter から利用可能になったスプレッドシートで、シート全体を DB に保存する方法を紹介します。

スプレッドシートの保存には、シート全体を保存する方法とシートのセルやテーブルごとに保存する方法があります。

今回紹介するのはシート全体を保存する方法です。
これまで Excel で回覧されていたコンテンツ(セルやテーブルに入力された情報を個別で保存する必要がないもの)への使用に適しています。

実際にシート全体を DB に保存する画面を作成しながら説明していきます。

なおスプレッドシートを利用するには Juggling プロジェクトの新規作成時に、IM-Spreadsheet for Accel Platform を選択する必要があります。

完成イメージ

この CookBook で作成するサンプル画面です。

シートを編集した後、 ID を入力し「Save」ボタンをクリックします。
DB にシートのデータが保存されます。

画面を再読み込みした後、同じ ID を再度入力し「Reflect」ボタンをクリックします。
先ほどシートに入力した内容が反映されます。

完成サンプル

DDL を予め実行する必要があります。データベース操作画面から実行してください。
※ 以下は PostgreSQL での SQL です。他データベースをご利用の場合は、別途テーブルを作成する SQL を実行してください。

また、以下の完成サンプルをダウンロードしてご活用ください。

IM-BloomMaker インポートファイル : cookbook_189891_im_bloommaker-data

以下の定義が含まれています。

種別 ID
コンテンツ im_cookbook_189891
ルーティング im_cookbook_189891

IM-BloomMaker のインポート機能を利用してインポートしてください。
インポート後、インポートしたルーティング定義の認可 URI の設定を行ってください。

IM-LogicDesigner インポートデータ : cookbook_189891_im_logicdesigner-data

以下の定義が含まれています。

種別 ID / ルーティング
ロジックフロー im_cookbook_189891_flow_select
ロジックフロー im_cookbook_189891_flow_insert_or_update
ルーティング im_cookbook/189891_select
ルーティング im_cookbook/189891_insert_or_update
ユーザ定義 im_cookbook_189891_user_select
ユーザ定義 im_cookbook_189891_user_insert
ユーザ定義 im_cookbook_189891_user_update

IM-LogicDesigner のインポート機能を利用してインポートしてください。
インポート後、インポートしたルーティング定義の認可 URI の設定を行ってください。

ローカル環境で表示させる場合は、以下の URL にアクセスしてください。
http://localhost:8080/imart/im_cookbook/189891
なおベース URL である以下の部分は、環境に合わせて適宜変更してください。
http://localhost:8080/imart

レシピ

サンプル画面の作成手順を以下に示します。

  1. アプリケーションのデータを保存するため DDL を実行
  2. IM-LogicDesigner インポートファイルをインポートする
  3. デザイン編集
    1. 変数の定義
    2. 画面の作成
    3. アクションの作成
    4. アクションの設定
    5. 動作確認

1. アプリケーションのデータを保存するため DDL を実行

作成するアプリの永続化先として、データベースに新規テーブルを作成します。

テナント管理者でログインしてください。

グローバルナビから「サイトマップ」に遷移し、「テナント管理」→「データベース操作」をクリックしてください。
ここに、以下の SQL を入力し、実行してください。

※ 以下は PostgreSQL での SQL です。他データベースをご利用の場合は、別途テーブルを作成する SQL を実行してください。

2. IM-LogicDesigner インポートファイルをインポートする

完成サンプルからIM-LogicDesigner インポートファイルをダウンロードし、インポートしてください。

3. デザイン編集

コンテンツ種別「Bulma」のコンテンツを作成し、「デザイン編集」ボタンをクリックしてください。

1. 変数の定義

ここでは以下の変数・定数を作成してきます。

変数 説明
initialJson スプレッドシートのデータを格納します。
id DB へ登録するデータに紐づけます。
responseData DB から取得したデータを格納します。
requestReflectData DB からデータを取得する際に使用します。
requestSaveData データを登録・更新する際に使用します。
定数 説明
URL_SELECT DB へアクセスする際の URL です。登録されているデータの取得に使用します。
URL_INSERT_OR_UPDATE DB へアクセスする際の URL です。データの登録・更新に使用します。
  1. 「変数」タブをクリックしてください。

  2. プルダウンの「変数」が選択されていることを確認し、「JSON」アイコンをクリックしてください。

  3. 「JSONエディタ」に以下の JSON を貼り付け、「決定」ボタンをクリックしてください。

  4. プルダウンの「定数」を選択し、「JSON」アイコンをクリックしてください。

  5. 「JSONエディタ」に以下の JSON を貼り付け、「決定」ボタンをクリックしてください。

2. 画面の作成

ここではスプレッドシートのデータを保存する画面を作成します。
保存したデータを呼び出し、更新もできるようにします。

  1. 「コンテナページ」に「レイアウト(Bulma)」-「ボックス」を配置してください。

  2. 「ボックス」内に「フォーム部品(Bulma)」-「水平フィールド」を配置してください。

  3. 「水平フィールドラベル」を選択してください。
    「エレメント固有」プロパティを以下のように設定してください。

    • label(固定値):ID

  4. 「フィールドコンテンツ」内に「フォーム部品(Bulma)」-「テキスト入力」を配置してください。

  5. 「テキスト入力」内の「テキスト入力要素」を選択してください。
    「エレメント固有」プロパティを以下のように設定してください。

    • value(変数値):$variable.id

  6. 「フィールドコンテンツ」内に「フォーム部品(Bulma)」-「ボタン」を2つ配置してください。

  7. 1つ目の「ボタン」内の「ボタン要素」を選択してください。
    「エレメント固有」プロパティを以下のように設定してください。

    • textContent(固定値):Save
    • color(固定値):primary
  8. 2つ目の「ボタン」内の「ボタン要素」を選択してください。
    「エレメント固有」プロパティを以下のように設定してください。

    • textContent(固定値):Reflect
    • color(固定値):info

  9. 「フィールド」を選択してください。
    「エレメント固有」プロパティを以下のように設定してください。

    • grouping:grouped

  10. 「ボックス」内に「IM-Spreadsheet」-「スプレッドシート」を配置してください。
    「エレメント固有」プロパティを以下のように設定してください。

    • initialJson(変数値):$variable.initialJson

    「共通」プロパティを以下のように設定してください。

    • ID:spreadsheet

    「幅・高さ」プロパティを以下のように設定してください。

    • 横幅:100%

3. アクションの作成

ここでは以下のアクションを作成していきます。

アクション 説明
Save スプレッドシートのデータの登録・更新を行います。
Reflect ID に紐づくスプレッドシートのデータを画面に反映します。
  1. 「アクション」タブをクリックしてください。

  2. 「新規作成」アイコンをクリックしてください。
    新しくアクションを作成する際はその都度「新規作成」アイコンをクリックしてください。

Save

入力データをDBに保存します。

  1. 上から順に以下のアクションを配置してください。
    「IM-Spreadsheet」-「スプレッドシート(elementID:〇)を JSON に書き出し、変数〇に代入する」
    「標準」-「変数〇に〇を代入する」
    「標準」-「変数〇に〇を代入する」
    「標準」-「URL〇にリクエストを送信する」

  2. 以下のように設定し、「決定」ボタンをクリックしてください。
    アクション名:Save
    アクション1:スプレッドシート(elementID:〇)を JSON に書き出し、変数〇に代入する
        エレメントID:spreadsheet
        代入先:$variable.initialJson
    アクション2:変数〇に〇を代入する
        代入先:$variable.requestSaveData.id
        代入元(変数値):$variable.id
    アクション3:変数〇に〇を代入する
        代入先:$variable.requestSaveData.data
        代入元(変数値):$variable.initialJson
    アクション4:URL〇にリクエストを送信する
        URL:$constant.URL_INSERT_OR_UPDATE
        メソッド:POST
        リクエストデータ:$variable.requestSaveData

Reflect

ID に紐づくスプレッドシートのデータを画面に反映します。

  1. 上から順に以下のアクションを配置してください。
    「標準」-「変数〇に〇を代入する」
    「標準」-「URL〇にリクエストを送信する」
    「標準」-「変数〇に〇を代入する」

  2. 一番下の「標準」-「変数〇に〇を代入する」に以下の実行条件を配置してください。
    「数値」-「変数〇が〇以上のとき」

  3. 以下のように設定し、「決定」ボタンをクリックしてください。
    アクション名:Reflect
    アクション1:変数〇に〇を代入する
        代入先:$variable.requestReflectData.id
        代入元(変数値):$variable.id
    アクション2:URL〇にリクエストを送信する
        URL:$constant.URL_SELECT
        メソッド:GET
        リクエストパラメータ:$variable.requestReflectData
        レスポンスデータ:$variable.responseData
    アクション3:変数〇に〇を代入する
        代入先:$variable.initialJson
        代入元(変数値):$variable.responseData.records[0].data
        実行条件:変数〇が〇以上のとき
            比較元:$variable.responseData.count
            比較先(固定値):1

4. アクションの設定

作成したアクションを各エレメントに設定してください。

New Page #1

エレメント イベントプロパティ アクション
ボタン(Save) クリック時 Save
ボタン(Reflect) クリック時 Reflect

5. 動作確認

作成した画面の動作確認を行います。
ツールバーの「プレビュー」アイコンをクリックし、プレビュー画面を開いてください。

作成した画面が以下のように動作することを確認してください。
うまく動作しない場合は、レシピの手順を確認してください。

  1. ID を入力し、スプレッドシートを編集する。

  2. 「Save」ボタンをクリックし、再度プレビュー画面を開き直す。

  3. 1 で入力した ID を入力し、「Reflect」ボタンをクリックする。
    1 で編集したスプレッドシートの内容が反映されていること。

  4. スプレッドシートを編集する。

  5. 「Save」ボタンをクリックし、再度プレビュー画面を開き直す。

  6. 1 で入力した ID を入力し、「Reflect」ボタンをクリックする。
    3 で編集したスプレッドシートの内容が反映されていること。

-CookBook
-

執筆者:


comment

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

関連記事

スプレッドシートでシートの保護を利用して、ノード毎に入力セルを制御する

このCookBookでは、スプレッドシートでシートの保護を利用して、ノード毎に入力セルを制御する方法について紹介しています。 Excelでは、シートの保護を利用して、特定のセルのみ入力できるように制御 …

IM-BloomMaker フォーム部品(Bulma)のグループ化と結合の使い方

このCookBookでは、intra-mart Accel Platform 2020 Summer から利用可能になった コンテンツ種別「Bulma」の「フォーム部品(Bulma)」を使用したグルー …

スケジュールにログインしている本人しか表示されない場合の対応方法

このCookBookでは「intra-mart Accel Collaboration」スケジュール機能を利用する前の注意点について紹介しています。 お客様で「intra-mart Accel Col …

AdobeSign連携を利用する

このCookBookでは、IM-Signを利用したサンプルを紹介します。 サンプルでは、Workflow/BISの案件に紐づいたAdobe Signの契約書を作成して、署名を依頼します。 署名が行われ …

IM-Workflowで案件の参照権限を付与する方法

IM-Workflowで申請者や承認者以外で、案件を参照する方法をご紹介いたします。 申請者や承認者以外で、案件を参照する方法は、下記の2つの方法があります。設定方法や参照するための仕様が異なるため、 …