ExcelをインポートしてMendixのアプリを作る

# はじめに

Mendixのアプリは一から作成する方法、テンプレートを用いて作成する方法の他に、Excelをインポートして作成する方法があります。元になるデータを格納したExcelシートをインポートすると、既存のデータモデルとデータを活かして簡単にアプロを作成することができます。

# 準備

[こちら](https://www.contextures.com/xlSampleData01.html) のサイトからサンプルのデータをダウンロードして説明します。

https://www.contextures.com/SampleData.zip

内容は、

![スクリーンショット 2020-09-29 22.57.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/7e6ea030-45fe-4f99-ae91-90c2be8ad4a0.png)



# 作成

ブラウザーでMendixにログインしたら、「Buzz」または「Apps」の画面で「Create App」ボタンを押します。

![スクリーンショット 2020-09-28 22.21.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/39b5391a-da0d-b021-c354-214f9161e483.png)

「App from a spreadsheet」を選択します。

![スクリーンショット 2020-09-29 21.42.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/ac75fcf5-a530-9a4d-347b-a8e1f85ed62d.png)

「Select Template」をクリックします。

![スクリーンショット 2020-09-29 21.42.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/fc3464da-6789-cfc5-dac8-b7c224b99c6a.png)

イメージが表示されます。「Select This Template」をクリックします。

![スクリーンショット 2020-09-29 21.43.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/9416c968-6ca4-5af4-3638-18219d14aded.png)

アプリの名前を入力します。「Start with data」を「no」にするとデータを使用しませんが、今回は「yes」のままにします。最後に「Create App」をクリックします。

![スクリーンショット 2020-09-29 21.43.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/46ef308a-e1bc-db8b-553c-1e8a9458d649.png)

「Drag and Drop」のところにダウンロードした SampleData.xlsx をドラッグ＆ドロップします。

![スクリーンショット 2020-09-29 21.45.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/d74102cd-0e8b-b18f-cb8f-7fa5aa36e66b.png)

Excelシートが読み込まれてデータが表示されます。「SampleNumbers」のタブは今回不要なので、チェックを外します。

![スクリーンショット 2020-09-29 21.46.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/75b5c8b3-a195-6209-c117-ed5650fa92ea.png)

スクロールして、「Import Data」をクリックします。「Genarate pages for my data」はチェックを入れたままにします。

![スクリーンショット 2020-09-29 21.46.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/c6583731-0153-51ad-bc1a-ec8f355e06f2.png)

作成が完了すると、次のダイアログが表示されます。

![スクリーンショット 2020-09-29 21.47.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/f01f3643-f2e2-18ef-b569-a2df1dcda2e1.png)

# ツアー

アプリが作成されました。「Take the tour」をクリックするとMendix Studioが開かれて作成されたアプリをガイドしてくれます。「Skip」をクリックするとすぐにMendix Studioに遷移します。以下はツアーの様子です。

![スクリーンショット 2020-09-29 21.47.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/03b80e84-21ab-a839-1e0a-50e0dbccd0b3.png)

![スクリーンショット 2020-09-29 21.48.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/4cacf687-2276-8edd-a821-1aa74fe7cdc1.png)

![スクリーンショット 2020-09-29 21.48.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/1098d863-3a0b-8236-e70e-8e3e27484798.png)

![スクリーンショット 2020-09-29 21.48.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/660c9dc2-f7d5-b77f-1638-0608c477941f.png)

# 実行

アプリが作成されたら「Preview」を押すとアプリをプレビューモードで実行できます。これでCRUDが実装されています。

![スクリーンショット 2020-09-29 21.49.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/a40a9be3-a934-21c3-ac61-8ae26eb0a7b7.png)

### ホーム画面

![スクリーンショット 2020-09-29 21.50.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/e1dd138a-b9e6-8b6a-c6c3-d8bdb5812746.png)

### 一覧画面

![スクリーンショット 2020-09-29 21.51.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/c3b1953f-b108-a617-7080-5fcffb059ad9.png)

### 新規登録画面

![スクリーンショット 2020-09-29 21.51.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/6eb35bd1-5380-d9c1-1fe7-708a05c0eb52.png)

### 編集画面

![スクリーンショット 2020-09-29 21.52.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751319/764a7c9c-d4e7-0c06-0a32-686682af9959.png)

# まとめ

Excelシートをインポートして簡単にデータを一覧表示、追加、編集、削除するアプリを作成することができました。