You are viewing limited content. For full access, please sign in.

Question

Question

Apply/Modify Pagination Tab CSS based on Radio Button Value

asked on May 23

In the Modern Forms Designer, is it possible to apply/modify the CSS for a pagination tab based on radio button value?  For example, I have several dozen Status fields spread out over several tabs. Under each tab, when all are marked Complete (default selection on form load is In-Progress), I would like to add a green bottom-border to the tab to indicate all items on this tab are completed.  

0 0

Replies

replied on May 23 Show version history

The trick here is that the tabs themselves are not actually a part of the pages - so @████████ example of formatting the page itself is going to be the easiest to implement.

I wanted to try to see if something was possible, and I found a (somewhat complex) option that is at the very least interesting.  You can get CSS applied to the tabs that changes how they appear.  The trick is there doesn't appear to be a way to manipulate the classes that are assigned to the tabs.  What you can manipulate, via the LFForm interface and Javascript, is the titles of the tabs.  So I figured I would try to have the CSS based on the titles.

I made a form with five tabs, just naming them Page 1, Page 2, Page 3, Page 4, and Page 5.  On each tab I added radio buttons that can be marked Complete, and a number field that determines how many of those are not complete.  It's just a simple formula that adds a 0 if they are complete or a 1 otherwise, like this: 

=IF(page2_radio_1="Complete",0,1)+IF(page2_radio_2="Complete",0,1)+IF(page2_radio_3="Complete",0,1)

 

Then I made a Javascript that checks for changes to the number fields counting up how many radio button fields are not marked complete.  That Javascript renames the page title based on whether or not there are incomplete radio buttons.  It appends either a ✔ character to the end of the page name if all of them are complete or a ⚠ character to the end of the page name if some are not complete.  The Javascript looks like this: 

//Function to update the Page 1 title based on the count field on that page.
LFForm.onFieldChange(function() {
  let page1 = LFForm.getFieldValues({variableName: "page1_count"});
  if(page1 != 0) {
    LFForm.changeFormSettings({pagination: [{pageId: 0, label: "Page 1 ⚠"}]});
  }
  else {
    LFForm.changeFormSettings({pagination: [{pageId: 0, label: "Page 1 ✔"}]});
  }
}, {variableName: "page1_count"});

//Function to update the Page 2 title based on the count field on that page.
LFForm.onFieldChange(function() {
  let page2 = LFForm.getFieldValues({variableName: "page2_count"});
  if(page2 != 0) {
    LFForm.changeFormSettings({pagination: [{pageId: 1, label: "Page 2 ⚠"}]});
  }
  else {
    LFForm.changeFormSettings({pagination: [{pageId: 1, label: "Page 2 ✔"}]});
  }
}, {variableName: "page2_count"});

//Function to update the Page 3 title based on the count field on that page.
LFForm.onFieldChange(function() {
  let page3 = LFForm.getFieldValues({variableName: "page3_count"});
  if(page3 != 0) {
    LFForm.changeFormSettings({pagination: [{pageId: 2, label: "Page 3 ⚠"}]});
  }
  else {
    LFForm.changeFormSettings({pagination: [{pageId: 2, label: "Page 3 ✔"}]});
  }
}, {variableName: "page3_count"});

//Function to update the Page 4 title based on the count field on that page.
LFForm.onFieldChange(function() {
  let page4 = LFForm.getFieldValues({variableName: "page4_count"});
  if(page4 != 0) {
    LFForm.changeFormSettings({pagination: [{pageId: 3, label: "Page 4 ⚠"}]});
  }
  else {
    LFForm.changeFormSettings({pagination: [{pageId: 3, label: "Page 4 ✔"}]});
  }
}, {variableName: "page4_count"});

//Function to update the Page 5 title based on the count field on that page.
LFForm.onFieldChange(function() {
  let page5 = LFForm.getFieldValues({variableName: "page5_count"});
  if(page5 != 0) {
    LFForm.changeFormSettings({pagination: [{pageId: 4, label: "Page 5 ⚠"}]});
  }
  else {
    LFForm.changeFormSettings({pagination: [{pageId: 4, label: "Page 5 ✔"}]});
  }
}, {variableName: "page5_count"});

 

Finally, I added some CSS that looks at the tabs, and applies formatting based on whether the title contains the ✔ character or the ⚠ character. 

//Format the complete tabs.
&.Form .form-tab[title~="✔"],
&.Form .form-tab.active[title~="✔"]
{
  background-color: #00FF00;
}

//Format the incomplete tabs.
&.Form .form-tab[title~="⚠"],
&.Form .form-tab.active[title~="⚠"]
{
  background-color: #FF0000;
  color: #FFFFFF;
}

 

The end result looks like this:

 

Its not perfect but it is an interesting start at least.

2 0
replied on May 23

I'm trying to figure out if there's a way to isolate the page tab header itself based on selections, but there is a way to apply CSS to the page as a whole based on one or multiple radio buttons using a field rule to apply a CSS class depending on the selections.

.GreenBorder {
	border-color: green;
}

Alternatively, you could disable the "Next" button until all radio buttons on that page are marked as "Complete"? Obviously this would depend on whether the form is completed in order or not, though.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.