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

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

要件

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

使用例

Zoho Creator のタスク管理アプリケーションを使用して、組織内のタスクを管理するとします。このアプリケーションのダッシュボードページでは、従業員が自分のログインメールアドレスに基づいて権限写真を表示できるようになっています。これにより、個別化された視覚的に魅力的なユーザー体験を提供します。

動作方法を見る

手順

フォームの作成

フォーム名	フォームリンク名	項目タイプ	項目名	フィールドリンク名
従業員詳細	Employee_Details	名前	従業員名	Employee_Name
		メール	メール	メール
		日付	生年月日	生年月日
		電話番号	電話番号	電話番号
		住所	住所	住所
		Single 折れ線グラフ	従業員 ID	Employee_ID
		画像	写真	写真

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

<%{
//ログインユーザーIDに紐づく従業員詳細フォームのPhoto項目にアップロードされた従業員写真の画像URLを取得します。
image_link = Employee_Details[メール == Zoho.loginuserid].Photo;
//従業員写真が取得できた場合、取得した画像URL内のパラメーターを置き換えます。
if(image_link!=null)
{
//replaceAll()関数を使い、取得した画像URL内のパラメーターを実際の値に置き換えます。
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
{
//データが取得できない場合は、タグ内に標準画像の公開URLを指定し、初期設定画像として表示します。
image_link = 'https://desk.Zoho.com/ポータル/api/kbCategory/4000000217879/ロゴ/327583000026924010?orgId=4241905\'\'width=\'140\' height=\'140\' style=\'display: flex; justify-content: center; align-商品: center;\'>';
}
%>
<%=image_link%>
<%
}%>