ダイナミックコンテンツとは、ユーザーのアクションに基づいて変化する、固定されていないまたは静的でないウェブサイトのコンテンツのことを指します。ウェブサイトでダイナミックコンテンツを使用すると、ウェブサイトを毎回更新することなく、サードパーティのサービスからデータを表示することができます。

例えば、Zoho SitesとZoho Creatorのような2つの異なるアプリケーションを統合して、ウェブサイトでダイナミックコンテンツを表示することができます。

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

1. ウェブサイトビルダーの左上隅にある+アイコンをクリックします。

2.  ドロップダウンからアプリを選択してください。

3. オプションからダイナミックコンテンツを選択します。

4. ドラッグアンドドロップダイナミックコンテンツを表示したい場所にドロップしてください。

5. クリックEditをクリックします。そうすると、ダイナミックコンテンツリストページに移動します。そこで適切なダイナミックコンテンツを選択できます。

6. 関連する動的コンテンツをクリックして、既存のコードを編集するか、カスタムのコードを作成してください。ビュー、関数、スタイルシートを編集することができます。

• HTML
  

• CSS

• JavaScript

• Deluge Script - Zohoのスクリプト言語で、25以上のZohoアプリをリンクします

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

ダイナミックコンテンツの4つの要素

機能 

Zoho Creatorに保存されているレコードを取得するための 'fetchPartners' という関数があります：

説明：

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

このリンクを参照して、統合作成に関する詳細情報をご覧ください。

ビュー

 

ダイナミックコンテンツの各インスタンスには、メインビューファイルがあり、利用可能なビューを読み込みます。

デフォルトでは、すべてのビューはキャッシュされます。ユーザーまたはリクエストに固有のビューの場合、キャッシュを無効にすることをお勧めします。キャッシュの有効化または無効化には、動的コンテンツの編集オプションをご覧ください。

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

 

表示: メイン

{% partners = functions.execute('fetchPartners') %}
<div>
  <center><h3>パートナー</h3></center>
</div>
<div dc-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'>
    戻る
  </div>
</div>
  

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

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

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

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

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

{% if user %}
        {'表示名':'{{ user.display_name }}','メールアドレス':'{{ user.email_address }}'}
{% endif %}

オブジェクト：request_object

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

{% partner_id = request_object.parameters.id %} 

{% partner_id = request_object.parameters.id %} 

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

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

{% response_object.setStatus(status_code) %} 

{% response_object.setStatus(status_code) %} 

{% response_object.setCookies(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');
        //ルートDC要素のdata-dc-name属性にはDC名が含まれています
        var dc_home_page = context.getAttribute('data-home-page') ||
        'main';
        //data-dc-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> + '/functions/' + <dc_function_name >, 
handler: function (){
      //関数getを処理するコード
}