Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

モバイルアプリとリアクティブWebアプリにのみ適用されます

 

 

OutSystems

Lightbox Imageのリファレンス

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

結果:

画像を公開するには、最初に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. Lightbox Imageの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画像を使用するLightBox Image

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

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

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

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

レイアウトおよびクラス

  • Was this article helpful?