For Zoho Services only:


I'm actually part of a bigger team at Ascent Business Solutions where we have support technicians and project consultants. Support is for smaller technical fixes but this can include developments, reports or integrations; depending on the size of the task. Projects are for more time-consuming developments such as revamps of the Zoho Suite of apps or on-site training. The advantage of a team is that if I am out-of-office for a day or so, there is always someone at Ascent Business Solutions who can deal with any queries/issues you may have.

Our support rates can be found and purchased at http://ascentbusiness.co.uk/zoho-support-2. A support bundle doesn't have an expiry date. So whether we can do what you want within the bundle and a year later need further support, if there are minutes left on the bundle then there is no additional charge.

Our project rates for bigger developments can be found at http://ascentbusiness.co.uk/crm-solutions/zoho-crm-packages-prices and will involve a dedicated project consultant along with developers who will hold your hand through the development process.

If you want help building a solution for one of the Zoho Apps in the Zoho Suite, contact us on 0121 293 8140 (UK) or by email at info@ascentbusiness.co.uk. You can also visit our website at http://ascentbusiness.co.uk.

I regularly build and specialize in 2-way API integrations for Xero, Shopify and eBay.

Zoho Creator: Change Radio into Tabs

What?
This is an article to serve as a guide in terms of styling a radio group into a group of Tabs. This is only a guide or reference which was applied for one client but would need adapting to match the colors or style the next client wants.

Why?
The scenario is that my client has quite a long Creator form and instead of scrolling down while entering data, they would prefer if they could have tabs along the top to display each section.

How?
The way we do this is by applying our own stylesheet and overriding certain CSS elements that the vanilla or out-of-the-box Zoho Creator ones provide.

First, let's add a Notes field to the Creator form, I'm calling mine Note_CSS, then I have added a radio group called Tabs [NB: If you rename it from "Tabs" to something else, all CSS references need to be changed as well to the new name and follow the syntax .zc-NewName-group{}].

What I have (Original)
Zoho Creator: Radio to Tabs: Original Look

I want to run some deluge (snippets below) every time the form loads, so I
  1. Go to Workflows > Form Workflows > Select your form
  2. Click on New Workflow
    • Choose form (the one your radio tabs group exists on)
    • (Record Event) Run when a record is Created or Edited
    • (Form Event) When to trigger workflow Load of the form
    • Name the workflow, I'm calling mine OnLoad
    • Add New Action > Deluge Script:
And I add the following to my deluge script, to remove the label "Tabs":
copyraw
v_Css = "<style>";
v_Css = v_Css + ".zc-Tabs-label{display:none !important;}";
v_Css = v_Css + "</style>";
input.Note_CSS = v_Css;
  1.  v_Css = "<style>"
  2.  v_Css = v_Css + ".zc-Tabs-label{display:none !important;}"
  3.  v_Css = v_Css + "</style>"
  4.  input.Note_CSS = v_Css; 
Yields
Zoho Creator: Radio to Tabs: First bit of CSS applied

Then aligning these radio options horizontally:
copyraw
v_Css = "<style>";
v_Css = v_Css + ".zc-Tabs-label{display:none !important;}";
v_Css = v_Css + ".zc-Tabs-group .choice-table-row{display:inline-block !important;padding:0;}";
v_Css = v_Css + "</style>";
input.Note_CSS = v_Css;
  1.  v_Css = "<style>"
  2.  v_Css = v_Css + ".zc-Tabs-label{display:none !important;}"
  3.  v_Css = v_Css + ".zc-Tabs-group .choice-table-row{display:inline-block !important;padding:0;}"
  4.  v_Css = v_Css + "</style>"
  5.  input.Note_CSS = v_Css; 
Yields
Zoho Creator: Radio to Tabs: Second bit of CSS applied

Then I need to get rid of the circles (radio inputs) but ensure the labels are still visible (I can hide all labels in this group except for those with class "choice-label-text"):
copyraw
v_Css = "<style>";
v_Css = v_Css + ".zc-Tabs-group label{display:none !important;}";
v_Css = v_Css + ".zc-Tabs-group label.choice-label-text{display:block !important;}";
v_Css = v_Css + ".zc-Tabs-group .choice-table-row{display:inline-block !important;padding:0;}";
v_Css = v_Css + "</style>";
input.Note_CSS = v_Css;
  1.  v_Css = "<style>"
  2.  v_Css = v_Css + ".zc-Tabs-group label{display:none !important;}"
  3.  v_Css = v_Css + ".zc-Tabs-group label.choice-label-text{display:block !important;}"
  4.  v_Css = v_Css + ".zc-Tabs-group .choice-table-row{display:inline-block !important;padding:0;}"
  5.  v_Css = v_Css + "</style>"
  6.  input.Note_CSS = v_Css; 
Yields
Zoho Creator: Radio to Tabs: Next bit of CSS applied

And for the penultimate bit of CSS just to style the tabs into tabs:
copyraw
// start the CSS stylesheet
v_Css = "<style>";
// align radio options horizontally
v_Css = v_Css + ".zc-Tabs-group .choice-table-row{display:inline-block !important;padding:0;}";
// fix internal padding ("Quote" was higher then other radio options)
v_Css = v_Css + ".zc-Tabs-group .choice-table-cell{padding:0 !important;}";
// hide all labels
v_Css = v_Css + ".zc-Tabs-group label{display:none !important;}";
// make labels with class choice-label-text visible and style with border, text alignment and background
v_Css = v_Css + ".zc-Tabs-group label.choice-label-text{display:block !important;width:125px;padding:5px;border:1px solid #eee;text-align:center;}";
v_Css = v_Css + ".zc-Tabs-group label.choice-label-text{background: linear-gradient(#fefefe, #efefef);border-bottom:1px solid #eee;}";
// make labels have rounded top-left corners
v_Css = v_Css + ".zc-Tabs-group label.choice-label-text{-webkit-border-top-left-radius: 5px;-moz-border-radius-topleft: 5px;border-top-left-radius: 5px;}";
// make labels have rounded top-right corners
v_Css = v_Css + ".zc-Tabs-group label.choice-label-text{-webkit-border-top-right-radius: 5px;-moz-border-radius-topright: 5px;border-top-right-radius: 5px;}";
// add a background gradient for when the mouse hovers over these
v_Css = v_Css + ".zc-Tabs-group label.choice-label-text:hover{color:#fff;background: linear-gradient(#006f3d, #ff0);}";
// end the CSS stylesheet
v_Css = v_Css + "</style>";
// write this stylesheet to the note CSS
input.Note_CSS = v_Css;
  1.  // start the CSS stylesheet 
  2.  v_Css = "<style>"
  3.  // align radio options horizontally 
  4.  v_Css = v_Css + ".zc-Tabs-group .choice-table-row{display:inline-block !important;padding:0;}"
  5.  // fix internal padding ("Quote" was higher then other radio options) 
  6.  v_Css = v_Css + ".zc-Tabs-group .choice-table-cell{padding:0 !important;}"
  7.  // hide all labels 
  8.  v_Css = v_Css + ".zc-Tabs-group label{display:none !important;}"
  9.  // make labels with class choice-label-text visible and style with border, text alignment and background 
  10.  v_Css = v_Css + ".zc-Tabs-group label.choice-label-text{display:block !important;width:125px;padding:5px;border:1px solid #eee;text-align:center;}"; 
  11.  v_Css = v_Css + ".zc-Tabs-group label.choice-label-text{background: linear-gradient(#fefefe, #efefef);border-bottom:1px solid #eee;}"; 
  12.  // make labels have rounded top-left corners 
  13.  v_Css = v_Css + ".zc-Tabs-group label.choice-label-text{-webkit-border-top-left-radius: 5px;-moz-border-radius-topleft: 5px;border-top-left-radius: 5px;}"
  14.  // make labels have rounded top-right corners 
  15.  v_Css = v_Css + ".zc-Tabs-group label.choice-label-text{-webkit-border-top-right-radius: 5px;-moz-border-radius-topright: 5px;border-top-right-radius: 5px;}"
  16.  // add a background gradient for when the mouse hovers over these 
  17.  v_Css = v_Css + ".zc-Tabs-group label.choice-label-text:hover{color:#fff;background: linear-gradient(#006f3d, #ff0);}"; 
  18.  // end the CSS stylesheet 
  19.  v_Css = v_Css + "</style>"
  20.  // write this stylesheet to the note CSS 
  21.  input.Note_CSS = v_Css; 
Yields
Zoho Creator: Radio to Tabs: Another few bits of CSS applied


All of me
Now we have the tabs looking close to what we want, you will have noted that I have done this code in-line of the form. If you were to embed the form on to a page, you would be free to use some reserved CSS attributes on the page style rather such as position: absolute. Because I'm doing this inline and via code, Zoho automatically removes these. So instead, I am going to use negative/positive margins to move the tabs group up/down along with the form wrapper (so all the form is below the tabs group) and then a negative margin on another notes field called Note_Title which contains my header to place it above the tabs group:
copyraw
v_Css = "<style>";
v_Css = v_Css + ".zc-Tabs-group .choice-table-row{display:inline-block !important;padding:0;}";
v_Css = v_Css + ".zc-Tabs-group .choice-table-cell{padding:0 !important;}";
v_Css = v_Css + ".zc-Tabs-group label{display:none !important;}";
v_Css = v_Css + ".zc-Tabs-group label.choice-label-text{display:block !important;width:125px;padding:5px;border:1px solid #eee;text-align:center;}";
v_Css = v_Css + ".zc-Tabs-group label.choice-label-text{background: linear-gradient(#fefefe, #efefef);border-bottom:1px solid #eee;}";
v_Css = v_Css + ".zc-Tabs-group label.choice-label-text{-webkit-border-top-left-radius: 5px;-moz-border-radius-topleft: 5px;border-top-left-radius: 5px;}";
v_Css = v_Css + ".zc-Tabs-group label.choice-label-text{-webkit-border-top-right-radius: 5px;-moz-border-radius-topright: 5px;border-top-right-radius: 5px;}";
v_Css = v_Css + ".zc-Tabs-group label.choice-label-text:hover{color:#fff;background: linear-gradient(#006f3d, #ff0);}";
// tabs group positioning
v_Css = v_Css + ".zc-Tabs-group{margin-bottom:0;margin-top: -103px;}";
// styling the form wrapper to look like a tab panel
v_Css = v_Css + ".zc-form-scroll-wrapper{padding:20px;border:1px solid #eee;margin-top:100px;}";
// move the note field called Note_Title to above the tabs group
v_Css = v_Css + "div[name='Note_Title']{margin-top:-130px;}";
v_Css = v_Css + "</style>";
input.Note_CSS = v_Css;
  1.  v_Css = "<style>"
  2.  v_Css = v_Css + ".zc-Tabs-group .choice-table-row{display:inline-block !important;padding:0;}"
  3.  v_Css = v_Css + ".zc-Tabs-group .choice-table-cell{padding:0 !important;}"
  4.  v_Css = v_Css + ".zc-Tabs-group label{display:none !important;}"
  5.  v_Css = v_Css + ".zc-Tabs-group label.choice-label-text{display:block !important;width:125px;padding:5px;border:1px solid #eee;text-align:center;}"; 
  6.  v_Css = v_Css + ".zc-Tabs-group label.choice-label-text{background: linear-gradient(#fefefe, #efefef);border-bottom:1px solid #eee;}"; 
  7.  v_Css = v_Css + ".zc-Tabs-group label.choice-label-text{-webkit-border-top-left-radius: 5px;-moz-border-radius-topleft: 5px;border-top-left-radius: 5px;}"
  8.  v_Css = v_Css + ".zc-Tabs-group label.choice-label-text{-webkit-border-top-right-radius: 5px;-moz-border-radius-topright: 5px;border-top-right-radius: 5px;}"
  9.  v_Css = v_Css + ".zc-Tabs-group label.choice-label-text:hover{color:#fff;background: linear-gradient(#006f3d, #ff0);}"; 
  10.  // tabs group positioning 
  11.  v_Css = v_Css + ".zc-Tabs-group{margin-bottom:0;margin-top: -103px;}"
  12.  // styling the form wrapper to look like a tab panel 
  13.  v_Css = v_Css + ".zc-form-scroll-wrapper{padding:20px;border:1px solid #eee;margin-top:100px;}"; 
  14.  // move the note field called Note_Title to above the tabs group 
  15.  v_Css = v_Css + "div[name='Note_Title']{margin-top:-130px;}"
  16.  v_Css = v_Css + "</style>"
  17.  input.Note_CSS = v_Css; 

Functionality
Great! And to add some functionality, in other words, have tabs show/hide when a radio option is clicked on, I need to
  1. Go to Workflows > Form Workflows > Select your form
  2. Click on New Workflow
    • Choose form (the one your radio tabs group exists on)
    • (Record Event) Run when a record is Created or Edited
    • (Form Event) When to trigger workflow User input of a field
    • Choose Field Tabs (or whatever you named your tabs radio field)
    • Name the workflow, I'm calling mine OnUserInput_Tabs
    • Add New Action > Deluge Script:
      copyraw
      // assuming my sections are called "Tab_Section_1", and so on ... [these can be named as you want, the names I've used here are for demo purposes]
      hide Tab_Section_1;
      hide Tab_Section_2;
      hide Tab_Section_3;
      hide Tab_Section_4;
      hide Tab_Section_5;
      hide Tab_Section_6;
      hide Tab_Section_7;
      //
      if(isNull(input.Tabs) || input.Tabs == "Quote")
      {
      	show Tab_Section_1;
      }
      else if(input.Tabs == "Product Details")
      {
      	show Tab_Section_2;
      }
      else if(input.Tabs == "Photos")
      {
      	show Tab_Section_3;
      }
      else if(input.Tabs == "Shopify")
      {
      	show Tab_Section_4;
      }
      else if(input.Tabs == "Shopify Preview")
      {
      	show Tab_Section_5;
      }
      else if(input.Tabs == "eBay")
      {
      	show Tab_Section_6;
      }
      else if(input.Tabs == "eBay Preview")
      {
      	show Tab_Section_7;
      }
      else
      {
      	show Tab_Section_1;
      }
      1.  // assuming my sections are called "Tab_Section_1", and so on ... [these can be named as you want, the names I've used here are for demo purposes] 
      2.  hide Tab_Section_1; 
      3.  hide Tab_Section_2; 
      4.  hide Tab_Section_3; 
      5.  hide Tab_Section_4; 
      6.  hide Tab_Section_5; 
      7.  hide Tab_Section_6; 
      8.  hide Tab_Section_7; 
      9.  // 
      10.  if(isNull(input.Tabs) || input.Tabs == "Quote") 
      11.  { 
      12.      show Tab_Section_1; 
      13.  } 
      14.  else if(input.Tabs == "Product Details") 
      15.  { 
      16.      show Tab_Section_2; 
      17.  } 
      18.  else if(input.Tabs == "Photos") 
      19.  { 
      20.      show Tab_Section_3; 
      21.  } 
      22.  else if(input.Tabs == "Shopify") 
      23.  { 
      24.      show Tab_Section_4; 
      25.  } 
      26.  else if(input.Tabs == "Shopify Preview") 
      27.  { 
      28.      show Tab_Section_5; 
      29.  } 
      30.  else if(input.Tabs == "eBay") 
      31.  { 
      32.      show Tab_Section_6; 
      33.  } 
      34.  else if(input.Tabs == "eBay Preview") 
      35.  { 
      36.      show Tab_Section_7; 
      37.  } 
      38.  else 
      39.  { 
      40.      show Tab_Section_1; 
      41.  } 
  3. Done! Well almost

Set Clicked Tab to Selected
One niggling issue I had was that when selecting a tab, the selected tab didn't stay a different color or style. One theoretical way around this could be that I restyle the "::after checked", hide the circle line and somehow style the inner dot to overlay or serve as background on the tab.

But that was a bit too much CSS for my head so instead, I'm going to add yet another notes field in my form called Note_TabCSS and modify the above workflow (OnUserInput_Tabs) to something like the following:
copyraw
hide Tab_Section_1;
hide Tab_Section_2;
hide Tab_Section_3;
hide Tab_Section_4;
hide Tab_Section_5;
hide Tab_Section_6;
hide Tab_Section_7;
//
if(isNull(input.Tabs) || input.Tabs == "Quote")
{
	show Tab_Section_1;
	v_SelectedTab = 1;
}
else if(input.Tabs == "Product Details")
{
	show Tab_Section_2;
	v_SelectedTab = 2;
}
else if(input.Tabs == "Photos")
{
	show Tab_Section_3;
	v_SelectedTab = 3;
}
else if(input.Tabs == "Shopify")
{
	show Tab_Section_4;
	v_SelectedTab = 4;
}
else if(input.Tabs == "Shopify Preview")
{
	show Tab_Section_5;
	v_SelectedTab = 5;
}
else if(input.Tabs == "eBay")
{
	show Tab_Section_6;
	v_SelectedTab = 6;
}
else if(input.Tabs == "eBay Preview")
{
	show Tab_Section_7;
	v_SelectedTab = 7;
}
else
{
	show Tab_Section_1;
	v_SelectedTab = 1;
}
//
// highlight selected tab
v_Css2 = "<style>";
v_Css2 = v_Css2 + ".zc-Tabs-group .choice-table-row:nth-child(" + v_SelectedTab + ") .choice-label-text{color:#fff;background: linear-gradient(#006f3d, #ff0) !important;}";
v_Css2 = v_Css2 + "</style>";
input.Note_TabCSS = v_Css2;
  1.  hide Tab_Section_1; 
  2.  hide Tab_Section_2; 
  3.  hide Tab_Section_3; 
  4.  hide Tab_Section_4; 
  5.  hide Tab_Section_5; 
  6.  hide Tab_Section_6; 
  7.  hide Tab_Section_7; 
  8.  // 
  9.  if(isNull(input.Tabs) || input.Tabs == "Quote") 
  10.  { 
  11.      show Tab_Section_1; 
  12.      v_SelectedTab = 1
  13.  } 
  14.  else if(input.Tabs == "Product Details") 
  15.  { 
  16.      show Tab_Section_2; 
  17.      v_SelectedTab = 2
  18.  } 
  19.  else if(input.Tabs == "Photos") 
  20.  { 
  21.      show Tab_Section_3; 
  22.      v_SelectedTab = 3
  23.  } 
  24.  else if(input.Tabs == "Shopify") 
  25.  { 
  26.      show Tab_Section_4; 
  27.      v_SelectedTab = 4
  28.  } 
  29.  else if(input.Tabs == "Shopify Preview") 
  30.  { 
  31.      show Tab_Section_5; 
  32.      v_SelectedTab = 5
  33.  } 
  34.  else if(input.Tabs == "eBay") 
  35.  { 
  36.      show Tab_Section_6; 
  37.      v_SelectedTab = 6
  38.  } 
  39.  else if(input.Tabs == "eBay Preview") 
  40.  { 
  41.      show Tab_Section_7; 
  42.      v_SelectedTab = 7
  43.  } 
  44.  else 
  45.  { 
  46.      show Tab_Section_1; 
  47.      v_SelectedTab = 1
  48.  } 
  49.  // 
  50.  // highlight selected tab 
  51.  v_Css2 = "<style>"
  52.  v_Css2 = v_Css2 + ".zc-Tabs-group .choice-table-row:nth-child(" + v_SelectedTab + ") .choice-label-text{color:#fff;background: linear-gradient(#006f3d, #ff0) !important;}"; 
  53.  v_Css2 = v_Css2 + "</style>"
  54.  input.Note_TabCSS = v_Css2; 
And I'd also have to add some code to the OnLoad workflow I created earlier which defaults this to perhaps the first tab:
copyraw
//
// by default highlight first tab
v_Css2 = "<style>";
v_Css2 = v_Css2 + ".zc-Tabs-group .choice-table-row:first-child .choice-label-text{color:#fff;background: linear-gradient(#006f3d, #ff0) !important;}";
v_Css2 = v_Css2 + "</style>";
input.Note_TabCSS = v_Css2;
  1.  // 
  2.  // by default highlight first tab 
  3.  v_Css2 = "<style>"
  4.  v_Css2 = v_Css2 + ".zc-Tabs-group .choice-table-row:first-child .choice-label-text{color:#fff;background: linear-gradient(#006f3d, #ff0) !important;}"; 
  5.  v_Css2 = v_Css2 + "</style>"
  6.  input.Note_TabCSS = v_Css2; 

Source(s):
  • The little bit of my little brain that holds a little information on Cascading StyleSheets (CSS) and Google Chrome's inspect element...

Category: Zoho :: Article: 782

Credit where Credit is Due:


Feel free to copy, redistribute and share this information. All that we ask is that you attribute credit and possibly even a link back to this website as it really helps in our search engine rankings.

Disclaimer: The information on this website is provided without warranty and any content is merely the opinion of the author. Please try to test in development environments prior to adapting them to your production environments. The articles are written in good faith and, at the time of print, are working examples used in a commercial setting.

Thank you for visiting and, as always, we hope this website was of some use to you!

Kind Regards,

Joel Lipman
www.joellipman.com

Related Articles

Joes Revolver Map

Joes Word Cloud

script   field   shopify   note   above   tabs   code   notes   selected   labels   options   creator   form   name   text   group   input   wrapper   ebay   style   would   client   quote   deluge   css2   mine   called   choose   hide   choice   workflows   make   workflow   little   preview   title   else   yields   calling   table   label   record   stylesheet   radio   event   tabcss   first   section   created   need   JoelLipman.Com

Accreditation

Badge - Certified Zoho Creator Associate
Badge - Certified Zoho Creator Associate

Donate & Support

If you like my content, and would like to support this sharing site, feel free to donate using a method below:

Paypal:
Donate to Joel Lipman via PayPal

Bitcoin:
Donate to Joel Lipman with Bitcoin - Valid till 8 May 2022 3QnhmaBX7LQSRsC9hh6Je9rGQKEGNQNfPb
© 2021 Joel Lipman .com. All Rights Reserved.