Dynamic content refers to website content that isn't fixed or static, but changes based on user action. Use dynamic content on your website to display data from third-party services without updating the website every single time.

For example, you can integrate two different applications such as Zoho Sites and Zoho Creator to display dynamic content on your website.

Steps to Insert Dynamic Content into your website 

1. Click the + icon at the top-left corner of your website builder.

2.  Click App from the dropdown.

3. Select Dynamic Content from the options.

4. Drag and drop Dynamic Content to the location where you'd like it to be displayed.

5. Click Edit. You will be taken to the Dynamic Content Listing page where you can select the appropriate dynamic content

6. Click the relevant dynamic content to edit the existing code or write a custom one.  You can edit views, functions and sytlesheets.

• HTML
  

• CSS

• JavaScript

• Deluge Script - Zoho's scripting language that links over 25 Zoho Apps

• Face - A language for templates designed for Zoho Sites
  

The four components of Dynamic Content

FUNCTIONS 

Here's a function named "fetchPartners" that fetches records stored in Zoho Creator:

Explanation:

We have used DRE function "zoho.creator.getRecords"  by passing the criteria as an argument to fetch records from Zoho Creator. The function returns records that match the criteria. This dynamic content function has an argument called "id", which is then used to fetch records as list

Refer to this link for more information on using functions to create an integration.

VIEWS

 

Every instance of Dynamic Content has a main view file, and it loads the view available.

All views are cached by default. If the view is specific to a user or request, it is recommended to disable the cache. Please visit the dynamic content edit option to enable or disable cache.

In this example, we display all the partner names on the main page. Once the names are displayed, the user can click on any partner name and view their details. Let us see how

 

View: main

{% partners = functions.execute("fetchPartners") %}
<div>
  <center><h3>Partners</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">
    back
  </div>
</div>
  

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

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

Request based on user object values will not work if cache is enabled for the view.

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

Object: request_object

Request based on request_object values will not work if cache is enabled for the view.

{% 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