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

Question

Question

Java Script to add new Page

Version 10 Forms
Updated March 12, 2019
asked on February 15, 2019

Hi all! 

 

I am attempting to add or replicate a page on a form in a new "tab" or page within the form. The idea would be for a building inspection: For each floor i would like to replicate the current page in a new page so that the form can be as big or small as needed. 

 

Anyone seen this done ? 

0 0

Replies

replied on February 15, 2019 • Show version history

This is going to be really tricky, if it can be done at all because I'm not sure what your exacts needs are, but you would need to use a collection for your fields because any inputs you add to the form dynamically would not be saved.

 

I've used CSS and JavaScript to make a collection look like multiple tabs, but that only applied to the user interface; the data was stored normally on the back-end.

It is way too complex to go into detail and I have too much stuff specific to my process to be able to pick out the useful bits, but here are the basics of what I did

  • Added a custom html object to hold my "tabs"
  • Added a Collection with all my fields
  • Added CSS to style the tabs and make the collection groups show as inline-blocks

 

Then the complex part is the JavaScript

  • Detect the number of tabs required
  • Trigger the click on the "add" button in the collection to get the desired number of groups
  • Add HTML objects to create "tabs" for each group with a data attribute containing the index number
  • When you click a tab, hide everything except the group with a matching index

 

0 0
replied on March 12, 2019

This is excellent work. I am trying to accomplish something similar. Could you possibly provide some of the CSS that you used to style these collections to appear as tabs? And the Custom HTML object?

Thank you so much for your help and experience!

0 0
replied on March 12, 2019

I can't really pull out the "key" pieces because there's a lot of CSS to filter through that wouldn't be applicable. The custom HTML is actually just a container and the "tab" headers are added via JavaScript.

However, the key is to show/hide the repeating elements/children of the collection, and use inline-block on the tabs. When I add the tab via JavaScript, I set a data attribute equal to the index, which tells the code which child of the collection to show when it is clicked.

The collection elements have left, right, and bottom border, and the tab headers have all borders. The "current" tab has an additional class added when it is selected, which removes the bottom border and changes the color.

I wish I could provide more specific code/CSS, but unfortunately it would take a lot of time to strip out the parts that are meaningful and not specific to my process/form.

2 0
replied on March 11, 2019

This is going to be a beast of a task! I appreciate your help! I hadn't thought to use collector, so i will explore this a little more and let you know what i can come up with. You definitely set me down a different path, so thank you! 

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

Sign in to reply to this post.

Details
Related Posts
Loading ...