ルックアップフィールドの選択に応じてサブフォーム行に画像を動的表示する方法

ルックアップフィールドの選択に応じてサブフォーム行に画像を動的表示する方法

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

フォームに保存されている画像は、サブフォーム内で動的に取得して表示できます。ユーザーがサブフォーム行のルックアップ項目でデータを選択すると、そのデータに関連付けられている画像を、同じ行内の指定したリッチテキスト項目に表示できます。この機能により、各選択内容に対して視覚的な参照が提供されるため、ユーザーは別のビューやデータに移動することなく、商品をすばやく識別できます。
これは、ユーザーがルックアップ項目から標準商品を選択して注文を行うような、注文管理のケースで便利です。該当する画像は、同じ行のリッチテキスト項目に表示されます。
このチュートリアルでは、Store 画像フォームとDisplay 画像フォームの 2 つのフォームの作成に焦点を当てます。Store 画像フォームには、画像を保存するための画像項目と、各画像の参照名を保存するための単一行テキスト項目を含めます。Display 画像フォームには、Store 画像フォームから参照名を選択するためのルックアップ項目を含むサブフォームを追加します。このルックアップの選択内容に基づいて、対応する画像がサブフォーム内に動的に表示されます。
Notes
メモ: Store 画像フォームのレポートを公開して、暗号化キーを取得します。このキーは、画像をプレビューするための関数内で使用されます。
  1. サブフォーム行のルックアップ項目の選択に基づいて画像を動的に表示するため、次の内容でフォームを作成します。

    フォーム

    フォームリンク名

    項目タイプ

    項目名

    項目リンク名

    Store 画像

    Store_Image

    単一行テキスト

    参照名

    Reference_Name

    画像

    画像

    画像

    Display 画像

    Display_Images

    サブフォーム

    • ルックアップ（Store 画像）

    • リッチテキスト

      

    サブフォーム

    • 画像参照名

    • 画像プレビュー

    サブフォーム

    • Image_Reference_Name

    • Image_Preview
      2. Notesメモ:ユーザーがアクセスした際にツールバーを非表示にするには、リッチテキスト項目の項目プロパティで、ツールバー設定のすべてのチェックを外してください。
  2. Store 画像フォームのレポートを公開します。この例では、Store 画像 レポートになります。

  3. ワークフローを作成し、Display 画像フォームのサブフォーム内にある画像参照名項目のユーザー入力時に実行されるように設定します。データ Eventとして作成 or 編集を選択します。このワークフローは、Store 画像フォームから画像を取得し、Display 画像フォームのサブフォームで選択された画像参照名に基づいて、リッチテキスト項目にプレビュー表示します。

  4. 新しいアクションを追加をクリックし、Deluge エディターに次のスクリプトを追加します。
if(row。Reference_Name != null)
  1. {
  2. //レコードを取得し、参照名ルックアップの選択で一致する ID に基づいて、Store 画像フォームから画像データを取得します。
  3. fetch_Record = Store_Images[ID == row。Image_Reference_Name];
  4. //画像 URL を取得
  5. fetch_imageUrl = fetch_Record。画像;
  6. //画像の公開 URL を構築します。
  7. subStringStart = fetch_imageUrl。lastIndexOf('画像/') + 6;
  8. subStringEnd = fetch_imageUrl。lastIndexOf('\' border');
  9. imagePath = fetch_imageUrl。subString(subStringStart,subStringEnd);
  10. Public_image = 'https://creator.zohopublic.com'+Zoho。appuri+'Store_Images_Report/'+ row。Image_Reference_Name + '/Image/image-download/<encryptedKey>/' + imagePath;
  11. //リッチテキスト項目に画像を埋め込みます。
  12. row。Rich_Text='<img src=' + img + ' width='100' height='100'>';
  13. }

ここで、
<encryptedKey>
は、レポートを公開する際に生成される一意のキーです。公開済みレポートの URL 内で確認できます。例えば、次の公開 URL の場合: https://creatorapp.zohopublic.com/zylker/it-asset-tracker/report-perma/All_Store_Images/nDm8eJMv4TTKMd1qOZnqA0Je8dj90rW0CbQZBBPZxZd6fM02GmuUnPa962bDKWPXmnJ8vEMdF7rpWgM3jhRb6SR8kd213G2b4nbt

暗号化キーは次の部分です。
nDm8eJMv4TTKMd1qOZnqA0Je8dj90rW0CbQZBBPZxZd6fM02GmuUnPa962bDKWPXmnJ8vEMdF7rpWgM3jhRb6SR8kd213G2b4nbt

動作を確認する


  1. データの取得
  2. レポートの公開