Building a tabbed form with navigation bar

  • 19 October 2015
  • 1 reply
  • 11 views

Badge +7

Building a tab form with a navigation button bar that allows navigate between tabs.


Since a view can only be on 1 tab at a time,  a header view (with the icons) and a navigation view (with the buttons) needs to be moved “outside” the panels used for tabs.


 



  1. Make sure the header view is the 1stview on the 1st tab

15958i03F9B78FA9E60346.png


 


 


2. Make sure that the navigation view is the last view on the last tab


 


11888iA75E9C154019DC16.png


 


3. Add a hidden data-label to the form, check it’s “Literal” property, and use a “Transfer data” action in the “Form initializing” rule to set its value to :


 


<script language="javascript" type="text/javascript">$('.view:first').insertBefore(".tabs-top");$('.view:last').insertAfter(".tab-box-body");</script>

 


16860iDC9EB08EB7BE3F03.png


 


10826i5D135F255C26D8A8.png


 


12113iB4D5E1F06C100EEF.png


 


1 reply

Userlevel 5
Badge +16

Hi mate,

 

Nice work :)

Reply