Question

Request for Customizable Tab Positioning and Parent-Child Tabs in Laserfiche Forms

Laserfiche Version 11 Ideas Forms

Updated July 28

asked on March 18 • Show version history

Hello, Laserfiche Community,

I am currently working on a new Process using New Form Designer layout that utilizes the tabbed interface for better organization. However, I would like to modify the position and behavior of the tabs for improved user experience. Specifically, I am looking for a way to:

Change the tab position from the default top location to either left or right as a vertical column (similar to a sidebar).
Introduce a parent-child tab structure, where sections or page breaks could be converted into sub-tabs, allowing for a more structured hierarchy (see attached example from a USCIS form for reference).

Request for Solutions & Feature Implementation

Current Workarounds: Is there a known method (via CSS and/or JavaScript) that allows modifying the tab position without breaking the built-in functionality?
Future Enhancements: If such an option is not available, could this be considered as an enhancement for future releases? The ability to create nested tabs (parent-child) and reposition them (left/right) would significantly improve form organization, especially for long and complex forms.

Has anyone in the community successfully implemented this? Or is this something Laserfiche could incorporate as a new feature?

Thank you for your insights!

digt form.png (124.67 KB)

1 0

Answer

SELECTED ANSWER

replied on March 18

Here's some really basic CSS that will move the tab menu to the left side using the Modern Designer. Maybe you could customize it for your use.

nav {
  margin: 20px 0 30px 0 !important;
  padding: 0 !important;
  width: 200px !important;
  background-color: white !important;
  position: fixed !important;
  overflow: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

nav > a {
  display: flex !important;
  color: black !important;
  text-decoration: none !important;
}

.form-pages-container {
  margin-left: 200px !important;
  padding: 1px 16px !important;
  width: 600px !important;
}

3 0

Replies

replied on March 18

This is probably possible with some CSS/JavaScript magic, but I'm not enough of an expert on either to write that solution for you. It would definitely be much more convenient if the functionality was native and no-code.

1 0

View 2 previous replies

replied on March 18

We're on the same page regarding CSS/JavaScript knowledge. That's why I launched this initiative to see if anyone has already done it, or if I could motivate the development team to consider this type of functionality in future updates.

The department that asked me to create a new Laserfiche process to handle certain requests linked to immigration applications, asked if I could achieve this type of modification to the Tabs, or find a way to transform the Tabs into a side menu with sub-menus linked to the sections, which at the same time could go from one to another either by clicking or moving by pressing the next or previous buttons (it was another idea that came up at the meeting), because they work a lot with forms within USCIS, and they feel very comfortable when moving between the information of a form in USCIS, and when they come to the Laserfiche environment, they find it a bit rigid for their user experience, since it is very difficult for them on occasions when a form is composed of several Tabs and Multiple sections of information to be able to access them quickly and fluidly.

Thanks for stopping by and taking an interest in this topic.

0 0

SELECTED ANSWER

replied on March 18

Here's some really basic CSS that will move the tab menu to the left side using the Modern Designer. Maybe you could customize it for your use.

nav {
  margin: 20px 0 30px 0 !important;
  padding: 0 !important;
  width: 200px !important;
  background-color: white !important;
  position: fixed !important;
  overflow: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

nav > a {
  display: flex !important;
  color: black !important;
  text-decoration: none !important;
}

.form-pages-container {
  margin-left: 200px !important;
  padding: 1px 16px !important;
  width: 600px !important;
}

3 0

replied on March 18 • Show version history

Wow, that was a very good approach. I think it's an excellent starting point. I'll play around with your proposal a bit to see if I can find a way to create or include some kind of anchor or something as part of the menu that allows me to navigate between the internal sections of each tab from the same menu.
Your proposal suggests a very convenient change to use with the Tabs menu.

Thank you a lot Kevin, you're a good CSS magician.

0 0

replied on March 20 • Show version history

Although not a true parent-child. You can manually indent certain nav items with the nth-child selector

nav > a:nth-child(2) {
  margin-left: 1em;
}

But I'd be hesitant to add this out of the box because I'm not sure how well it would display with top navigation for the non-tab pagination types. I'll note it down though

1 0

replied on March 20

Thank you Zachary,

I was trying to apply your suggestion, along with Kevin's CSS code, and it may not be the definitive solution (which would be ideal if I could count or convert sections into child tabs or submenus), but right now I'm using both and slightly changing the way I design the form to achieve my goal.
Based on this combined idea, I would have to transform each section into a tab and apply CSS to it, changing the nth-child(id) to achieve that type of visual interaction.
I might be able to work with these two CSS codes temporarily until a native or other applicable solution appears.
How can I mark both CSS recommendations as possible solutions for now?

To be honest, if we slightly change the way we structure the form, it will be 100% applicable to my needs or to a case like this that I'm looking for.

0 0

You are not allowed to follow up in this post.

Question

Question

Request for Customizable Tab Positioning and Parent-Child Tabs in Laserfiche Forms

Answer

Replies

Sign in to reply to this post.