Lightbox Imageのリファレンス
開いている画像にフィルタを追加する
結果:
Lightbox Imageをクリックした後にバイナリ画像を読み込む(データベースからの画像)
画像を公開するには、最初にRESTサービスを作成し、そのRESTサービスを利用してURLを取得する必要があります。[Logic]タブ(Integrationsフォルダ)に移動して、RESTサービスを作成します。
REST APIを公開するには、以下の手順を実行します。
-
RESTサービスを右クリックし、[Expose REST API]を選択します(GetImagesの呼び出しなど)。
-
[Expose REST API]を右クリックし、REST APIメソッドを追加します(GetFullImageの呼び出しなど)。
-
入力パラメータを追加してURLを公開します。PictureIDを呼び出し、データ型をPictures Identifierに設定します。[Advanced]セクションの[Receive IN]ドロップダウンで、[URL]オプションを選択します。
-
出力パラメータを追加し(Imageの呼び出しなど)、データ型をBinary Dataに設定します。[Advanced]セクションの[Send IN]ドロップダウンで、[Body]オプションを選択します。
-
GetFullSizeImage REST APIメソッドで、PicturesデータベースをドラッグしてPictures.Id=PictureIdでフィルタリングします。
-
Assignウィジェットをドラッグし、Image(出力パラメータ)をGetPictureById.List.Current.Pictures.Imageに設定します。
REST APIを利用するには、以下の手順を実行します。
-
RESTサービスを右クリックし、[CONSUME REST API]を選択します(GetImagesの呼び出しなど)。
-
単一のメソッドを追加します。
-
メソッドのURLに、ドメインURL + URLパス([Expose REST API]で取得) + ?PictureId={PictureId}を貼り付けます。
これで、LightBoxImageパターンを使用してデータベースからのすべての画像を表示する画面を作成できます。
-
新しい画面を追加します。
-
画面を右クリックし、[Fetch data from other resources]を選択します(GetImagesIdsの呼び出しなど)。
-
Output parameterの名前をListに変更し、Pictures Identifier Listをデータ型として定義します。
-
PicturesデータベースをGetImagesIdsアクションとListAppendAllアクションにドラッグします。
-
ListAppendAllで、Aggregateをソースリストとして設定し(GetPictures.List)、画像からPictures Identifierにマッピングします。これを行うには、[Value]オプションをPictures.Idに設定します。
-
Listウィジェットを画面にドラッグします。
-
LightboxImageパターンをListウィジェットにドラッグします。
-
Lightbox ImageのImageURLパラメータを、「URL REST API + 取得したデータ」に設定します。
a. "/your-module/rest/GetImages/GetFullSizeImage?PictureId=" + GetImagesIds.List.Current -
Lightboxのサムネイル画像で、TypeをExternal URLに設定し、URLを「REST API + 取得したデータ」に設定します。
a. "/your-module/rest/GetImages/GetFullSizeImage?PictureId=" + GetImagesIds.List.Current -
アプリをパブリッシュします。
外部URL画像を使用するLightBox Image
-
画面にデータベースをドラッグします。
-
LightBoxImageパターンをListウィジェットにドラッグします。
-
LightBoxImageのImageURLパラメータを設定し、サムネイル画像を外部URLに設定します。
例: GetPictures.List.Current.Pictures.ExternalURL。 -
アプリをパブリッシュします。