How can I launch a website from a button

Question

I know how to use the createAnchor to place a link in a panel, however I would like to launch a link from a button. Is this possible, if so how?

Answer 1

I have answered a similar post with a workaround that works nicely although it is, I admit, a bit complex in regard to what it does...

Here is a test app

and the code reproduced from the other post is below : I used an invisible anchor superimposed to the image but it could of course be anything else... a button or whatever you want.

function doGet(){
  var app = UiApp.createApplication().setStyleAttribute("background", "#CCCCFF").setTitle('Anchor Test')
  var top = '100PX';// define dimensions and position
  var left = '100PX';
  var width = '80PX';
  var height = '80PX';
  var mainPanel = app.createVerticalPanel();

  var customAnchor = app.createHorizontalPanel().setId('usethisId')
  addStyle(customAnchor,top,left,width,height,'1','1')

  var image = app.createImage("https://dl.dropbox.com/u/211279/Time-change-clock_animated_TR80.gif")
  addStyle(image,top,left,width,height,'1','1')

  var realAnchor = app.createAnchor('This is the Anchor', 'https://sites.google.com/site/appsscriptexperiments/home')  
  addStyle(realAnchor,top,left,width,height,'2','0')


  customAnchor.add(realAnchor);
  customAnchor.add(image)
  mainPanel.add(customAnchor);
  app.add(mainPanel);
  return app;
}

function addStyle(widget,top,left,width,height,z,visibility){
widget.setStyleAttributes( 
    {'position': 'fixed', 
     'top' : top,
     'left' : left,
     'width' : width, 
     'height':height,
     'opacity' : visibility,  
     'zIndex' : z});
   }  

---

EDIT : I forgot to mention this post with a button example... exactly what you wanted : How do I open a web browser using google apps script?

---

EDIT 2

Following Software tester answer, here is a compact version that one can place in a grid or anywhere else... just place the widget called 'container'.

To illustrate I placed it in a grid in the example below/

link to test

code :

function doGet(){ 
  var app = UiApp.createApplication().setTitle("Image Anchor");
  var picButton = 'https://dl.dropboxusercontent.com/u/211279/ProgressSpinner.gif'; 
  var img = app.createImage(picButton).setPixelSize(25,25);
  var grid = app.createGrid(5,2);
  for(n=0;n<5;n++){
    grid.setText(n,0,'some text').setBorderWidth(1);
  }
  var anchor = app.createAnchor(" -  ", "https://sites.google.com/site/appsscriptexperiments/").setStyleAttribute('opacity','0').setPixelSize(25,25);
  var container = app.createAbsolutePanel().setPixelSize(25,25);
  container.add(img,0,0).add(anchor,0,0);
  grid.setWidget(4,1,container);
  app.add(grid);  
  return app;
}

Answer 2

After some trail and error I found an easier way of achieving the goal. I just create an image of the button showing my desired text and use thse setAttribute method of the anchor. Unfortunally I stll require an AbsolutePanel.

function doGet()
{ 
  // Problem with Google Apps :
  //    Not possible to click a Button and show a site
  //    Solutions found on StackOverflow mostly use :
  //       a) var panel  = createAbsolutePanel               --> Necessary to create an Absolute Panel
  //       b) var image  = createImage                       --> The image to be shown 
  //       c) var anchor = createAnchor                      --> Anchor making it possible to activate a url
  //       d) position the anchor on top of the image
  //       e) make anchor and image of same size
  //       f) make anchor invisible (by zIndex, opacity or visibility)
  //    
  //    One of the people showing how this works is http://stackoverflow.com/users/1368381/serge-insas who's
  //    efforts inspired me to have a look at other possibilities. (thanks !)
  //    
  //    Result     : next step in making it easy to overcome a limitation of GAS --> no createImage required anymore
  //    How        : using setAttribute('backgroundImage', Url)  method of anchor
  //    Limitation : still required to create an Absolute panel instead of a Vertical panel --> who's next to improve ??
  //
  //    Author     : SoftwareTester, may 13th, 2014

   var app = UiApp.createApplication().setTitle("Image Anchor");
   var picButton = 'https://drive.google.com/uc?id=0BxjtiwHnjnkrTVJiR1g2SlZTLVE'; // Can on be accessed be a few people
   var widthButton = 128;
   var heightButton = 24;
   var anchor = app.createAnchor("", "http://www.opasittardgeleen.nl")
                  .setHeight(heightButton).setWidth(widthButton)            
//                  .setHeight("150").setWidth("128")                         // Nice effect !!
//                  .setHeight("150").setWidth("512")                         // Even more 
                  .setStyleAttribute('backgroundImage', 'url(' + picButton + ')');

   var panel = app.createAbsolutePanel().setWidth('50%').setHeight('50%');
   panel.add(anchor,100,50);         // I would like to avoid positioning like this and just add the anchor to a Grid or VerticalPanel
   app.add(panel);  
   return app.close();
}

Answer 3

The answer EDIT 2 of Serge Insas provides extra flexibility using a grid.

Improving the world little by little by learning and using each others good ideas, also holds for software of course. Thanks again Serge!

I noticed a few differences that might or might not be of interest in certain situations.

I always try to specify constants (like width and height) and minimize using similar code like .setPixelSize(width, height) making it easier 'not to forget something while changing'. That's why I prefer to avoid creating a separate image object.

Serge Insas uses .setStyleAttribute('opacity','0'); while I'm using .setStyleAttribute('backgroundImage', url); . I don't know what are the pro's and con's of both possibilities.

Below is the generalized code

function doGet()
{ // Generalized version using : image + opacity + container
  var app       = UiApp.createApplication().setTitle("Image Anchor");
  var width     = 25;
  var height    = 25;
  var urlImage  = 'https://dl.dropboxusercontent.com/u/211279/ProgressSpinner.gif';
  var urlAnchor = "https://sites.google.com/site/appsscriptexperiments/";

  var grid      = createImageAnchor(urlImage, urlAnchor, width, height);

  app.add(grid);
  return app;
} 

and the function createImageAnchor can be

function createImageAnchor(urlImage, urlAnchor, width, height)
{ // Using backgroundImage
   var app    = UiApp.getActiveApplication();

   var anchor = app.createAnchor("", urlAnchor).setPixelSize(width, height)
                   .setStyleAttribute('backgroundImage', 'url(' + urlImage + ')');

   var panel  = app.createAbsolutePanel().setPixelSize(width, height).add(anchor, 0, 0);
   var grid   = app.createGrid(1, 1).setWidget(0, 0, panel); // Create grid and put anchor in it

   return grid;   
}  

or

function createImageAnchor(urlImage, urlAnchor, width, height)
{ // Using opacity
   var         = UiApp.getActiveApplication();

   var image   = app.createImage(urlImage).setPixelSize(width, height);
   var anchor  = app.createAnchor("", urlAnchor) .setPixelSize(width, height)
                    .setStyleAttribute('opacity','0');

   var panel   = app.createAbsolutePanel().setPixelSize(width, height)
                    .add(image, 0, 0).add(anchor, 0, 0);      // Same position for image and anchor
   var grid    = app.createGrid(1, 1).setWidget(0, 0, panel); // Create grid and put image + anchor in it

   return grid;   
}  

Using createImageAnchor makes it easier to use this 'combined object' anywhere in code, especially after adding it into a library.

As I'm new to GAS (started may 7th after 5 years of inactivity) I know I need to learn a lot and would like to know what the pro's and con's of different methods are.