Skip to main content

 

OutSystems 11オンラインヘルプ

 

Webアプリケーションが対象
OutSystems

最初のWebアプリを作成する

OutSystemsでWebアプリを開発するのは簡単です。データを含むExcelファイルがある場合、データベースにインポートし、エンタープライズレベルのアプリケーションをすばやく作成してデータを管理できます。Excelファイルがなくても心配ありません。サンプルファイルを用意しています。

Excelファイルからインポートしたデータを含むアプリケーションを作成するには、以下の操作が必要です。

  1. データベースモデルを作成し、そのデータをExcelファイルからデータベースにインポートします。
  2. データベースのデータをリスト表示する画面を作成します。
  3. 新規レコードの作成や既存レコードの更新ができる画面を作成します。
  4. データベースからレコードを削除する機能を実装します。
  5. アプリケーションをパブリッシュします。

それでは、実行してみましょう。この例では、連絡先情報が含まれている、あらかじめ用意されたExcelファイルを使用し、簡単な連絡先管理アプリケーションを作成します。

Webアプリを作成する

それでは、新しい連絡先情報管理Webアプリを作成しましょう。アプリケーションには1つ以上のモジュールが含まれており、アプリケーションの様々な部分をモジュールにカプセル化できます。モジュールとは、アプリケーションのデータモデルを設計し、ロジックを実装し、UIを設計する場所です。

Service Studioで、[New Application]をクリックして[Web App]を選択し、Top Menuテンプレートを選択してContact Portalという名前を付けます。

Webアプリを作成する

新しいContact Portalアプリケーションで、ContactPortalという名前のWeb Responsiveモジュールを作成します。

モジュールを作成する

Excelファイルからデータベーステーブルを作成する

OutSystemsでは、アプリケーションのデータをリレーショナルデータベースに保存します。つまり、アプリケーション作成の最初の手順はデータモデルを定義することです。

これを行うには、以下の連絡先情報が含まれているExcelファイルを使用します。

  • Name
  • Address
  • Birth date
  • Email

ContactPortalモジュールで、右上の[Data]タブを開きます。Entitiesフォルダを右クリックして[Import Entities from Excel...]を選択し、ディレクトリC:\Program Files\OutSystems\Development Environment 11.0\Service Studio\TutorialResourcesにあるデフォルトで使用可能なサンプルファイルContacts.xlsxを選択します。

Excelファイルからデータベーステーブルを作成する

Excelファイルをインポートする際、OutSystemsはデータベースにデータを保存するために、必要なカラム(OutSystemsでは「アトリビュート」)を持つデータベーステーブル(OutSystemsでは「エンティティ」)を作成します。

また、OutSystemsはバックグラウンドで、Excelファイルの各行をデータベースレコードにインポートするロジックも作成します。アプリケーションをパブリッシュした後、ロジックが自動的に実行され、Excelファイルのデータがデータベースに読み込まれます。

連絡先をリスト表示する画面を作成する

これですべての連絡先をリスト表示する画面を作成できるようになりました。

右上の[Interface]タブを開き、[UI Flows]の下にある[MainFlow]をダブルクリックします。次に、Contactエンティティを[Data]タブから[Main Editor]ウィンドウの空いている領域にドラッグ&ドロップします。

連絡先をリスト表示する画面を作成する

これにより、画面が作成されて一度に50件の連絡先が表示され、ページ数と検索機能が表示されます。

Contacts画面

連絡先を作成・編集する画面を作成する

レコードを作成・編集する画面の作成は、リスト画面の作成と同じくらいすばやくできます。前の手順を繰り返すだけで作成できます。

MainFlowを開いた状態で、Contactエンティティを[Data]タブから[Main Editor]ウィンドウの空いている領域にドラッグ&ドロップします。

連絡先を作成・編集する画面を作成する

これにより、新規レコードの作成や既存のレコードの編集を行うフォームのある新しい画面が作成されます。また、OutSystemsは、レコードを自動的に作成および編集するサーバー側のロジックも追加します。

ContactDetail画面

連絡先の削除を許可する

連絡先を管理するアプリケーションを実装するには、削除機能が不足しています。それでは、実装しましょう!

ContactDetail]画面をダブルクリックして開きます。Buttonウィジェットを、ツールボックスから画面の[Cancel]ボタンの右側にドラッグ&ドロップし、新しいボタンを右クリックして[Link to New 'DeleteContact' Screen Action]を選択します。

OutSystemsは、連絡先レコードを削除するサーバー側のロジックを追加し、ボタンをそのロジックに関連付けます。

Webアプリのパブリッシュ

あとは、アプリケーションを稼働するだけです。1-Click Publish1-Click Publish]ボタンをクリックし、ご利用の環境にアプリケーションをパブリッシュします。

アプリケーションをパブリッシュする

アプリケーションがデプロイされたら、[ブラウザで開く Open in Browser]ボタンをクリックして、アプリケーションをブラウザでテストします。

アプリケーションを開く

  • Was this article helpful?