Zoho Creator: Embed Forms/Reports on a Page

: Category: Zoho; 05 May 2022; Hits: 20844

What?
Well known by most but this serves as a quick reminder to myself and anyone else on how to embed a form or a report into a Zoho Creator page.

Why?
Cos

How?
The below is a template snippet for a Zoho Creator page. We set the parameters of the form/report. Then this shows how to embed using a DIV layer which allows for CSS styling. The last part shows how to embed using an IFRAME tag which isn't great for CSS styling as you can't do cross-dom acoss child iframes; but it does let you use OpenURL(v_Url, "iframe", "iframe_name") which is good if you have multiple iframes on a page and you only want part of the page to display different content dynamically or on click of a button:

copy raw

<%{
	l_FormParams = List();
	l_FormParams.add("zc_Header=false");
	l_FormParams.add("zc_Footer=false");
	v_FormParams = l_FormParams.toString("&");
	//
	l_ReportParams = List();
	l_ReportParams.add("zc_Header=false");
	l_ReportParams.add("zc_Footer=false");
	v_ReportParams = l_ReportParams.toString("&");	
%>
// embeds using DIV: allows for CSS styling
// embed a form
<div class='my-form' elName='zc-component' formLinkName='Schedule_Week' params='<%=v_FormParams%>'>loading ...</div>
// embed a report
<div class='my-report' elName='zc-component' viewLinkName='Schedules' params='<%=v_ReportParams%>'>loading ...</div>
//
// embed using IFRAME: allows for content refreshing with openUrl to target iframes on a page
// embed a form
<iframe name='my-form' height='500px' width='100%' frameborder='0' allowTransparency='true' scrolling='auto' src='https://<base_url>/<account_owner_name>/<app_link_name>/form-embed/<form_link_name>'></iframe>
//
// embed a report
<iframe name='my-report' height='500px' width='100%' frameborder='0' allowTransparency='true' scrolling='auto' src='https://<base_url>/<account_owner_name>/<app_link_name>/report-embed/<report_link_name>'></iframe>
<%}%>
//
//
// embed a published form, the parameter is "privateLink" and for me this is the publish key of the report, not the form (though I publish both form and report)
p_PublishKey = "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789";
l_FormParams.add("privateLink=" + p_PublishKey);
v_FormParams = l_FormParams.toString("&");
%>
<div class='my-form' elName='zc-component' formLinkName='Schedule_Week' params='<%=v_FormParams%>'>loading ...</div>
<% ...

//
// embed an iframe with published key
<iframe 
	name='my-frame' 
	height='500px' 
	width='100%' 
	frameborder='0' 
	allowTransparency='true' 
	scrolling='no' 
	src='https://creatorapp.zohopublic.com/app_owner/app_name/form-embed/my_form/my_PublishKey?recLinkID=my_Record_ID&viewLinkName=my_Record_Report'
></iframe>

<%{
l_FormParams = List();
l_FormParams.add("zc_Header=false");
l_FormParams.add("zc_Footer=false");
v_FormParams = l_FormParams.toString("&");
//
l_ReportParams = List();
l_ReportParams.add("zc_Header=false");
l_ReportParams.add("zc_Footer=false");
v_ReportParams = l_ReportParams.toString("&");
%>
// embeds using DIV: allows for CSS styling
// embed a form
<div class='my-form' elName='zc-component' formLinkName='Schedule_Week' params='<%=v_FormParams%>'>loading ...</div>
// embed a report
<div class='my-report' elName='zc-component' viewLinkName='Schedules' params='<%=v_ReportParams%>'>loading ...</div>
//
// embed using IFRAME: allows for content refreshing with openUrl to target iframes on a page
// embed a form
<iframe name='my-form' height='500px' width='100%' frameborder='0' allowTransparency='true' scrolling='auto' src='https://<base_url>/<account_owner_name>/<app_link_name>/form-embed/<form_link_name>'></iframe>
//
// embed a report
<iframe name='my-report' height='500px' width='100%' frameborder='0' allowTransparency='true' scrolling='auto' src='https://<base_url>/<account_owner_name>/<app_link_name>/report-embed/<report_link_name>'></iframe>
<%}%>
//
//
// embed a published form, the parameter is "privateLink" and for me this is the publish key of the report, not the form (though I publish both form and report)
p_PublishKey = "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789";
l_FormParams.add("privateLink=" + p_PublishKey);
v_FormParams = l_FormParams.toString("&");
%>
<div class='my-form' elName='zc-component' formLinkName='Schedule_Week' params='<%=v_FormParams%>'>loading ...</div>
<% ...
//
// embed an iframe with published key
<iframe
name='my-frame'
height='500px'
width='100%'
frameborder='0'
allowTransparency='true'
scrolling='no'
src='https://creatorapp.zohopublic.com/app_owner/app_name/form-embed/my_form/my_PublishKey?recLinkID=my_Record_ID&viewLinkName=my_Record_Report'
></iframe>

Multiple params with an OR?
Let's say I want the report filtered where ID can be 1 of 2 values, then to do this, our page parameters can remain a text value with the IDs and comma delimited. The page code would then be something like:

copy raw

<%{
	//
	l_ReportParams = List();
	l_ReportParams.add("zc_Header=false");
	l_ReportParams.add("zc_Footer=false");
	//
	// my parameter as a comma delimited string converting to a list (not really necessary) - double-quotes if these are not numbers.
	// this is a string datatype but if passing parameters to this page, you may need to URL encode the values
	l_DocIDs = ifnull(input.p_DocIDs, List()).toList();
	//
	// now add the square brackets on either side
	l_ReportParams.add("ID=[" + l_DocIDs + "]");
	v_ReportParams = l_ReportParams.toString("&");
	//
%>
	<div class='my-report' elName='zc-component' viewLinkName='All_Documents' params='<%=v_ReportParams%>'>loading ...</div>
<%}%>

<%{
//
l_ReportParams = List();
l_ReportParams.add("zc_Header=false");
l_ReportParams.add("zc_Footer=false");
//
// my parameter as a comma delimited string converting to a list (not really necessary) - double-quotes if these are not numbers.
// this is a string datatype but if passing parameters to this page, you may need to URL encode the values
l_DocIDs = ifnull(input.p_DocIDs, List()).toList();
//
// now add the square brackets on either side
l_ReportParams.add("ID=[" + l_DocIDs + "]");
v_ReportParams = l_ReportParams.toString("&");
//
%>
<div class='my-report' elName='zc-component' viewLinkName='All_Documents' params='<%=v_ReportParams%>'>loading ...</div>
<%}%>