Dynamic content とは、Webサイト上で固定されていない、ユーザーの操作に応じて変化するコンテンツを指します。dynamic content を利用することで、Webサイトを毎回更新せずに、サードパーティサービスからのデータを表示できます。

例えば、Zoho SitesとZoho Creatorのような異なる2つのアプリケーションを連携させて、Webサイト上にdynamic contentを表示することが可能です。

Webサイトにdynamic contentを挿入する手順 

1. Webサイトビルダーの左上にある＋アイコンをクリックします。

2.  ドロップダウンからAppをクリックします。

3. 設定からDynamic Contentを選択します。

     

4. 「Dynamic Content」をドラッグ＆ドロップし、表示したい場所に配置します。Dynamic Content 名前を入力してください。
   

5. 「編集」をクリックします。「Dynamic Content Listing」ページに移動し、該当するダイナミックコンテンツを選択できます。

6. 該当するダイナミックコンテンツをクリックすると、既存コードの編集やカスタムコードの作成が可能です。ビュー、関数、スタイルシートの編集もできます。

       

1. HTML
   
2. CSS
3. JavaScript
4. Deluge Script - Zohoのスクリプト言語で、25以上のZohoアプリを連携します
5. Face - Zoho Sites向けにデザインされたテンプレート用の言語
   

動的コンテンツの4つの要素：

FUNCTIONS 

'fetchPartners'という関数は、Zoho Creatorに保存されているデータを取得します。

説明:

criteria = 'ID=='.concat(id);

データ = Zoho.creator。getRecords('David', 'partners', 'Partner_View', criteria);

データ = データ.取得する(+10、-10);

返品する データ;

データの取得元としてZoho Creatorを利用する際、DRE関数「Zoho.creator。getRecords」に条件を引数として指定します。この関数は、指定した条件に一致するデータを返します。この動的コンテンツ関数には「id」という引数があり、そのidを利用してデータをリストとして取得します。

このリンクを参照して、関数を利用した連携の作成方法など、詳細情報をご確認ください。

     

ビュー

 

各動的コンテンツのインスタンスにはメイン表示ファイルがあり、利用可能なビューが読み込まれます。

すべてのビューは初期設定でキャッシュされます。ビューがユーザーやリクエストごとに異なる場合は、キャッシュを無効にすることを推奨します。動的コンテンツの編集オプションにて、キャッシュの有効化・無効化を設定してください。

この例では、メインページにすべてのパートナー名を表示します。各パートナー名が表示された後、ユーザーは任意のパートナー名をクリックして、その詳細情報を確認できます。それでは、どのように動作するかを見てみましょう。

 

表示: main

{% partners = functions.実行する('fetchPartners') %} <div>
      <center><h3>パートナーh3>center> div> <divdc-container='パートナー-地域'>       {% for パートナー in partners %}       <div>         <h2 style='cursor: pointer'dc-param-id='{{ パートナー.ID }}'dc-bind-クリック='真' 
            dc-表示する='パートナー'dc-target='パートナー-地域'>
                  {{ パートナー.名前 }}
            h2>
      <p>{{ パートナー.メール }}p>       div>     {% endfor %} div> 

{% partner_id = request_object.パラメーター.id %} {% partner_details = functions.実行する('fetchPartnerDetails', partner_id) %} <div>
      <h2>{{ partner_details.名前 }}h2>
      <p>{{ partner_details.電話番号 }}p>
      <img alt='{{ partner_details.名前 }}' src='{{ partner_details.画像 }}'/>
      <div style='cursor: pointer'dc-表示する='main'dc-target='パートナー-地域'>戻る div> div> 

{% データ = functions.実行する('fetchPartners') %} 

{% データ = functions.実行する('fetchPartners',param1,param2, ..) %} 

Object: ユーザー

ユーザーオブジェクトの値に基づくリクエストは、表示にキャッシュが有効な場合は機能しません。

{% if ユーザー %}       {'display_name':'{{ ユーザー.display_name }}','email_address':'{{ ユーザー.email_address }}'}. {% endif %}

オブジェクト: request_object

request_objectの値に基づくリクエストは、表示対象でキャッシュが有効な場合は動作しません。

{% partner_id = request_object.パラメーター.id %} 

{% assign variable_name = functions.実行する('dc_function_name', param1, param2, ...)%}. 

{% response_object。setStatus(status_code) %} 

{% response_object。setCookies(cookie_name, cookie_value, path, max_age) %} 

define( function() { function showPartner(設定){ $DX.取得する({ url: '/dcapp/' + 受注傾向などを分析。dc_name + '/パートナー', params : 受注傾向などを分析。params, handler: function (){ 受注傾向などを分析。target。innerHTML = this。responseText } } ); } function init(context, params){ var dc_name = context。getAttribute('data-dc-名前'); //ルートDC要素の属性 data-dc-名前 にはDC名が設定されています var dc_home_page = context。getAttribute('data-ホーム-page') || 'main'; //属性 data-dc-名前 には初期表示する名前が含まれています $DX.取得する({ url: '/dcapp/' + dc_name + '/' + dc_home_page ,// I18N対象外 handler: function (){ context。innerHTML = this。responseText } } ); } 返品する { showPartner : showPartner, init : init } }) 

$DX.取得する({ 
url: '/dcapp/' +  + '/function/' + 
         ,
handler: function (){
//関数取得後の処理コード
} 

Zoho Sitesからフォームデータを取得する

headers_map = Map();

headers_map。put('X-Site-Id','786783XXX');

resp = invokeurl [

url :'https://sites.Zoho.com/zs-site/api/v1/zsforms/' + formid + '/formdata'

種類 :POST

ヘッダー:headers_map

connection:'{{sites_connection_name}}'

];

返品する resp;

フォームレスポンスデータのサンプル

{.
'output': {
       'status_message': '完了',
       'status_code': '+10、-10',
        'form_data': {
           'form_status': '+10、-10',
            'form_records': [
               {
                    'record_id': '1561166000000141011',
                    'data': {
                        'field_SxBhr3xijI4MBySlKotoZA': {
                            'field_value': 'mdxxxx@gmail。com',
                            'field_type': 'メール'
                        },
                       'field_oxcQgkusaiBu_AusENvyJA': {
                            'field_value': 'Ram',
                            'field_type': '名前'
                        }
                   },
                    'last_updated_time': '2023-07-14T09:40:03Z',
                    'zs_form_id': '1561166000000140071'
               }
          ],
            'form_meta': {
                'form_properties': {
                    'form_link_name': '新規-Form',
                    'submit_action': {
                        'ダウンロードする': 無効,
                        'ドメイン': '',
                        'rel': '',
                        'linkType': 'fileLink',
                        'href': '/POWER%20OF%20PATIENCE。pdf',
                        '件名': '',
                        'url': '/POWER OF PATIENCE。pdf',
                        'target': ''
                    },
                    'form_name': 'ファイルダウンロード'
                },
                    '項目': [
                    {
                        'field_id': 'field_oxcQgkusaiBu_AusENvyJA',
                        'field_link_name': '名前',
                        'field_label': '名前',
                        'data_type': '名前',
                        '種類': 'テキスト'
                   },
                    {
                       'field_id': 'field_SxBhr3xijI4MBySlKotoZA',
                        'field_link_name': 'メール',
                        'field_label': 'メール',
                        'data_type': 'メール',
                        '種類': 'テキスト'
                   }
               ]
           }
        },
        'extra': {
            'no_of_pages': '1',
           'total_record': '2'
        },
        'api_kind': 'フォームデータ'
    }
}

Zoho Creator、Zoho CRM などへのデータ送信

フォームデータは、Zoho CRM や Creator など他のアプリケーションに送信できます。以下は、データをCreatorに送信するサンプルコードです。Sitesフォームから取得したデータはマップのリストに変換され、Creatorへ送信されます。SitesとCreatorで項目リンク名が同じであることを前提としています。Zoho Creator への接続を作成すると、コードが実行可能です。

headers_map = Map();

headers_map。put('X-Site-Id','786783XXX');

sites_api_response = invokeurl [

url :'https://sites.Zoho.com/zs-site/api/v1/zsforms/'+ formid + '/formdata'

種類 :POST

ヘッダー:headers_map

connection:'{{sites_connection_name}}'

];

form_records = sites_api_response.取得する('form_data').取得する('form_records');

form_meta = sites_api_response.取得する('form_data').取得する('form_meta').取得する('項目');

form_header = Map();

function_response = Map();

for each meta in form_meta {

form_header。put(meta.取得する('field_id'),meta.取得する('field_link_name'));

}

for each form_record in form_records {

creator_record = Map();

form_data = form_record.取得する('data');

項目 = form_data。keys();

for each field_key in 項目 {

creator_record。put(form_header.取得する(field_key),form_data.取得する(field_key).取得する('field_value'));

}

creator_response = Zoho.creator。createRecord('{{owner_name}}','{{app_name}}','{{form_name}}',

creator_record,Map(),'{{creator_connection_name}}');

function_response。put(form_record.取得する('record_id'), creator_response);

}

返品する function_response;