ページで画像を動的に表示する方法

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

要件

フォームに保存されている画像を、Zoho Creator のページ上に動的に表示します。

ユースケース

組織内のタスクを管理する Zoho Creator タスク管理アプリケーションを利用しているとします。このアプリケーションのダッシュボードページでは、従業員がアプリにアクセスした際に、その従業員のログインメールアドレスに基づいて本人のプロフィール写真が表示されます。これにより、パーソナライズされた視覚的にわかりやすいユーザーエクスペリエンスを提供できます。

動作を見る

手順

フォームを作成し、従業員情報を保存するために次の詳細を設定します。

フォーム名	フォームリンク名	項目タイプ	項目名	項目リンク名
従業員詳細	Employee_Details	名前	従業員名	Employee_Name
		メール	メール	メール
		日付	生年月日	Date_of_Birth
		電話番号	電話番号	電話番号
		住所	住所	住所
		シングルライン	従業員 ID	Employee_ID
		画像	Photo	Photo

ページを作成し、アプリケーションにアクセスした際に従業員がタスクとそのステータスを確認できるよう、「ダッシュボード」という名前を付けます。必要に応じて、設定に合わせて必要なコンポーネントを追加します。次のリンクを参照し、以下のようなタスク管理アプリケーション用ダッシュボードの構築方法を確認してください。
HTML スニペットをドラッグ＆ドロップでダッシュボードページに追加します。
HTML スニペット内に、次のスクリプトを追加します。

<%{
//ログインユーザー ID に基づき、「従業員詳細」フォームの Photo 項目にアップロードされた従業員写真の画像 URL を取得します。
image_link = Employee_Details[メール == Zoho。loginuserid].Photo;
//従業員写真が取得できた場合、取得した画像 URL 内のパラメーターを置き換えます。
if(image_link!=null)
{
//取得した画像 URL 内のパラメーターを、replaceAll() 関数を使用して実際の値に置き換えます。
image_link = image_link。replaceAll('https://creatorexport.zoho.com/sharedBy/appLinkName/','https://creator.zoho.com'+ Zoho。appuri)
image_link = image_link。replaceAll('viewLinkName','All_Employee_Details');
image_link = image_link。replaceAll('fieldName','Photo');
//URL の末尾に標準的な HTML 属性を追加します。
image_link = image_link。replaceAll('>','width=\'140\' height=\'140\' style=\'display: flex; justify-content: center; align-商品: center;\'>');
}
//従業員写真のデータを取得できない場合は、スニペットにデフォルト画像を表示します。
else
{
//データを取得できない場合にデフォルトとして表示するため、<img> タグ内に公開 URL を指定します。
image_link = '<img src=\'https://desk.zoho.com/portal/api/kbCategory/4000000217879/logo/327583000026924010?orgId=4241905\'\'width=\'140\' height=\'140\' style=\'display: flex; justify-content: center; align-商品: center;\'>';
}
%>
<%=image_link%>
<%
}%>