Tab Panel

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

Reference Page:

Example demo:

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

  verticalPanel1.add(app.createLabel(content1));

  verticalPanel2.add(app.createLabel(content2));

  verticalPanel3.add(app.createLabel(content3));

  

//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 

  tabPanel.selectTab(1);

  

//Add the tabPanel to the application

  app.add(tabPanel);

  return app;

}