Dynamic Content

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

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

Click App from the dropdown.

Select Dynamic Content from the options.

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

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

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

There are a few key concepts to know to use dynamic content to your advantage.

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:

1. Functions - These are Deluge functions that interact with third-party services to fetch data. They act as an interface between two different applications.
Refer to the Deluge help doc for more information. You can also visit the Deluge console to get a hands-on experience in writing Deluge functions.

2. Stylesheets - Stylesheets are used to determine the look and feel of a webpage. Using this component helps you define the style rules (CSS) for displaying DC. These rules need to be written in the style.css file.

3. JavaScript - JavaScript is written in the main.js file. Make certain your code follows the closure the closure model. Please refer here for more details.

4. Views - Views are written in the Face template language. Dynamic content is usually written in the Face language, while static content is displayed based on the functions in HTML. Learn more about Face language in detail here.

Here's a sample code to integrate Zoho Creator to set up dynamic content on your website. Use it to add more functions to your dynamic content.

FUNCTIONS

Functions are lines of code that perform tasks. They are reusable, which makes them efficient. They may or may not return values depending on the tasks they perform.

With functions, you can access Zoho as well as external services using DRE's (Dynamic Runtime Environment) invokeUrl method.

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

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

Explanation:

We have used a DRE function "zoho.creator.getRecords" to fetch records from Zoho Creator. This function is invoked by the below arguments, and it returns a list of records containing partner information.

David - is the Owner name
partners - is the Application's link name
Partner_View - is the Report's link name

Here's another example of a function called "fetchPartnerDetails", which is invoked by the below arguments:

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

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

record = records.get(0);

return record;

Explanation:

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>

Explanation:

In the "main" view, we call the DC function "fetchPartners" using the functions.execute() method. This returns a list of partners. We then proceed to render them as HTML. Dynamic Content's View makes the objects and methods available to process request and response. We shall discuss these objects and methods soon after.

Note: The "dc" attributes on HTML tags are used to navigate to another view.

Attribute	Description
dc-container	Deﬁnes a container to load a DC view, value should be alphanumeric and unique.
dc-bind-click	Binds click event for the HTML element, value should be either "true" or a name of callback function.
dc-view	Deﬁnes the DC view name when the HTML element is clicked. Required when dc-bind-click = "true".
dc-target	Deﬁnes the container where the DC view deﬁned in dc-view will be loaded. Value should be one of dc-container.
dc-param-<param-name-placeholder>	Deﬁnes parameters that need to be sent to DC view. There can be multiple use, all such dc-param attributes are sent to DC view. eg. dc-param-pid="123" can be accessed in DC view with request_object.parameters.pid

View: partner

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

Explanation:

In this view named "partner", we call the DC function "fetchPartnerDetails" using the functions.execute() method. This call returns a partner matching with "partner_id". We then proceed to render it as HTML.

DC View function

Using the statement functions.execute(<function_name>) method, one can execute the function that you created in Dynamic Content.

Example:

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

The snippet above executes the fetchPartners DRE function and stores the return value in the 'records' variable. Use this record variable in the code to display the data on the website. Some functions have parameters. We must add those parameter values next to the function name like the below.

Example:

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

Note : function_name is required and must always be a first parameter.

Below are the objects and functions available in a dynamic content view.

Object: user

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

Property	Description
display_name	Name of the logged-in user
email_address	Email address of the logged-in user
groups	Display name list of portal group the user belong

Example:

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

Property	Description
domain_name	Domain part of request
uri	URI path of the request
parameters	Collection of parameters
headers	Collection of request headers
cookies	Collection of cookies

Example:

{% partner_id = request_object.parameters.id %}

Function: functions.execute

This is used to invoke functions in dynamic content.

Example:

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

Note: dc_function_name is the name of a function created in Dynamic Content app.

Function: response_object.setStatus
This function is used to set the status code of the response for the view response.
Example:

{% response_object.setStatus(status_code) %}

Note: status_code - should be valid HTTP status code

Function: response_object.setCookies
This function is used to set cookies in the view response.
Example:

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

JAVASCRIPT

Use the in-built JavaScript functions to perform standard UI event handling. If you want to perform advanced UI event handling, overwrite the defaults of dynamic content.

In JavaScript, the main view loads by default. You can override the default functionality by writing the init function in the main.js JavaScript file.

Initially the Dynamic Content app will try to execute the init function from the main.js file. In its absence, the DC app will load the content stored in the main file(/view).

The init function supports two parameters. The first is a dynamic content context, which is the root element of dynamic content. The second is a query parameter object.

These parameters are passed either in the page url or by adding dc-param- <param-name-placeholder> attribute to elements like <div dc-param-id ="{{record.id}}" dc-bind-click = "showPartner" style= "cursor:pointer:"> in view.

Note: The JavaScript file loads dynamically on the website using RequireJs. The script you are writing should follow the RequireJs define module. For more details about RequireJs define module, please refer here.

The following are the API methods available for JavaScript.

Method	Description
$DX.get	Sends HTTP GET request to DC view. Request Object as an argument, please refer table below.
$DX.post	Sends HTTP POST request to DC view. Request Object as an argument, please refer table below.

Request Object

Property	Description
url	URL of the view
params	Parameters to be sent to view as JSON object
handler	On successful response, this callback function will be called with XMLHttpRequest as "this" reference.
headers	Collection of request headers
args	Arguments to be sent to handler as JSON object

Overriding the "init" function

Here is an example of main.js overriding the "init" function and handling view loading itself

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
    }
})

Invoking DC function and view from a JS

Here is an example of how to invoke a function from main.js. It is also possible to invoke a DC function or DC view as a REST end point from a header code or from a JS file on the same domain.

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

Fetching form data from Zoho Sites

Create a connection to the Zoho Sites service in the connections tab in dynamic content. Choose scope ZohoSites.siteforms.read to read Zoho Sites form data. Once the connection is established use the created connection name in the "invokeurl" of the function. Get the 'formid' from the form edit URL in the Zoho Sites builder.

Sample code to fetch form data

headers_map = Map();

headers_map.put("X-Site-Id","786783XXX");

resp = invokeurl [

url :"https://sites.zoho.com/zs-site/api/v1/zsforms/" + formid + "/formdata"

type :POST

headers:headers_map

connection:"{{sites_connection_name}}"

];

return resp;

Sample form response data

{.
   "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.

The form data can now be pushed to other applications, such as Zoho CRM, Creator, and so on. Here is a sample code for pushing the date to Creator. Data from the Sites form is converted to a list of maps and then pushed to the Creator. It is assumed that the field link names in Sites and Creator are the same. Code can be executed once a connection is created for Zoho Creator.

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;

This document should help you understand the Dynamic Content feature in Zoho Sites. This feature opens up a lot of possibilities to address specific requirements of customers. If you require further clarifications, we are always happy to help you. Contact us at support@zohosites.com and we will answer your questions at the earliest.

Access your files securely from anywhere

Zoho CRM Training Programs

Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.

Redefine the way you work

with Zoho Workplace

Start your free trial

Zoho DataPrep Personalized Demo

If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.

Create, share, and deliver

beautiful slides from anywhere.

Get Started Now

Zoho Sign now offers specialized one-on-one training for both administrators and developers.

BOOK A SESSION

Zoho Workerly Home
Forums
Connect With Us:

Zoho Recruit Home
Forums
Connect With Us:

Start tracking your website metrics today

Use PageSense to understand what your visitors are looking for, how they are behaving, and where they are facing problems on your website.

Ready to improve your website's performance?

Install the PageSense code snippet on your site in a matter of minutes and start collecting in-depth data about the website visitors to grow your business.

Track and measure every business goal

Set up goals in PageSense to measure every single action performed by visitors on your website like button or link clicks, form submissions, and page engagements.

Understand the customer journey on your website

Create funnels in PageSense to quickly see which pages visitors use to enter your website, where they navigate to next, and which pages they decide to leave without converting.

Visualize your visitor's behavior with color codes

Set up heatmaps in PageSense to see where users have clicked more, how far they've scrolled, and on which parts of a page they've spent the most time using color-coded patterns in reports.

Measure customer engagement with your web forms

Use form analytics in PageSense to see how people interact with different fields in your form, whether they complete the form successfully or not, and where exactly they drop out on your form.

Record real visitor interactions on your website

Use session recordings in PageSense to watch a video of all the visitor actions performed on your website including the pages they navigate, the buttons they click, the UX issues they face, and more.

Test and optimize webpages for better conversions

Run A/B or Split URL tests in PageSense to figure out which version of your web page works best for your business and results in the best conversion rate.

Give each customer a unique website experience

Use personalization in PageSense to deliver customized versions of your website for every individual customer based on their demographics, local weather, browsing history, and more.

Grow your business through customer feedback

Run polls on your website using PageSense to understand what your customers think about your products/services and what needs improvement on your site.

Send timely updates that customers love

Use web push notifications in PageSense to schedule and notify your customers about an upcoming flash sale, product releases, promotional coupons, and a lot more that can spark conversions on your website.

Advertise your business to website visitors

Use pop-ups in PageSense to instantly grab the attention of visitors by showing attractive signup offers, coupon code discounts, or email newsletters that can eventually convert them into subscribers.

Access more advanced settings in PageSense

Use PageSense's advanced features like creating mutually exclusive groups, enabling cross-domain tracking, configuring customized project JS, and more to get deeper insights about your website.

Try easy-to-use extensions

Download the PageSense extension app available for your web browser with a few clicks and start collecting all of your required website metrics in real time.

Discover your favorite integrations with PageSense

Get a deeper look at your website's data by seamlessly integrating PageSense with a host of popular third-party apps like Google Analytics, Mixpanel, Intercom, and more.

Quick Links	Workflow Automation	Data Collection
Web Forms	Enterprise	Begin Data Collection
Interactive Forms	Workplace	Data Collection App
Offline Forms	Customer Service	Accessible Forms
Digital Forms	Marketing	Forms for Small Business
HTML Forms	Education	Forms for Enterprise
Contact Forms	E-commerce	Forms for any business
Lead Generation Forms	Healthcare	Forms for Startups
Wordpress Forms	Customer onboarding	Order Forms for Small Business
No Code Forms	Construction	RSVP tool for holidays
Free Forms	Travel
Prefill Forms	Non-Profit
Intake Forms	Legal
Form Designer	HR
Card Forms	Food
Assign Forms	Photography
Translate Forms	Real Estate
Electronic Forms
Notification Emails for Forms	Alternatives
Holiday Forms	Google Forms alternative
Form to PDF	Jotform alternative
Email Forms CRM Forms Embeddable Forms Drag and Drop form builder HIPAA Forms Encrypted Forms

New to Zoho CRM Plus?

Deliver unforgettable customer experiences

ACCESS ZOHO CRM PLUS

New to Zoho CRM Plus?

Deliver unforgettable customer experiences

ACCESS ZOHO CRM PLUS

New to Zoho Marketing Plus?

Everything you need to run your marketing

ACCESS ZOHO MARKETING PLUS

New to Zoho Marketing Plus?

Everything you need to run your marketing

ACCESS ZOHO MARKETING PLUS

Zoho Pagesense Resources

You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.

New to Zoho Survey?

Access Zoho Survey

Latest Feature Updates

Explore our Pricing & Plans

Zoho Survey Resources

Android Mobile Surveys

Insurvey Blogs

Insight Blogs

Tips & Tricks

New to Zoho Social?

Manage your brands on social media

Access Zoho Social

Zoho Desk Resources

Desk Community Learning Series
Digest
Functions
Meetups
Kbase
Resources
Glossary
Desk Marketplace
MVP Corner
Word of the Day

Zoho Sheet Resources

New to Zoho Forms?

Latest Feature Updates

Explore our Pricing & Plans

Zoho Forms Resources

Secure your business

communication with Zoho Mail

Get started

Mail on the move with

Zoho Mail mobile application

Go Mobile

Stay on top of your schedule

at all times

Get started

Carry your calendar with you

Anytime, anywhere

Get started

Latest Announcements

New to Zoho Sign?

Zoho Sign Resources

Sign, Paperless!

Sign and send business documents on the go!

Get Started Now

Zoho SalesIQ Resources

New to Zoho TeamInbox?

Zoho TeamInbox Resources

Connect with us

New to Zoho ZeptoMail?

LEARN MORE

Latest Feature Updates

Zoho DataPrep Resources

New to Zoho DataPrep?

Access Zoho DataPrep

Zoho DataPrep Demo

Get a personalized demo or POC

Design. Discuss. Deliver.

Create visually engaging stories with Zoho Show.

Get Started Now

New to Zoho Workerly?

Access Zoho Workerly

New to Zoho Recruit?

Access Zoho Recruit

New to Zoho CRM?

Signup Now

Access Zoho CRM

Latest Feature Updates

New to Zoho Projects?

Access Zoho Projects

New to Zoho Sprints?

Access Zoho Sprints

New to Zoho Assist?

Access Zoho Assist

New to Bigin?

Signup Now

Access Bigin

Latest Feature Updates

Related Articles
Connections
Zoho Sites Connections are used to access a different Zoho service or to allow a third-party service to retrieve data. Connections are used for the Dynamic Content feature. Types Default connection: You can choose from the already available list of ...
Sticky Content
Sticky Content allows you to fix certain sections and elements on your page so that it follows as you scroll. It also creates the illusion of the content in the background moving as certain sections stay fixed. Only elements within the column and box ...
Auto suggest regional content
Site preferences enable you to customize various aspects of your website at a site-wide level. The Auto suggest regional content feature requires websites to have both the subsite functionality enabled and content displayed in another language (via ...
Elements - Content & Containers
Content and Containers allow you to add and display elements in various styles. It helps make your layout look more creative, organized, and structured. You can choose from various options to add these elements to your Zoho Sites website. To add ...
Apps
You can use apps to reach a wider audience and encourage user engagement. Embed widgets like Comment Boxes, Social Share, Zoho Bookings, Instagram Feed, and Dynamic Content to interact with your users. To access your apps: 1. Click the Add icon in ...