Skip to main content

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

Template:OutSystems/OSLanguageSwitcher
Language:

 

 

 

 

 
OutSystems

OutSystemsでデータベースからデータを取得して表示する

画面にデータを表示するときなど、データベースからデータを取得する必要がある場合がよくあります。OutSystemsでデータベースからデータを効率よく取得するには、Aggregateを使用します。

このドキュメントでは、2つの手順について説明します。

1.データを取得します。まず、データベースからデータを読み込む必要があります。この例ではOutSystemsのサンプルデータのエンティティを使用していますが、独自のエンティティを使用することもできます。 1.データを表示します。アプリでデータを取得したら、すべてのレコードまたはその一部のみを表示することができます。この例ではListウィジェットを使用していますが、Tableウィジェットやその他のウィジェットを追加することもできます。

この記事は作成中です。この新しいバージョンはどの程度参考になりましたか。投票でお聞かせください。

データベースからデータを取得する

Aggregateを使用してアプリでデータを取得する方法を以下に示します。Aggregateを使用するとデータを手軽に取得できます。データベースの知識は必要ありません。これはシンプルなアプリであるため、データをメインモジュールから直接参照できます。

この例では、Aggregateを使用して画面でデータを取得します。Aggregateと画面はいずれもクライアントで実行されます。サーバーロジックでのAggregateの作成の詳細については、「サーバー側のAggregate」をご覧ください。

  1. 最初に、新しいアプリを作成します

1.アプリに画面を追加します。[Interface]タブのUI Flowsに移動し、MainFlowを右クリックして[Add Screen]を選択します。[New Screen]ウィンドウで[Empty]を選択し、画面名に「Home」と入力して、[CREATE SCREEN]をクリックします。Service Studioによってアプリに空白の画面が追加されます。

![New Screenウィンドウ](images/new-screen-ss.png?width=700)

1.[Manage Dependencies]ウィンドウ(Ctrl+Q)でエンティティを参照し、アプリにデータソースを追加します。このサンプルアプリでは、OutSystemsのサンプルデータを参照しています。エンティティを参照すると、Service Studioの[Data]タブのEntities > Databaseで使用できるようになります。

![Service Studioのデータベースエンティティ](images/database-entities-ss.png?width=350)

<div class="info" markdown="1">

既存のエンティティを参照する代わりに、[Excelからデータをインポート](../excel-bootstrap.md)して新しいエンティティを作成することができます。

</div>
  1. 1-Click Publish]ボタンをクリックしてアプリをパブリッシュします。この手順はオプションですが、これによって後でデータのプレビューをアプリで表示できるようになります。

1.次に、データを画面に読み込みます。[Interface]タブのUI Flows > Main Flowに移動し、[Home]画面を右クリックします。[Fetch Data from Database]を選択します。新しいAggregateの編集画面が開き、データが必要であることを示す通知が表示されます。

![空白のAggregate](images/fetch-data-aggregate-open-ss.png?width=800)

1.Aggregateを開いたまま、[Data]タブのEntities > Database > OutSystemsSampleDataDBに移動します。Sample_Employeeエンティティを[Aggregate]ウィンドウにドラッグします。OutSystemsのサンプルデータではなく独自のデータを使用する場合は、その他のエンティティをドラッグします。Service Studioでデータのプレビューが列に表示され、エンティティ名がAggregateの名前になります。

![Aggregateのデータのプレビュー表示](images/fetch-data-aggregate-with-entity-ss.png?width=800)

<div class="info" markdown="1">

プレビューが表示されずに警告が表示される場合は、続行してアプリをパブリッシュし、参照を更新してからプレビューをリフレッシュします。

</div>
  1. Interface]タブのUI Flows > Main Flow > Homeに戻り、画面のGetEmployees Aggregateに注目します。Aggregateを展開してエンティティを表示し、エンティティを展開してアトリビュートのリストを表示します。データをどこにも使用していないことを示す警告も表示されます。警告が表示されないようにするには、アプリにデータを表示する方法の手順を実行します。

    画面のAggregate

ウィジェットにデータを表示する

データベースからデータを取得したら、OutSystemsの多数のウィジェットの1つを使用してデータをユーザーに表示します。前のセクションに引き続き、この例では従業員の姓を含むリストを作成します。

1.[Home]画面を編集用に開きます。そのためには、[Interface]タブのUI Flows > Main Flowで[Home]をダブルクリックします。

1.検索バーでListウィジェットを検索し、ウィジェットを画面にドラッグします。これで、空白のListウィジェットが表示されます。

![ウィジェットと画面](images/fetch-data-new-widget-ss.png?width=600)

1.Listウィジェットをクリックして選択し、プロパティに移動します。[Source]フィールドで[GetEmployees.List]を選択します。これにより、アプリがこのウィジェットで使用するデータソースが指定されました。

![ウィジェットとSourceプロパティ](images/fetch-data-widget-with-data-source-ss.png?width=700)

<div class="info" markdown="1">

**Sample_Employees**エンティティは、OutSystemsのサンプルデータです。詳細については、[データの取得](#fetch-data-from-a-database)に関するセクションをご覧ください。

</div>
  1. Listウィジェットをデータソースに接続して、Listにデータを表示するアトリビュートを追加します。[Interface]タブのUI Flows > Main Flow > Home > GetEmployees > Sample_Employeeで、エンティティを展開してアトリビュートを表示します。LastNameなどのアトリビュートをListウィジェットにドラッグします。これにより、データベースに含まれるすべての姓のリストがウィジェットに表示されるようになりました。

    エンティティのアトリビュートのウィジェットへのドラッグ

1.アプリをパブリッシュし、ブラウザで読み込みます。従業員の姓のリストを表示するListウィジェットが表示されます。

![ブラウザで実行中のアプリ](images/fetch-data-browser.png?width=400)

従来のWebアプリ

従来のWebアプリにAggregateを追加する方法の詳細については、従来のWebアプリのAggregateに関する説明をご覧ください。