First Sample Event Page

This is sampleEvent01.
Just a piece of HTML code that will be embeded into the main form using #include() YeAPF function.
All this stuff is running inside the same context.

All Bootstrap3 tags and classes can be used as you can see in the source code.
The only classes you will use to add TAB navigation are: tnContainer and tnTab
Each tnContainer is like a book where you can find sheets (tnTab)
This template uses yapp.js.
If you want to use yapp, you need to remember that yapp has some mandatory tabs.
For this page (sample01), you will need to have this minimal structure in your tab: 
<div class="container">
  <div class="row clearfix">
    <div class="col-md-12 column">
      <h1>Sample01</h1>
      

      <div class=tnContainer>
        

        <div class=tnTab id=vwTblSample01>
          <!-- Place to browse data -->
          <table class="table" id=tblSample01>
            <thead>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
        

        

        <div class=tnTab id=vwFrmSample01>
          <!-- Place to edit data -->
          <form id=frmSample01></form>
        </div>
        

      </div>
      

    </div>
  </div>
</div>
You can identify YeAPF tag and BootStrap3 tags by colour, and, as you can see, the required control elements are in bold and all have the same postfix in the name or id (Sample01)
You can appreciate the same structure in f_dummySample.html file

h3. Lorem ipsum dolor sit amet.

# Product Payment Taken Status
1 TB - Monthly 01/04/2012 Default
1 TB - Monthly 01/04/2012 Approved
2 TB - Monthly 02/04/2012 Declined
3 TB - Monthly 03/04/2012 Pending
4 TB - Monthly 04/04/2012 Call in to confirm