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

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

アプリケーションに画像項目がある場合、アップロードされた画像はポップアップで即座にプレビューできます。これにより、ユーザーはアップロード内容をすばやく確認でき、送信を確定する前に正しい画像が選択されていることを確実にできます。

このチュートリアルでは、画像項目を含むサブフォームを持つメインフォームに焦点を当てます。このサブフォームをアップロードする画像と呼びます。さらに、アップロードされた画像を一時的に保存するためのStore 画像という別フォームを使用します。一時的に保存されたこれらの画像はページ上でプレビュー用に表示され、フォームが送信されると自動的に削除されます。

メモ: Store 画像フォームのレポートを公開して、暗号化キーを取得します。このキーは関数内で使用し、画像のプレビューを行います。

フォームを作成し、以下の項目を追加して画像をアップロードし、プレビュー用にアップロード画像を一時保存します。

フォーム

フォームリンク名

項目タイプ

項目名

項目リンク名

Store 画像

Store_Image

画像

Temp 画像

Temp_Image

アップロードする画像

Upload_Images

サブフォーム

画像
判定ボックス
ルックアップ(Store_Image)

サブフォーム

画像
表示
ID

サブフォーム

画像
表示
ID

レポートを公開します。対象はStore 画像フォームのレポートで、この例ではAll_Store_Imagesになります。
関数を作成し、以下の詳細に従ってプレビュー用の画像をダウンロードします。
Deluge エディターに次のスクリプトを追加します。これにより、画像の URL を取得し、動的にプレビューできるようになります。

string getimage(int id)
{
imageRecord = Store_Images[ID = id];
if(imageRecord。件数() > 0)
{
//画像データの ID とパスを取得します。
imageRecordId = imageRecord。ID;
imageRecordPath = imageRecord。Temp_Image;
subStringStart = imageRecordPath。lastIndexOf('画像/') + 6;
subStringEnd = imageRecordPath。lastIndexOf('\' border');
imagePath = imageRecordPath。subString(subStringStart,subStringEnd);
img = 'https://creator.zohopublic.com/<adminUserName>/<appLinkName>/<reportLinkName>/'+ imageRecordId + '/<fieldLinkName>/image-download/<encryptedKey>/' + imagePath;
}
返品する img;
}

上記のスクリプト内の変数を、以下の表に示す該当するデータに置き換えてください。

<adminUserName>	は、アプリケーションの所有者のユーザー名です。
<appLinkName>	は、アプリケーションのリンク名です。
<reportLinkName>	は、公開済みレポートのリンク名です。
<fieldLinkName>	は、アップロードされた画像を一時的に保存する項目のリンク名です。
<encryptedKey>	は、ページを公開する際に作成される一意のキーです。公開済みレポートの URL 内で確認できます。例として、次の公開 URL の場合: https://creatorapp.zohopublic.com/zylker/it-asset-tracker/report-perma/All_Store_Images/nDm8eJMv4TTKMd1qOZnqA0Je8dj90rW0CbQZBBPZxZd6fM02GmuUnPa962bDKWPXmnJ8vEMdF7rpWgM3jhRb6SR8kd213G2b4nbt 暗号化キーは次の部分です。 nDm8eJMv4TTKMd1qOZnqA0Je8dj90rW0CbQZBBPZxZd6fM02GmuUnPa962bDKWPXmnJ8vEMdF7rpWgM3jhRb6SR8kd213G2b4nbt

ページを作成し、名前を画像プレビューとし、次のページ変数を追加します。

変数名	データ型
image_preview	string

ページに ZML スニペット要素をドラッグ＆ドロップします。
次のスクリプトを Deluge エディターに追加します。このスクリプトはページ変数の入力からデータ ID を取得し、表示のために getImage 関数に渡します。

<%{
input。画像 = thisapp。getimage(input。image_preview。toNumber());
%>
<panel elementName='Panel'>
<pr width='fill' height='fill'>
<pc padding='20px' bgColor='#FFFFFF' width='100%' hAlign='center' vAlign='middle'>
<pr width='auto' height='auto'>
<pc>
<画像 color='#FFFFFF' bgColor='#2D2D2D' width='500px' height='400px' 種類='weburl' 値='<%=input。画像%>' size='38px' cornerRadius='0px' iconType='outline' /> </pc>
</pr>
</pc>
</pr>
</panel>
<%
}%>

ワークフローを作成し、サブフォームのユーザー入力時に表示項目を実行して画像をプレビューできるようにします。
次のスクリプトを Deluge エディターに追加します。

if(row。画像 != null)
{
//画像を Store_Images に追加します
add_images = insert into Store_Images
[
Added_User=Zoho。loginuser
Temp_Image=row。画像
];
//Temp_Images から最後に追加されたデータを取得します
last_added = Store_Images[ID != 0] 並べ替える by Added_Time desc;
//画像の新しいデータ ID を行のルックアップ項目に設定します
row。LookupID=last_added。ID;
//特定の ID を変数に代入します
img = Store_Images[ID == row。LookupID].ID;
if(img != null)
{
//データ ID とページパラメーターを指定してページを開きます
openUrl('#Page:Image_Preview?image_preview=' + img,'popup window','height=auto,width=auto');
}
}

サブフォーム内の ID ルックアップ項目を非表示にするには、アップロードする画像フォームの読み込み時に別のワークフローを作成します。データイベントを作成または編集に設定し、ワークフロー名を項目を非表示とします。
[新しいアクションを追加]をクリックし、Deluge エディターに次のスクリプトを入力します。

隠す SubForm。LookupID;

Store 画像フォームに一時的に保存された画像を削除するには、Upload_Images フォームの送信成功時にワークフローを作成します。データイベントを作成または編集に設定し、ワークフロー名をTemp 画像を削除とします。
[新しいアクションを追加]をクリックし、Deluge エディターに次のスクリプトを入力します。