LightBoxImageパターン

開いている画像にフィルタを追加する

結果:

LightBoxImageをクリックした後にバイナリ画像を読み込む（データベースからの画像）

画像を公開するには、最初にRESTサービスを作成し、そのRESTサービスを利用してURLを取得する必要があります。［Logic］タブ（Integrationsフォルダ）に移動して、RESTサービスを作成します。

REST APIを公開するには、以下の手順を実行します。

1.RESTサービスを右クリックし、［Expose REST API］を選択します（GetImagesの呼び出しなど）。

2.［Expose REST API］を右クリックし、REST APIメソッドを追加します（GetFullImageの呼び出しなど）。

3.入力パラメータを追加してURLを公開します。PictureIDを呼び出し、データ型をPictures Identifierに設定します。［Advanced］セクションの［Receive IN］ドロップダウンで、［URL］オプションを選択します。

4.出力パラメータを追加し（Imageの呼び出しなど）、データ型をBinary Dataに設定します。［Advanced］セクションの［Send IN］ドロップダウンで、［Body］オプションを選択します。

5.GetFullSizeImage REST APIメソッドで、PicturesデータベースをドラッグしてPictures.Id=PictureIdでフィルタリングします。

6.Assignウィジェットをドラッグし、Image（出力パラメータ）をGetPictureById.List.Current.Pictures.Imageに設定します。

REST APIを利用するには、以下の手順を実行します。

1.RESTサービスを右クリックし、［CONSUME REST API］を選択します（GetImagesの呼び出しなど）。

2.単一のメソッドを追加します。

3.メソッドのURLに、ドメインURL + URLパス（［Expose REST API］で取得） + ?PictureId={PictureId}を貼り付けます。

これで、LightBoxImageパターンを使用してデータベースからのすべての画像を表示する画面を作成できます。

1.新しい画面を追加します。

2.画面を右クリックし、［Fetch data from other resources］を選択します（GetImagesIdsの呼び出しなど）。

3.Output parameterの名前をListに変更し、Pictures Identifier Listをデータ型として定義します。

4.PicturesデータベースをGetImagesIdsアクションとListAppendAllアクションにドラッグします。

5.ListAppendAllで、Aggregateをソースリストとして設定し（GetPictures.List）、画像からPictures Identifierにマッピングします。これを行うには、［Value］オプションをPictures.Idに設定します。

6.Listウィジェットを画面にドラッグします。

7.LightboxImageパターンをListウィジェットにドラッグします。

8.LightboxImageのImageURLパラメータを、「URL REST API + 取得したデータ」に設定します。
a. "/your-module/rest/GetImages/GetFullSizeImage?PictureId=" + GetImagesIds.List.Current

9.Lightboxのサムネイル画像で、TypeをExternal URLに設定し、URLを「REST API + 取得したデータ」に設定します。
a. "/your-module/rest/GetImages/GetFullSizeImage?PictureId=" + GetImagesIds.List.Current

10.アプリをパブリッシュします。

外部URL画像を使用するLightBoxImage

1.画面にデータベースをドラッグします。

2.LightBoxImageパターンをListウィジェットにドラッグします。

3.LightBoxImageのImageURLパラメータを設定し、サムネイル画像を外部URLに設定します。
例: GetPictures.List.Current.Pictures.ExternalURL。

4.アプリをパブリッシュします。