our forms are too long to keep scrolling through the entire page. at the conference they showed how to create tabs on forms. anybody know where i could find this code?
The code is included with the multi-page job application form from this year's BPM251 conference course. Here's a link to the zip file that includes the process you'll want to look at.
There are a few steps involved:
Is there an example of the CSS code? I've tried doing it myself but have no luck creating the tabs. I'm not too familiar with CSS or JavaScript. Tab navigation in laserfiche forms would be very helpful because of the length of our forms.
If you import the sample business process from the zip file in my previous reply, you'll see the CSS and JavaScript used in the example. Did you follow the steps I mentioned to customize it for your form?
We're considering the ability to create forms with pages as a feature for an upcoming release.
How were you able to make the first section visible, but hide the other sections/pages? I have followed your design directions and tried to implement a form with pagination, but all my sections/pages are visible. Only after I click on a "tab" do the pages behave as expected.
Thanks in advance for your assistance.
This line at the end of the JavaScript triggers the code to run when the form loads:
$('.navitem.info').trigger('click');
If the code works after you manually click a tab or button, the error is probably on this line.
Going through the rest of the code, we can see when the sections are shown or hidden:
When this code runs (after a user clicks a navigation item), it hides all the sections and the submit button:
$('.navitem').on('touchstart click', function () {
$('.sections,.Submit').hide(); //hides all the sections
After that, the code looks through the navigation tabs and removes the selected class.
$('.navbar').find('.navitem').removeClass('selected');
Then, it looks at the navigation item that was clicked and shows or hides the other sections based on the navigation item's class (info, work, edu, or sup) and adds the selected class to the appropriate tab.
if ($(this).hasClass('info')) {
$('.section1').show();
$('.navbar').find('.info').addClass('selected');
}
else if ($(this).hasClass('work')) {
$('.section2').show();
$('.navbar').find('.work').addClass('selected');
}
else if ($(this).hasClass('edu')) {
$('.section3').show();
$('.navbar').find('.edu').addClass('selected');
}
else if ($(this).hasClass('sup')) {
$(".section4, .Submit").show();
$('.navbar').find('.sup').addClass('selected');
}
The last line was the culprit. I needed to change the navitem.xxxx value to my div class navitem. (I had copied your sample jscript and had missed changing that one line. Works like a charm!
Eric, is there a way to create a "Next" button at the bottom of each section that when clicked would take you to the next tab? This would help prevent users from having to scroll back to the top of the page.
In trying to retrieve the code for the multi-page job application form from the link above, all I get is an expense report. Has the job application form moved?
I'm trying to download the zip sample to test it but I'm receiving 404 - File or directory not found when I click the link.
Where I can download this sample?
Pedro, I found a copy on the support site.
Should be the one titled BPM251: Advanced Laserfiche Forms
Hi Chynna, I was trying to find the one for the Empower 2016 that are using Forms 10. I will try this version also, thanks.
Is there a way to make the "next" and "previous" buttons navigate to the top of the next page instead of the bottom?