ページで画像を動的に表示する方法
お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。
要件
フォームに保存されている画像を、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%>
- <%
- }%>