動的コンテンツとは、固定または静的なものではなく、ユーザーの操作に応じて変化するWebサイトのコンテンツです。Webサイトを毎回更新することなく、サードパーティーのサービスから取得したデータを表示できます。

たとえば、Zoho SitesとZoho Creatorのような2つの異なるアプリを連携して、Webサイトに動的コンテンツを表示できます。

Webサイトに動的コンテンツを挿入する手順 

1. Webサイトの編集画面の左上にある［+］アイコンをクリックします。

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

3. 選択肢から［動的コンテンツ］を選択します。

4. 表示する［動的コンテンツ］を目的の場所にドラッグ＆ドロップします。

5. ［編集］をクリックします。続いて、動的コンテンツ一覧ページが表示され、適切な動的コンテンツを選択できます。

6. 対象の動的コンテンツをクリックし、既存のコードを編集するか、カスタムコードを記述します。ビュー、関数、スタイルシートを編集できます。

• HTML
  

• CSS

• JavaScript

• Delugeスクリプト - 25以上のZohoアプリを連携するZohoのスクリプト言語

• Face - Zoho Sites向けに設計されたテンプレート言語
  

動的コンテンツの4つのコンポーネント

関数 

以下は、Zoho Creatorに保存されているレコードを取得する「fetchPartners」という名前の関数です。

説明：

Zoho Creatorからレコードを取得するために、条件を引数として渡してDRE関数「zoho.creator.getRecords」を使用しています。この関数は、条件に一致するレコードを返します。この動的コンテンツ関数には「id」という引数があり、その値を使用してレコードを一覧として取得します。

こちらのリンクで、関数を使用して連携を作成する方法の詳細を確認できます。

ビュー

 

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

標準では、すべてのビューがキャッシュされます。ビューが特定のユーザーまたは要求に固有の場合は、キャッシュを無効にすることをお勧めします。キャッシュを有効または無効にするには、動的コンテンツの編集オプションに移動してください。

この例では、メインページにすべてのパートナー名を表示します。名前が表示された後、ユーザーは任意のパートナー名をクリックして、その詳細を表示できます。その方法を見てみましょう。

 

ビュー：main

{% partners = functions.execute('fetchPartners') %}
<div>
  <center><h3>Partners</h3></center>
</div>
<divdc-container='partner-area'>
  {% for partner in partners %}
  <div>
    <h2 style='cursor: pointer'dc-param-id='{{ partner.ID }}'dc-bind-click='true'dc-view='partner'dc-target='partner-area'>
{{ partner.name }}
    </h2>
    <p>{{ partner.email }}</p>
  </div>
  {% endfor %}
</div>

{% partner_id = request_object.parameters.id %}
{% partner_details = functions.execute('fetchPartnerDetails', partner_id) %}
<div>
  <h2>{{ partner_details.name }}</h2>
  <p>{{ partner_details.phone }}</p>
  <img alt='{{ partner_details.name }}' src='{{ partner_details.image }}'/>
  <div style='cursor: pointer'dc-view='main'dc-target='partner-area'>
    back
  </div>
</div>
  

{% records = functions.execute('fetchPartners') %}

{% records = functions.execute('fetchPartners',param1,param2, ..) %}

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

{% if user %}
        {'display_name':'{{ user.display_name }}','email_address':'{{ user.email_address }}'}
{% endif %}

Object: request_object

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

{% partner_id = request_object.parameters.id %} 

{% assign variable_name = functions.execute('dc_function_name', param1, param2, ...) %}

{% response_object.setStatus(status_code) %} 

{% response_object.setCookie(cookie_name, cookie_value, path, max_age) %}

define( function() { 
function showPartner(options){
$DX.get({
url: '/dcapp/' + options.dc_name + '/partner',
params : options.params,
handler: function (){
options.target.innerHTML = this.responseText
}
}
);
}
function init(context, params){
var dc_name = context.getAttribute('data-dc-name');
//the attribute data-dc-name of the root DC element has the DC name
var dc_home_page = context.getAttribute('data-home-page') ||
'main';
//the attribute data-dc-name has the default view name
$DX.get({
url: '/dcapp/' + dc_name + '/' + dc_home_page ,// No I18N
handler: function (){
context.innerHTML = this.responseText
}
}
);
}
return {
showPartner : showPartner,
init : init
}
})

$DX.get({
url: '/dcapp/' + <dc_name> + '/function/' + <dc_function_name >, 
handler: function (){
//code to handle function get
}

Fetching form data from Zoho Sites