Style-based URLs for embedded forms and reports
In this topic we list out the parameters used in customizing the look and feel of Zoho Creator forms and reports. These parameters can be applied to the Forms and Reports embedded in your Pages.
Form properties
| Description | Parameter/Value |
| Display form without form header | zc_Header=false |
| Form background color | zc_BgClr=<color value> |
| Form border color | zc_BdrClr=<color value> |
| Customize the success message | zc_SuccMsg=<custom message> |
Embed form with transparent background | zc_BgClr=transparent |
Note:
Color values can be given as CSS or Hex values or color names.
Example: zc_BgClr=_00FF00, zc_BgClr=lime, zc_BgClr=rgb(0, 255, 0)
Example: zc_BgClr=_00FF00, zc_BgClr=lime, zc_BgClr=rgb(0, 255, 0)
Form header customization
| Description | Parameter/Value |
| Header color | zc_HdrClr=<color value> |
| Header height | zc_HdrHeight=<header height in px or %> |
| Header font | zc_HdrFont=<header font family> |
| Header font color | zc_HdrFontClr=<color value> |
| Header font size | zc_HdrFontSize=<header font size> |
Note:
Color values can be given as CSS or Hex values or color names.
Ex : zc_HdrClr=rgb(0, 255, 0), zc_HdrClr=_00FF00, zc_HdrClr=lime
Ex : zc_HdrClr=rgb(0, 255, 0), zc_HdrClr=_00FF00, zc_HdrClr=lime
Width and height can be given in px, % etc
Form footer customization
| Description | Parameter /Value |
| Footer color | zc_FtrClr=<color value> |
| Button background color | zc_BtnBgClr=<color value> |
| Button font | zc_BtnFont=<font family> |
| Button text color | zc_BtnClr=<color value> |
| Button footer height | zc_FtrHeight=<footer height in px or %> |
| Button background color on mouse over | zc_BtnMovrBgClr=<color value> |
| Button text color on mouse over | zc_BtnMovrClr=<color value> |
| Button font size | zc_BtnFontSize=<footer font size> |
Note:
Color values can be given as CSS or Hex values or color names.
Ex : zc_HdrClr=rgb(0, 255, 0), zc_HdrClr=_00FF00, zc_HdrClr=lime
Ex : zc_HdrClr=rgb(0, 255, 0), zc_HdrClr=_00FF00, zc_HdrClr=lime
Width and height can be given in px, % etc.
Form field width/ height customization
| Field Type | Parameter for Field Width | Parameter for Field Height |
| Single line/Email | zc_InpFieldWidth=<width> | zc_InpFieldHeight=<height> |
| Multi Select | zc_MultiSelectWidth=<width> | zc_MultiSelectHeight=<height > |
| Radio button | zc_RadioWidth=<width> | zc_RadioHeight=<height> |
| Decision box | zc_DecisionCBWidth=<width> | zc_DecisionCBHeight=<height> |
| Number/Decimal/Percent/Currency | zc_NumberFieldWidth=<width> | zc_NumberFieldHeight=<height> |
| Multi Line | zc_TextAreaWidth=<width> | zc_TextAreaHeight=<height> |
| Date | zc_DateWidth=<width> | zc_DateHeight=<height> |
| DateTime | zc_DateTimeWidth=<width> | zc_DateTimeHeight=<height> |
| Checkbox | zc_CheckBoxesWidth=<width> | zc_CheckBoxesHeight=<height> |
| Dropdown | zc_DropDownWidth=<width> | zc_DropDownHeight=<height> |
Note:
Width and height can be given in px or %
Report customization
Description | Parameter /Value |
Report - Header Color | zc_HdrClr=<color value> |
Report - border color | zc_BdrClr=<color value> |
Report - Group Header Color | zc_GrpHdrClr=<color value> |
Need search option | zc_Search=<true/false> |
Show/Hide "report name" | zc_ReportName=<true/false> |
Show/Hide "ShowAs(Menu)" | zc_ShowAs=<true/false> |
Show/Hide record summary link | zc_Summary=<true/false> |
Show/Hide "Add" link | zc_AddRec=<true/false> |
Show/Hide "Delete" link | zc_DelRec=<true/false> |
Show/Hide report header | zc_Header=<true/false> |
Show/Hide report footer | zc_Footer=<true/false> |
Show/Hide filters in report | zc_Filter=<true/false> |
Show/Hide column drop-down menu | zc_ColMenu=<true/false> |
Show/Hide summation row | zc_SumRow=<true/false> |
Show/Hide "Edit" link in each record | zc_EditRec=<true/false> |
Show/Hide "Duplicate" option | zc_DuplRec=<true/false> |
Show/Hide "Save" option. Applies only for grid report | zc_SaveRec=<true/false> |
Deluge name of field based on which calendar report will be shown. Applies only for calendar report | zc_CalField=<delugeName> |
Show/Hide record selection check box in each record | zc_RecSelect=<true/false> |
Show/Hide secondary header (Record selection, Add, filter, Search, other actions under Menu) in reportzc_SecHeader=<true/false> | zc_SecHeader=<true/false> |
Show/Hide "Bulk Edit" link | zc_EditBulkRec=<true/false> |
Show/Hide "bulk delete" link | zc_BulkDelete=<true/false> |
Show/Hide "bulk duplicate" link | zc_BulkDuplicate=<true/false> |
Hide "Export" option | zc_Export=true (by default it is false) |
Hide "Print" option | zc_Print=true (by default it is false) |
Hide record level Print option | zc_RecPrint=false (by default it is true) |
Hide "More Options" | zc_MoreAction=false (by default it is true) |
Show/Hide the import option | zc_Import=<true/false> |
Note:
Color values can be given as CSS or Hex values or color names. Example: Ex : zc_HdrClr=rgb(0, 255, 0), zc_HdrClr=_00FF00, zc_HdrClr=lime
Examples
- To customize the embedded form in your page, add the required parameters after the params=' as shown in the sample code below.
- To customize the embedded report in your page, add the required parameters after the params=' as shown in the sample code below.
Points to note
- Embedded components in mobile app: By default, components( forms, reports, pages ) embedded in HTML snippets using the <div> tag are displayed as buttons in the native Zoho Creator mobile application. To display the embedded component as it is instead of a button, add "zc_mobileview=inline" parameter inside the <div> tag.