Google Apps Script – Creating UI – part 001. – free-tutorials.org news free tutorials source code development scripts

What is the Google Apps Script?

It’s a JavaScript cloud scripting language that extends Google Apps and provides easy ways to automate tasks across Google products and third party services.

So you can deal with all Google products like docs, Gmail, calendar, maps, etc. to make all good for you.

Now it’s three ways users access UI developed in Apps Script :

– Google spreadsheet

– Google sites

– standalone – can be accessed by URL

It’s two types of apps Script UI Objects.

+panels

-form panel

-horizontal panel

-vertical panel

-flow panel

-… and more

+widgets

-text box

-labels

-buttons

-checkboxes

-text area

-radio buttons

-… and more

How to using panels in the right way…

First, you need to create the application. See the script:

var app = UIApp.Create Application()
add vertical panel 
app.createVerticalPanel()
app.add(panel)
add widgest 
app.createTextBox()
panel.add(textbox)

var app = UIApp.Create Application()

add vertical panel

app.createVerticalPanel()

app.add(panel)

add widgest

app.createTextBox()

panel.add(textbox)

You can also create one horizontal panel

app.createHorizontalPanel()

1	app.createHorizontalPanel()

… or maybe if you want a flow panel

app.createFlowPanel()

1	app.createFlowPanel()

Let’s make one simple script example to show you how to do it.

First, open one new spreadsheet in your google drive account.

Go to Menu – Tools -> Script Editor, see the next image:

appscript-001

Select Blank Project …

appscript-002

You will have one new tab in your browser, this will be the editor to write your script.

appscript-003

Write in this editor this script.


function myDialog() {
  var app = UiApp.createApplication();
  app.setTitle("my dialog script");
  var panel = app.createVerticalPanel();
  var textBox = app.createTextBox();
  textBox.setName('mytextboxname').setId('mytextbox');
  var button = app.createButton('Start');
  panel.add(textBox);
  panel.add(button);
  app.add(panel);
  var doc = SpreadsheetApp.getActive();
  doc.show(app);  
}

function myDialog() {

var app = UiApp.createApplication();

app.setTitle("my dialog script");

var panel = app.createVerticalPanel();

var textBox = app.createTextBox();

textBox.setName('mytextboxname').setId('mytextbox');

var button = app.createButton('Start');

panel.add(textBox);

panel.add(button);

app.add(panel);

var doc = SpreadsheetApp.getActive();

doc.show(app);

}

Save the script and try to run button (will see something like one play button in the menu).

First time when you try to run the project will need some authorization. Be agree.

In the tab browser with your spreadsheet will see this:

appscript-004

The next step is to make one function to handle user action.

The handlers are used to wire user response to Apps Script functions.

This it’s the full source script :


function myDialog() {
  var app = UiApp.createApplication();
  app.setTitle("my dialog script");
  var panel = app.createVerticalPanel();
  var textBox = app.createTextBox();
  textBox.setName('mytextboxname').setId('mytextbox');
  var button = app.createButton('Start');
  panel.add(textBox);
  panel.add(button);
  // in this point will deal with ServerClickHandler to
  // execute respond_to_Start_button
  var clickHandler = app.createServerClickHandler("respond_to_Start_button");
  button.addClickHandler(clickHandler);
  clickHandler.addCallbackElement(panel);
  //finish part of script using respond_to_Start_button
  app.add(panel);
  var doc = SpreadsheetApp.getActive();
  doc.show(app);  
}

function respond_to_Start_button(e) {
  var app =UiApp.getActiveApplication();
  var textBoxValue = e.parameter.mytextboxname;
  var sheet = SpreadsheetApp.getActiveSheet();
  var lastRow = sheet.getLastRow()+1;
  var lastCell = sheet.getRange("A"+lastRow);
  lastCell.setValue(textBoxValue);
  return app.close();
}

function myDialog() {

var app = UiApp.createApplication();

app.setTitle("my dialog script");

var panel = app.createVerticalPanel();

var textBox = app.createTextBox();

textBox.setName('mytextboxname').setId('mytextbox');

var button = app.createButton('Start');

panel.add(textBox);

panel.add(button);

// in this point will deal with ServerClickHandler to

// execute respond_to_Start_button

var clickHandler = app.createServerClickHandler("respond_to_Start_button");

button.addClickHandler(clickHandler);

clickHandler.addCallbackElement(panel);

//finish part of script using respond_to_Start_button

app.add(panel);

var doc = SpreadsheetApp.getActive();

doc.show(app);

}

function respond_to_Start_button(e) {

var app =UiApp.getActiveApplication();

var textBoxValue = e.parameter.mytextboxname;

var sheet = SpreadsheetApp.getActiveSheet();

var lastRow = sheet.getLastRow()+1;

var lastCell = sheet.getRange("A"+lastRow);

lastCell.setValue(textBoxValue);

return app.close();

}

Leave a Reply Cancel reply