ダイナミックコンテンツとは、固定・静的なものではなく、ユーザーの操作に応じて変化する Web サイトコンテンツのことです。Web サイトを頻繁に更新しなくても、ダイナミックコンテンツを使用することで、サードパーティサービスからのデータを Web サイト上に表示できます。

例えば、Zoho Sites と Zoho Creator など、2 つの異なるアプリケーションを連携させて、Web サイト上にダイナミックコンテンツを表示できます。

Web サイトにダイナミックコンテンツを挿入する手順 

1. サイトビルダー左上の + アイコンをクリックします。

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

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

4. 表示したい位置まで Dynamic Content をドラッグ＆ドロップします。

5. [Edit] をクリックします。すると、適切なダイナミックコンテンツを選択できる Dynamic Content Listing ページに移動します。

6. 対象のダイナミックコンテンツをクリックして、既存のコードを編集するか、新しいカスタムコードを作成します。ビュー、関数、スタイルシートを編集できます。

• HTML
  

• CSS

• JavaScript

• Deluge Script - 25 以上の Zoho アプリを連携させる Zoho 独自のスクリプト言語

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

ダイナミックコンテンツを構成する 4 つのコンポーネント

FUNCTIONS 

次は、Zoho Creator に保存されているデータを取得する、'fetchPartners' という名前の関数です。

説明:

ここでも、DRE 関数 'Zoho。creator。getRecords'を使用し、条件（criteria）を引数として渡すことで、Zoho Creator からデータを取得しています。この関数は、条件に一致するデータを返します。この動的コンテンツ関数には 'id' という引数があり、その値を使ってデータをリストとして取得します。

こちらのリンクで、連携を作成するために関数を使用する方法の詳細をご確認ください。

ビュー

 

各 Dynamic Content のインスタンスにはメインの表示ファイルがあり、そこから利用可能なビューを読み込みます。

すべてのビューは、初期設定でキャッシュされます。表示内容が特定のユーザーやリクエストに依存する場合は、キャッシュを無効にすることを推奨します。キャッシュを有効または無効にするには、Dynamic Content の編集オプションを開いて設定してください。

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

 

ビュー: main

{% partners = functions.execute('fetchPartners') %}
<div>
  <center><h3>Partners</h3></center>
</div>
<divdc-container='パートナー-地域'>
  {% for partner in partners %}
  <div>
    <h2 style='cursor: pointer'dc-param-id='{{ パートナー。ID }}'dc-bind-クリック='真'dc-表示する='パートナー'dc-target='パートナー-地域'>
{{ パートナー。名前 }}
    </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。名前 }}</h2>
  <p>{{ partner_details.phone }}</p>
  <img alt='{{ partner_details。名前 }}' src='{{ partner_details。画像 }}'/>
  <div style='cursor: pointer'dc-表示する='main'dc-target='パートナー-地域'>
    back
  </div>
</div>
  

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

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

ユーザー オブジェクトの値に基づくリクエストは、ビューでキャッシュが有効になっている場合は動作しません。

{% if user %}
        {'display_name':'{{ user.display_name }}','email_address':'{{ user.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。setCookie(cookie_name, cookie_value, path, max_age) %}

define( function() { 
function showPartner(設定){
$DX。取得する({
url: '/dcapp/' + 設定。dc_name + '/partner',
params : 設定。params,
handler: function (){
設定。target。innerHTML = this。responseText
}
}
);
}
function init(context, params){
var dc_name = context。getAttribute('data-dc-名前');
//the 属性 data-dc-名前 of the root DC element has the DC 名前
var dc_home_page = context。getAttribute('data-ホーム-page') ||
'main';
//the 属性 data-dc-名前 has the 初期設定 表示する 名前
$DX。取得する({
url: '/dcapp/' + dc_name + '/' + dc_home_page ,// いいえ I18N
handler: function (){
context。innerHTML = this。responseText
}
}
);
}
返品する {
showPartner : showPartner,
init : init
}
})

$DX。取得する({
url: '/dcapp/' + <dc_name> + '/function/' + <dc_function_name >, 
handler: function (){
//code to handle function 取得する
}

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