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. Enter Dynamic Content Name.
   

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 sytlsheets.

       

1. HTML
   
2. CSS
3. JavaScript
4. Deluge Script - Zoho's scripting language that links over 25 Zoho Apps
5. 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:

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

records = zoho.creator.getRecords("David", "partners", "Partner_View", criteria);

record = records.get(0);

return record;                                                                                                                                                                       

To fetch records from Zoho Creator, we used the DRE function "zoho.creator.getRecords" with the criteria as arguments. 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 a 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's look at how this works:

 

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, ..) %}             

Object: user

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.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');
    //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
}                                                                                             

{.                                                                                                                               
    "output": {
              "status_message": "success",
              "status_code": "0",
              "form_data": {
                  "form_status": "0",
                  "form_records": [
                      {
                          "record_id": "1561166000000141011",
                          "data": {
                              "field_SxBhr3xijI4MBySlKotoZA": {
                                  "field_value": "mdxxxx@gmail.com",
                                  "field_type": "email"
                              },
                              "field_oxcQgkusaiBu_AusENvyJA": {
                                  "field_value": "Ram",
                                  "field_type": "name"
                              }
                          },
                          "last_updated_time": "2023-07-14T09:40:03Z",
                          "zs_form_id": "1561166000000140071"
                      }
                  ],
                  "form_meta": {
                      "form_properties": {
                          "form_link_name": "New-Form",
                          "submit_action": {
                              "download": false,
                              "domain": "",
                              "rel": "",
                              "linkType": "fileLink",
                              "href": "/POWER%20OF%20PATIENCE.pdf",
                              "title": "",
                              "url": "/POWER OF PATIENCE.pdf",
                              "target": ""
                          },
                          "form_name": "Filedownload"
                      },
                      "fields": [
                          {
                              "field_id": "field_oxcQgkusaiBu_AusENvyJA",
                              "field_link_name": "Name",
                              "field_label": "Name",
                              "data_type": "name",
                              "type": "text"
                          },
                          {
                              "field_id": "field_SxBhr3xijI4MBySlKotoZA",
                              "field_link_name": "Email",
                              "field_label": "Email",
                              "data_type": "email",
                              "type": "text"
                          }
                      ]
                  }
              },
              "extra": {
                  "no_of_pages": "1",
                  "total_record": "2"
              },
              "api_kind": "form data"
          }
}                                                                                                                                                                                              

Pushing data to Zoho Creators, Zoho CRM, etc.

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"

      type :POST

      headers:headers_map

      connection:"{{sites_connection_name}}"

];

form_records = sites_api_response.get("form_data").get("form_records");

form_meta = sites_api_response.get("form_data").get("form_meta").get("fields");

form_header = Map();

function_response = Map();

for each  meta in form_meta {

    form_header.put(meta.get("field_id"),meta.get("field_link_name"));

}

for each  form_record in form_records {

    creator_record = Map();

    form_data = form_record.get("data");

    fields = form_data.keys();

    for each  field_key in fields {

        creator_record.put(form_header.get(field_key),form_data.get(field_key).get("field_value"));

    }

    creator_response =      zoho.creator.createRecord("{{owner_name}}","{{app_name}}","{{form_name}}",

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

    function_response.put(form_record.get("record_id"), creator_response);

}

return function_response;