I have already looked at this and I am still stuck trying to find a solution.
I'm trying to create a UI flow in a Google Sheets sidebar application. Right now the only way for me to load in new HTML into the sidebar is to regenerate the sidebar entirely with this code:
function getNextPage() {
var htmlOutput = HtmlService
.createHtmlOutputFromFile('page')
.setTitle('page');
SpreadsheetApp.getUi().showSidebar(htmlOutput);
}
How do I get my sidebar to load in a new HTML page without loading a new sidebar entirely?
Related
I'm writing a Chrome userscript to open a new tab, then click on some DOM elements. But how can I access the DOM of the new tab?
/* background script */
chrome.browserAction.onClicked.addListener(() => {
chrome.tabs.create({"url": MY_URL, (tab) => {
// What ought I to do?
});
});
You will need to have at least one content script file loaded in your tab (with the right permissions to allow the content script to be loaded).
In the content script, you will have to leverage the Messaging API to communicate with the background page.
If your logic is simple enough, you could even run all logic directly inside content script, as they have access to be same set of chrome API as the background page.
I have a SideMenu page fragment in my app. On each and every page, I have a copy of this page fragment.
My intention was to create a SideMenu with openable SubMenus (only one sub menu could be open at a time), but I could not get it done to make the app "remember" the state of the SideMenu( like which SubMenu should be open, and which ones shouldn't), because on each site there is a different widget, so when in my code ( in my onClick events) I refer to the widget, I am not handling "a global SideMenu" but rather a specific copy of it, unique to that page.
Sadly, this took several hours of debugging to realize, I am defeated.
Is there anyway to place a page fragment on a page, so I can handle that widget on its own, not just it's copies?
Thanks in advance, I can try to specify more the question if it's needed.
I agree with #MarkusMalessa. You need to invoke the widget on every page and then apply whatever change on it. I am doing the samething on a project in which I intend to shrink and expand the sideMenu. To give you an idea, evertime I click a button on the side menu responsible for the logic, this is the code that's invoked:
var pages = app.pages._values;
pages.forEach(function(page){
var sideMenu = page.descendants.sideMenu1;
if(sideMenu){
if(widget.text === "chevron_right"){
sideMenu.getElement().style.width = "300px";
} else {
sideMenu.getElement().style.width = "60px";
}
}
});
That way every sideMenu widget inside each page that has it receive the same changes.
I'm inserting an Apps Script Html Service gadget into a google site. Is there some way to make the site page height and script container height dynamic to avoid scroll bars on the inserted gadget?
If it was possible, it would be in the:
Apps Script Sites Service
But I don't see any method for adding or editing a Gadget.
The only way I'm guessing that this might be possible, is if you got the HTML out of the current page:
var site = SitesApp.getSite("example.com", "mysite");
var page = site.getChildren()[0];
Logger.log(page.getHtmlContent());
var pageHTML = page.getHtmlContent();
edited the HTML to change in code with string functions,
var stringPageHTML = page.getHtmlContent();
//Find the HTML string you want to change, and change
//it with JavaScript string functions
var newHTML = "New HTML";
Delete the page:
page.deletePage();
Add a new page:
page.createWebPage(title, name, newHTML)
Last I checked, the gadget iframe height / width had to be about 50 pixels larger than the web app for no scroll bars to appear. When inserting the web app into the gadget it asks you for height in fixed pixels not a percentage. So I think getting the Sites page to be fully responsive is out the question.
is it possible to add simple button with onclick event to a page with chrome extension?
for instance if I am looking at
google.com
var google = document.getElementById("main");
var button = document.createElement("button");
var text = document.createTextNode("test");
button.appendChild(text);
google.appendChild(button);
I see my button in it?
You can use that code in a content script set to run on specific webpages.
Content scripts are JavaScript files that run in the context of web
pages. By using the standard Document Object Model (DOM), they can
read details of the web pages the browser visits, or make changes to
them.
I've create a google apps script chart which looks fine when I run publish > deploy > Test web app for your latest code.
However, once it's inserted as script gadget on a page of a google site, I can't modify its horizontal alignment:
clicking the left/center/right icon to modify alignment of the script gadget while editing the page in google site does nothing
I've tried deploying the app as UiApp.createApplication() as-is and then within a horizontal panel with various settings of HorizontalAlignment: nothing changes.
Creating charts with google apps script is easy enough, but aligning the results on a google page is frustrating.
uiApp = UiApp.createApplication().setTitle('TheTitle').add( chart );
var hpanel = uiApp.createHorizontalPanel()
hpanel.add(chart).setHorizontalAlignment(UiApp.HorizontalAlignment.LEFT)
uiApp.add(hpanel);
return uiApp;
Try changing the width of the hpanel to like var hpanel = uiApp.createHorizontalPanel().setWidth(800) and you may notice the alignment change then.