Home › Forums › Classic DFFS › Hide Next & Previous buttons on Certain Tabs
- This topic has 9 replies, 2 voices, and was last updated 5 years, 11 months ago by Bryan R Babbitt.
-
AuthorPosts
-
-
January 7, 2019 at 00:37 #23355
Hi Alex,
I have been trying to hide the Next and Previous button on certain tabs. I also have a redirect set up on the New form to redirect to the Edit form in which I have added a Preview button. I have set these up using the options within DFFS.
However, I want to hide the “Preview” button all tabs except the last available. I want to hid the Next Button on the Last Tab available. In addition, on the first available tab, I want to hide the Previous button.
I am having the hardest do this. I have tried using Case statements and if statements but with only partial achievement. Currently I have a 5 tabs on the New form and 7 on the Edit with a couple of those tabs hidden based on values.
Can you help me with this issue? I tried using the 1 solution found in the forum, but again, I didn’t have much luck implementing it.
here is a snippet of some of the code I am trying use…
function hideButtons(tab){
if (tab == 0 ) {
jQuery(“input[value*=’Previous’]”).css(‘display’,’none’)
jQuery(“#TTDD”).val(jQuery(“#TTDD1”).val())
} else {
jQuery(“input[value*=’Previous’]”).css(‘display’,’block’)
} //end if
if (tab == 1 ) {
jQuery(“#TTDD1”).val(jQuery(“#TTDD”).val())
}
if (tab == 3) {
jQuery(“input[value*=’Next’]”).css(‘display’,’none’)
} else {
jQuery(“input[value*=’Next’]”).css(‘display’,’block’)
} //end if
} //end function
——Here is case statement that I tried…
function hideButtons(tab) {
switch (tab) {
case ‘0’: //Incident Details
//Hide Previous Show NextjQuery(“input[value*=’Previous’]”).css(‘display’, ‘none’);
jQuery(“input[value*=’Next’]”).css(‘display’, ‘block’);
//Sync Timezone with time tracking page
jQuery(“#TTDD”).val(jQuery(“#TTDD1”).val());
break;
case ‘1’: //Time Tracking
//Show Previous Show Next
jQuery(“input[value*=’Previous’]”).css(‘display’, ‘block’);
jQuery(“input[value*=’Next’]”).css(‘display’, ‘block’);
//Sync with Incident Details
jQuery(“#TTDD1”).val(jQuery(“#TTDD”).val());
break;
case ‘2’: //SIR CBLs
//Show Previous Show Next
jQuery(“input[value*=’Previous’]”).css(‘display’, ‘block’);
jQuery(“input[value*=’Next’]”).css(‘display’, ‘block’);
break;
case ‘3’: //Impact Matrix
//If FFC is required, show Previous and Next, otherwise only show Previous
jQuery(“input[value*=’Previous’]”).css(‘display’, ‘block’);if (getFieldValue(“FullFormCommunicationRequired”) == “Yes”) {
jQuery(“input[value*=’Next’]”).css(‘display’, ‘block’);
} else {
jQuery(“input[value*=’Next’]”).css(‘display’, ‘none’);
}
break;
case ‘4’: //Admin
//Show Previous Show Next
jQuery(“input[value*=’Previous’]”).css(‘display’, ‘block’);
jQuery(“input[value*=’Next’]”).css(‘display’, ‘block’);
break;
case ‘5’: //Turnover
//If FFC is required, show Previous and Next, otherwise only show PreviousjQuery(“input[value*=’Previous’]”).css(‘display’, ‘block’);
if (getFieldValue(“FullFormCommunicationRequired”) == “Yes”) {
jQuery(“input[value*=’Next’]”).css(‘display’, ‘block’);
} else {
jQuery(“input[value*=’Next’]”).css(‘display’, ‘none’);
}
break;
case ‘6’: //Full Form Communication
//Show Previous Show Next
jQuery(“input[value*=’Previous’]”).css(‘display’, ‘block’);
jQuery(“input[value*=’Next’]”).css(‘display’, ‘block’);
break;
case ‘7’: //ait tab
//Show Previous Show Next
jQuery(“input[value*=’Previous’]”).css(‘display’, ‘block’);
jQuery(“input[value*=’Next’]”).css(‘display’, ‘none’);
break;
case ‘8’: //ait tab
//Show Previous Show Next
jQuery(“dffs_navTabBtn_next input [value=’Previous’]”).css(‘display’, ‘block’);
jQuery(“dffs_navTabBtn_next input [value=’Next’]”).css(‘display’, ‘none’);
break;
} //end switch
} //end function -
January 7, 2019 at 19:11 #23370
Hi,
Try it like this:var selectedTab; setInterval(function(){ var st = spjs.dffs.data.selectedTab; if(st !== selectedTab){ selectedTab = st; // First tab if(st === Number(jQuery(".tabBase:visible:first").attr("tabindex"))){ // Hide prev tab jQuery("#dffs_navTabBtn_prev").hide(); }else{ // Show prev tab jQuery("#dffs_navTabBtn_prev").show(); } // Last tab if(st === Number(jQuery(".tabBase:visible:last").attr("tabindex"))){ // Hide next tab jQuery("#dffs_navTabBtn_next").hide(); // add your Preview button "show" code here }else{ // Show next tab jQuery("#dffs_navTabBtn_next").show(); // add your Preview button "hide" code here } } },100);
Hope this gets you started – let me know how it works out.
Alexander
- This reply was modified 5 years, 11 months ago by Alexander Bautz. Reason: fixed code snippet
-
January 8, 2019 at 21:19 #23384
Thanks Alex! I’ll give it a shot a let you know.
-
January 14, 2019 at 05:22 #23499
Hi Alex,
well I gave it a shot and I guess I didn’t do something right because I still couldn’t get it to work. Do I need to change any parts of your example code?Sorry, still learning about how all this works.
Thanks again sir.
-
January 14, 2019 at 20:13 #23510
You shouldn’t have to change anything in the snippet, but which version of DFFS are you running? – I don’t recall exactly, but I think I might have added the ID on the back and forward buttons in a later version. You can right click one of them and select “Inspect” and see if you find the ID attribute in the HTML code show in the developer console.
Alexander
-
January 19, 2019 at 01:22 #23563
Hi Alex,
I have version Dynamic Forms for SharePoint DFFS Backend v4.4.3.47|CSS version: 4.43 / 4.43|spjs-utility version: 1.323.
<input class=”ms-ButtonHeightWidth” id=”dffs_navTabBtn_next” style=”display: block;” onclick=”spjs.dffs.navTab(1);” type=”button” value=”Next”>
or
<input class=”ms-ButtonHeightWidth” id=”saveAndStayInFormBtn” style=”margin-right: 4px;” onclick=”spjs.dffs.saveAndStayInForm();” type=”button” value=”Preview/Save”>
-
January 19, 2019 at 09:43 #23565
Your version looks good and there is no reason the code should not work, but you must insert your own code where I have written “// add your Preview button “hide” code here” and “// add your Preview button “show” code here”.
You can add a console.log (or an alert if you like) here to ensure the code runs:
var selectedTab; setInterval(function(){ var st = spjs.dffs.data.selectedTab; if(st !== selectedTab){ selectedTab = st; console.log("Selected tab: " + st); // or use alert // First tab if(st === Number(jQuery(".tabBase:visible:first").attr("tabindex"))){ // Hide prev tab ... ...
Alexander
-
January 21, 2019 at 04:42 #23568
Hi Alex,
I was able to get your snippet of code to work and it worked well! Thanks! However, the issue I had was that my end Tab isn’t always the same. I have a couple of hidden tabs that show based off a radio button on the first tab. So with that, I reverted back to one of my original code snippets. I actually have it working exactly like I want (I think) except for one thing… It only works properly when I click the tabs. If I use the buttons, or change an option on a radio button, it adds back buttons that that should be hidden. Can you possibly adjust this to also work when the user uses the buttons to got the next or previous page?
I have attached a couple of screen shots as well. I can get the buttons to reset the way they should be by just clicking the tab at the top.Oh, the runFun function is set to run when the tabs change.
Thank you for all your help with this!
Attachments:
-
January 21, 2019 at 20:53 #23579
The code snippet I posted on January 7 runs on an interval, but only triggers when you change tabs. You can get it to detect new tabs being shown by your rules if you remove this line:
if(st !== selectedTab){
If you do, I suggest changing the interval (last line) from 100 to maybe 500.
Try it and see if it helps.
Alexander
-
January 22, 2019 at 13:32 #23591
Thank you! With a couple added if statements, I was able to this to work exactly like I wanted.!
-
-
AuthorPosts
- You must be logged in to reply to this topic.