Hi ZC users,

Just whipped up a little ZC function that makes it super easy to customize the look of  ALL your forms in all your applications. I got tired of having to make markup changes in many, many html views and links when using the customization parameters.

Here's the code.. Also, this is up on the marketplace as well.

   

    
 string style.getFormStyle()
{
 /*
Author : -Stephen Rhyne -Owner -Rhyne Design -stephen@stephenrhyne.com -http://stephenrhyne.com
Created : 11-25-09
Version : 1
Copyrights : none
How to use : 

For more information on Zoho Creator's built in Style parameters go here --
http://help.creator.zoho.com/Style-based-URLs-for-Embedded-Forms.html

--To use--
1. Add your desired style value for each style key. 

Example : formStyleMap.put("zc_LblWidth","100px");

NOTICE all keys and values are wrapped in quotes.

2. Once you have done this it is time to add your params to your form. 
There are two ways to use your form style parameters.

a. Adding the returned params to a the "param" attribute on an embedded form in a ZC HTML view

Example : 

<div elName='zc-component' formLinkName='to_do' params='zc_Header=true<%=thisapp.style.getFormStyle()%>&zc_SuccMsg=Data Added Sucessfully!&zc_SubmitVal=Submit&zc_ResetVal=Reset'>Loading Form...</div> 
<%}%>

b. Adding the params to the "src" attribute URL in an iframe OR the "href" attribute in a link to a form view!

Example : 

<iframe src='https://creator.zoho.com/<zoho.adminuser>/<zoho.appname>/form-embed/to_do/<%=thisapp.style.getFormStyle()%>'></iframe>
 
NOTE : that if you are planning on embedding your iframe in a NON Zoho Creator HTML view then generate your style parameters (execute script then copy) and then
append the static params to the end of your iframe's "src" url. 

3. Useful tips..
Remember that the same function can be called from multiple applications in the same account! So this function can serve
as an easy way to have style continuity over all your apps! It also makes it much, much easier to change your form styles!

If you need more than one form style in your application simply copy this function and rename it! You might want to also
name your formStyles by there main uses! Like getMobileFormStyle,getIphoneFormStyle,webSiteFormStyle, etc.
*/
 formStyleMap = map();
 formStyleMap.put("zc_BgClr", "");
 formStyleMap.put("zc_BdrClr", "");
 formStyleMap.put("zc_LblClr", "");
 formStyleMap.put("zc_LblWidth", "");
 formStyleMap.put("zc_LblFont", "");
 formStyleMap.put("zc_LblFontClr", "");
 formStyleMap.put("zc_LblFontSize", "");
 formStyleMap.put("zc_InpClr", "");
 formStyleMap.put("zc_InpWidth", "");
 formStyleMap.put("zc_inpFieldFont", "");
 formStyleMap.put("zc_InpFieldFontSize", "");
 formStyleMap.put("zc_inpFieldFontClr", "");
 formStyleMap.put("zc_InpFieldWidth", "");
 formStyleMap.put("zc_InpFieldHeight", "");
 formStyleMap.put("zc_MultiSelectWidth", "");
 formStyleMap.put("zc_MultiSelectHeight", "");
 formStyleMap.put("zc_RadioWidth", "");
 formStyleMap.put("zc_RadioHeight", "");
 formStyleMap.put("zc_DecisionCBWidth", "");
 formStyleMap.put("zc_DecisionCBHeight", "");
 formStyleMap.put("zc_NumberFieldWidth", "");
 formStyleMap.put("zc_NumberFieldHeight", "");
 formStyleMap.put("zc_TextAreaWidth", "");
 formStyleMap.put("zc_TextAreaHeight", "");
 formStyleMap.put("zc_DateWidth", "");
 formStyleMap.put("zc_DateHeight", "");
 formStyleMap.put("zc_CheckBoxesWidth", "");
 formStyleMap.put("zc_CheckBoxesHeight", "");
 formStyleMap.put("zc_DropDownWidth", "");
 formStyleMap.put("zc_DropDownHeight", "");
 formStyleParams = "";
 keys = formStyleMap.keys();
 for each key in keys
 {
 formStyleParams = formStyleParams + "&" + key + "=" + formStyleMap.get(key);
 }
 return formStyleParams;
}