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?
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();
}
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;
}
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.
I have a scroll panel but I cann't put the visible title in it:
var app = UiApp.createApplication();
var panel = app.createVerticalPanel()
.setId('panel')
.setTitle("This is my Title");
panel.add(app.createHidden('checkbox_total', arrayList.length));
// add 1 checkbox + 1 hidden field per item
for(var i = 0; i < arrayList.length; i++){
var checkbox = app.createCheckBox().setName('checkbox_isChecked_'+i).setText(arrayList[i][0]);
panel.add(checkbox);
}
var handler = app.createServerHandler('submit').addCallbackElement(panel);
panel.add(app.createButton('Submit', handler));
var scroll = app.createScrollPanel().setPixelSize(500, 300).setTitle("My second try to put a title");
scroll.add(panel);
app.add(scroll);
mydoc.show(app);
What is going wrong with my titles?
It seems you are making a confusion on what 'title' means in UiApp... They are actually small popups that appear when your mouse hovers the widget, see illustration below.
If you intend to get a title shown in your Ui (in the common sense of 'title') use Label or HTML widgets.
One exception though since you are using uiApp in a spreadsheet or a document, the title of the app itself is shown as a title. See example below :
var app = UiApp.createApplication().setTitle('app title');
The label must be putted in UiApp object, this way:
var app = UiApp.createApplication();
var label = app.createLabel("This is my label, ie, the user visible title").setStyleAttribute("fontSize", 18);
app.add(label);
*I have a Google Document with a string like "text {logo} text"
How do place an image where {logo} is?
So far I tried:
var logoElement = s.findText("{logo}").getElement();
logoElement.getParent().insertInlineImage(0,logoBlob);
s.replaceText("{logo}", "");
But this inserts the image before the found paragraph (or with 1: after). How do I place it inside the paragraph at the exact location?
I hope will be helpful, The following code is fine to me.
function insertImage(doc) {
// Retrieve an image from the web.
var resp = UrlFetchApp.fetch("http://www.google.com/intl/en_com/images/srpr/logo2w.png");
var image = resp.getBlob();
var body = doc.getBody();
var oImg = body.findText("<<Logo1>>").getElement().getParent().asParagraph();
oImg.clear();
oImg = oImg.appendInlineImage(image);
oImg.setWidth(100);
oImg.setHeight(100);
}
Thanks to the comment from Serge and the original post of the link for pointing me in the right direction.
Here's what I have now:
var s = d.getHeader();
var logoResult = s.findText("{logo}"); // search result
var logoElement = logoResult.getElement(); // the paragraph that contains the placeholder
var text = logoElement.getText();
var placeholderStart = logoResult.getStartOffset(); // character position start placeholder
var placeholderEnd = logoResult.getEndOffsetInclusive(); // char. position end placeholder
var parent = logoElement.getParent();
var parPosition = parent.getChildIndex(logoElement);
// add new paragraph after the found paragraph, with text preceding the placeholder
var beforeAndLogo = s.insertParagraph(parPosition+2, text.substring(0, placeholderStart));
var logo = beforeAndLogo.appendInlineImage(logoBlob); // append the logo to that new paragraph
// add new paragraph after the new logo paragraph, containing the text after the placeholder
var afterLogo = s.insertParagraph(parPosition+3, text.substring(placeholderEnd+1));
afterLogo.merge(); // merge these two paragraphs
// finally remove the original paragraph
parent.removeFromParent(); // remove the original paragraph
It is not complete, I should also copy all the attributes.
More importantly, it does not copy the tab settings (e.g. center tab). Have not found a way to set tab positions.
I tried a simpler version based on your answer that keeps the format of the original paragraph...
Give it a try, it's not "foolproof" but it works in my test and is (I think) an interresting trial ;-)
code here :
function test(){
placeImage('{logo}','0B3qSFd3iikE3SkFXc3BYQmlZY1U');
//This is my page and I’d like to have a {logo} on it right here
}
function placeImage(placeHolder,imageId) {
var logoBlob = DocsList.getFileById(imageId).getBlob();
var d = DocumentApp.getActiveDocument()
var s = d.getHeader();
var logoResult = s.findText(placeHolder);
var placeholderStart = logoResult.getStartOffset();
var par = s.getChild(0).asParagraph();
var parcopy = par.copy();
var parLen = par.editAsText().getText().length-1;
Logger.log('placeholderStart = '+placeholderStart+' parLen = '+parLen)
par.editAsText().deleteText(placeholderStart, parLen);
parcopy.editAsText().deleteText(0, placeholderStart+placeHolder.length);
var img = s.getChild(0).appendInlineImage(logoBlob);
s.appendParagraph(parcopy);
parcopy.merge();
}
I've seen several sites that when you copy and paste text from their website, it turns out something like this:
<text here> - From <website name here>
And I am wondering how to do that. I have tried using the alt parameter and others. Thanks in advance.
This is not so simple as it would seem to be. I've done this before so I will show you how to do it using jquery and the rangy selection library (https://code.google.com/p/rangy/)
Basically you do this:
take the current selection
copy it in some invisible element
add your text on that element
select the invisible element
restore the selection state with a setTimeout
Here's a fiddle and the code:
http://jsfiddle.net/P4yfw/
$("body").on("copy", function() {
var selection = rangy.getSelection();
var ranges = selection.getAllRanges();
var container = $("<div>");
for (var i = 0; i < ranges.length; i++)
container.append(ranges[i].cloneContents());
container.append(" - whatever text you want to append");
var wnd = $(window);
var scrollTop = wnd.scrollTop();
var scrollLeft = wnd.scrollLeft();
var offscreen = $("<div>").css({
position: "absolute",
left: "-1000px",
width: "1px",
height: "1px",
overflow: "hidden"
}).appendTo("body");
offscreen.css({ top: scrollTop });
offscreen.append(container);
selection.selectAllChildren(container[0]);
event.stopPropagation();
setTimeout(function() {
selection.setRanges(ranges);
offscreen.detach(); // offscreen.remove() will remove events attached to the original elements (not cloned elements) on IE8
wnd.scrollTop(scrollTop);
wnd.scrollLeft(scrollLeft);
}, 0);
});
In my javascript am trying to
1) make a new li tag
2) make a new a (anchor tag)
3) append the anchor tag to li tag
4) set the text for anchor tag (so that someone can click on it)
5) set onClick event function for anchor tag (to be called when click is made in 4))
6) append the li tag to a div
And here is my code :
var newLi = document.createElement('li');
var newA = document.createElement('a');
newLi.appendChild(newA);
//newA.href='#';
newA.innerText = "Go here";
newA.onClick = function(){
// do something here
}
document.getElementById('map_canvas').appendChild(newLi);
Obviusly it is not working and all I see is Just the bullets(as below) on my page with no text and clickable text (for anchor tags) <li> <li>
just use innerHTML instead of innerText
I'd suggest using .innerHTML in place of .innerText, and ideally creating a function:
function listLinks(listId, url,text){
var linkList;
if (document.getElementById(listId)) {
linkList = document.getElementById(listId);
}
else {
linkList = document.createElement('ul');
document.body.appendChild(linkList);
}
var newA = document.createElement('a');
newA.innerHTML = text;
newA.href = url;
newA.onclick = function(){
this.style.color = '#f00'; // or whatever...
return false;
};
var newLi = document.createElement('li');
newLi.appendChild(newA);
linkList.appendChild(newLi);
}
// call as:
listLinks('links','http://google.com/','Google');
JS Fiddle demo.