Skip to main content

 

 

 

 
Language:
 
モバイルアプリとリアクティブWebアプリにのみ適用されます
Service Studioバージョン :
 
 
OutSystems

Lightbox Imageのリファレンス

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

結果:

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

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

1.RESTサービスを右クリックし、[Expose REST API]を選択します(GetImagesの呼び出しなど)。

1.[Expose REST API]を右クリックし、REST APIメソッドを追加します(GetFullImageの呼び出しなど)。

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

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

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

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

![](images/2017_10_31_15_48_17_LighBoxImage_documentation_Google_Docs.png)

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

1.RESTサービスを右クリックし、[CONSUME REST API]を選択します(GetImagesの呼び出しなど)。

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

1.メソッドのURLに、ドメインURL + URLパス([Expose REST API]で取得) + ?PictureId={PictureId}を貼り付けます。

![](images/2017_10_31_15_48_32_LighBoxImage_documentation_Google_Docs.png)

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

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

1.画面を右クリックし、[Fetch data from other resources]を選択します(GetImagesIdsの呼び出しなど)。

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

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

![](images/2017_10_31_15_48_55_LighBoxImage_documentation_Google_Docs.png)

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

![](images/2017_10_31_15_50_07_LighBoxImage_documentation_Google_Docs.png)

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

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

![](images/2017_10_31_15_50_22_LighBoxImage_documentation_Google_Docs.png)

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

![](images/2017_10_31_15_50_52_LighBoxImage_documentation_Google_Docs.png)

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

![](images/2017_10_31_15_51_12_LighBoxImage_documentation_Google_Docs.png)

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

外部URL画像を使用するLightBox Image

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

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

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

![](images/2017_10_31_15_51_44_LighBoxImage_documentation_Google_Docs.png)

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

レイアウトおよびクラス

  • Was this article helpful?