User Interface‎ > ‎

Tab Panel

In this example, I have created three tabs using the tabPanel in UiApp.

Reference Page:

Example Code:

function doGet() {
//Create an application
  var app = UiApp.createApplication();
//Let us write some content which will be used later inside tabs
  var content1 = 'This is the area for tab1 content';
  var content2 = 'You are on tab 2 Now';
  var content3 = 'This is third tab';
//Create Tabpanel
  var tabPanel = app.createTabPanel();

//Create Vertical panel which will reside inside tabs
  var verticalPanel1 = app.createVerticalPanel().setWidth('400').setHeight('200');
  var verticalPanel2 = app.createVerticalPanel().setWidth('400').setHeight('200');
  var verticalPanel3 = app.createVerticalPanel().setWidth('400').setHeight('200');
//Add the contents to vertical panel
//Add all the vertical panels to the tabpanel
  tabPanel.add(verticalPanel1, 'Tab1')
    .add(verticalPanel2, 'Tab2')
    .add(verticalPanel3, 'Tab3');
//Select your default tab , Index 0 mean first tab, index 2 = second tab and so on 
//Add the tabPanel to the application
  return app;