Render groups as bootstrap tabs

[ericpyle]

Wishing I could use groups to render the form in a different way, like with each section having it's own tab. I could have multiple vfg instances with one form per tab. Or maybe I could use multi attribute to just hide all fields that are not in that tab.

Thoughts on best way to do this?

[ericpyle]

Or use visibility function that can somehow determine which tab is in use?

[DelfsEngineering]

This works great:
Take your source schema and insert a function for the visibility field key's value

So if you want to show/hide field(s) based on the value of another field set their visibility to a function like

function(){
   return this.model.fieldA == 'someValue'
}

of course use what ever logic you want now.

[DelfsEngineering]

For tabs see vue-form-wizard here https://github.com/cristijora/vue-form-wizard

[ericpyle]

@DelfsEngineering thanks so much for the suggestions! I'll definitely take a harder look at the vue-form-wizard. Know of any examples of how to make the tabs look like regular bootstrap tabs? It's possible that I could rethink whether my app should have more of a guided wizard UX, but converting my app over to how it currently works would be great.

[ericpyle]

@DelfsEngineering also, do you know of any examples of how the multi field and multiple option is used in practice? I see what the documentation says, but I suspect there's a use-case or use-cases behind supporting that and the merge logic that respects multi. Thanks again for any help!

[DelfsEngineering]

I suppose the best you could do without forking vue-form-wizard is some injected CSS, or hacking the accompanying CSS.

[cristijora]

Hey @ericpyle
For tabs
https://github.com/spatie/vue-tabs-component
https://github.com/cristijora/vue-tabs

For a more strict flow/wizard
https://github.com/cristijora/vue-form-wizard
The wizard supports tab layout, however they do not act like tabs since the wizard has a stricter validation flow (e.g you can't click a tab unless it was visited and validated)
https://jsfiddle.net/bt5dhqtf/99/

If you need tabs and more flexibility use tab components.
If you need a stricter validation flow use the wizard. Both tabs and the wizard should work fine with form-generator.

[ericpyle]

Thanks, @cristijora. I'll look into integrating vfg with the other tab components and also ask my team whether we want to move toward a wizard approach.

@DelfsEngineering I still have an outstanding question about use cases for multi and multiple in vfg, if anyone cares to share?

[cristijora]

@ericpyle you mean multi select ? A select with multiple options? Not sure I understand what multi refers to. Maybe send a link from the docs where you saw it

[ericpyle]

I mean multi field property "if true, it will visible only if multiple is true in component attributes" https://icebob.gitbooks.io/vueformgenerator/content/fields/field_properties.html

[ericpyle]

@cristijora see reply above. Thanks!

[cristijora]

@ericpyle Honestly not sure to what it refers. I've used the multiple property only on multi-select field which has vue-multi-select behind it.
Maybe @icebob or @lionel-bijaoui could answer to this.

[ericpyle]

as far as this issue goes, I'm ready to close it. I think if needed, I could have one vfg instance that gets reloaded each time a user switches tabs.

@icebob before I close this, could you please explain what the multi field property is used for in conjunction with multiple vfg option? I've seen the documentation, but I haven't seen working examples to help me understand what it's used for

[zoul0813]

@ericpyle can we close this?

[ericpyle]

@zoul0813 yes