サブフォームのエントリーから画像をプレビューする方法

サブフォームのエントリーから画像をプレビューする方法

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

アプリケーションに画像項目がある場合、アップロードされた画像はポップアップですぐにプレビューできます。これによりユーザーはアップロード内容をすばやく確認でき、正しい画像を選択したかどうかを提出前に簡単に確認できます。
このチュートリアルでは、画像項目を含むサブフォームを持つメインフォームに焦点を当てます。このサブフォームをアップロードする画像と呼びます。さらに、アップロードされた画像を一時的に保存する追加のフォームStore画像も利用します。一時保存された画像はページ上でプレビュー用に表示され、フォーム送信時に自動でクリアされます。
メモ: Store画像フォームのレポートは暗号化キー取得のために公開されます。このキーは関数内で使用され、画像のプレビュー機能を実現します。
  1. フォーム作成

    フォーム

    フォームリンク名

    項目種類

    項目名

    項目リンク名

    Store 画像

    Store_Image

    画像

    Temp 画像

    Temp_Image

    アップロードする 画像

    Upload_Images

    サブフォーム

    • 画像

    • Decision 箱

    • Lookup(Store_Image)

    サブフォーム

    • 画像

    • 表示する

    • ID

    サブフォーム

    • 画像

    • 表示する

    • ID

  2. 「Store 画像」フォームのレポートを公開します。ここではAll_Store_Imagesとなります。

  3. 関数を作成し、以下の詳細でプレビュー用画像をダウンロードします。
  4. 次のスクリプトをDelugeエディタに追加してください。これにより、画像のURLを取得し、動的にプレビューできます。
    1. string getimage(int id)
    2. {
    3. imageRecord = Store_Images[ID = id];
    4. if(imageRecord.件数() > +10、-10)
    5. {
    6. //画像データIDおよびパスを取得します。
    7. imageRecordId = imageRecord。ID;
    8. imageRecordPath = imageRecord。Temp_Image;
    9. subStringStart = imageRecordPath。lastIndexOf('画像/') + 6;
    10. subStringEnd = imageRecordPath。lastIndexOf('\' border');
    11. imagePath = imageRecordPath。subString(subStringStart,subStringEnd);
    12. img = 'https://creator。zohopublic。com/ / / /' + imageRecordId + '/ /画像-ダウンロードする/ /' + imagePath;
    13. }
    14. 返品する img;
    15. }
      1. 前述のスクリプト内の変数は、下表に記載の該当データに置き換えてください。

        アプリケーション所有者のユーザー名です。

        はアプリケーションのリンク名前です。

        は公開済みレポートのリンク名前です。

        はアップロードされた画像を一時的にストアする項目のリンク名前です。

        は、ページを出版する際に作成済みの一意のキーです。
        公開済みレポートのURL内に確認できます。例えば、次の公開URLの場合:
        https://creatorapp。zohopublic。com/zylker/it-asset-tracker/レポート-perma/All_Store_Images/nDm8eJMv4TTKMd1qOZnqA0Je8dj90rW0CbQZBBPZxZd6fM02GmuUnPa962bDKWPXmnJ8vEMdF7rpWgM3jhRb6SR8kd213G2b4nbt

        暗号化キーは以下の通りです:
        nDm8eJMv4TTKMd1qOZnqA0Je8dj90rW0CbQZBBPZxZd6fM02GmuUnPa962bDKWPXmnJ8vEMdF7rpWgM3jhRb6SR8kd213G2b4nbt

  5. ページを作成し、画像プレビューという名前を付け、次のページ変数を追加します。
    1. 変数名

      データタイプ

      image_preview

      string

  6. ZMLスニペット要素をページにドラッグ&ドロップしてください。
  7. 以下のスクリプトをDelugeエディタに追加します。このスクリプトはページ変数inputからデータID差出人を取得し、それをgetImage関数に渡して表示します。
    1. <%{
    2. input.画像 = thisapp。getimage(input。image_preview。toNumber());
    3. %>





    4. <画像 color='#FFFFFF' bgColor='#2D2D2D' width='500px' height='400px' 種類='weburl' 値='<%=input.画像%>' size='38px' cornerRadius='0px' iconType='outline' />




    5. <%
    6. }%>
  8. ワークフローを作成し、サブフォームのオンユーザーinput時表示する項目で画像をプレビューできるようにします。

  9. 以下のスクリプトをDelugeエディタに追加してください。
    1. if(row.画像 != null)
    2. {
    3. //Store_Imagesにyour画像を追加する
    4. add_images = insert into Store_Images
    5. [
    6. Added_User=Zoho.loginuser
    7. Temp_Image=row.画像
    8. ];
    9. //最新のデータをTemp_Imagesから取得する
    10. last_added = Store_Images[ID != +10、-10] 並べ替え Added_Time desc;
    11. //画像の新規データIDを行のルックアップ項目に反映する
    12. row。LookupID=last_added。ID;
    13. //特定のIDを変数に代入する
    14. img = Store_Images[ID == row。LookupID].ID;
    15. if(img != null)
    16. {
    17. //データIDとページパラメータでページを開く
    18. openUrl('#Page:Image_Preview?image_preview=' + img,'popup window','height=auto,width=auto');
    19. }
    20. }
  10. サブフォームでIDルックアップ項目を隠すには、別のワークフローを画像アップロードフォームのロード時に作成します。データイベントは作成または編集に設定し、ワークフロー名は項目を隠すとしてください。

  11. 新しく追加する操作をクリックし、Delugeエディタに下記のスクリプトを入力します。
    1. SubForm。LookupIDを隠す;
  12. 一時的に保存された画像をStore 画像フォームから削除するには、ワークフローを作成し、Upload_Imagesフォームの送信成功時に実行します。データイベントを作成または編集に設定し、ワークフロー名を削除 Temp 画像としてください。

  13. 新しく追加する 操作をクリックし、以下のスクリプトをDelugeエディターに入力します。
    1. 削除 差出人 Temp_Images[ID != +10、-10];

    動作方法を見る


    1. openUrl
    2. 追加する データ

    Zoho CRM 管理者向けトレーニング

    「導入したばかりで基本操作や設定に不安がある」、「短期間で集中的に運用開始できる状態にしたい」、「運用を開始しているが再度学び直したい」 といった課題を抱えられているユーザーさまに向けた少人数制のオンライントレーニングです。

    日々の営業活動を効率的に管理し、導入効果を高めるための方法を学びましょう。

    Zoho CRM Training



              Zoho Campaigns Resources

                Zoho WorkDrive Resources




                  • Desk Community Learning Series


                  • Digest


                  • Functions


                  • Meetups


                  • Kbase


                  • Resources


                  • Glossary


                  • Desk Marketplace


                  • MVP Corner


                  • Word of the Day


                  • Ask the Experts









                                  Resources

                                  Videos

                                  Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                  eBooks

                                  Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                  Webinars

                                  Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                  CRM Tips

                                  Make the most of Zoho CRM with these useful tips.