How to change styling of modal dialogue in google apps script - google-apps-script

I want to change the position and background color of modal dialogue in google apps script for my addon
I have searched a lot but only found answers using UiApp which is now deprecated and no longer works. I found no answers for doing this using HtmlService.
Only available function in after createHtmlOutputFromFile('Index') are :
setWidth and
setHeight
which work perfectly but i need to change position of modal too.
Is there any way to do this at the moment?

Unfortunately, there is no way to change the position of the modal window. The sidebar dialog is also static. However, you can use CSS properties to control the look of everything inside the dialogs.
Here is a link to the best practices for developing add-ons: https://developers.google.com/apps-script/guides/html/best-practices

Related

Google Chrome extension - integrate with Google Calendar

How can a Chrome extension alter the Google Calendar event editing UI?
I see that, for example, the Moxtra extension has managed to inject UI including a button just below the location. According to their YouTube video they added a button to fill out the event description although when I installed Moxtra this no longer seems to work.
Stepping back from this a bit, it occurs to me that editing the Google Calendar page seems like something that could easily get messed up by future changes to Google Calendar. Perhaps it is better to edit the event description from the extension's own UI? If so, how can that be done?
Thanks.
It can be done with content scripts and modification of the DOM.
They probably check Event edit page for specific selectors and try to insert their own elements in the page, if they found it.
So, if UI of Google Calendar will change, extensions like Moxtra will be probably also broken.
You are right about the edit of the description - it's safer. But you still need to get a description field and change a content of it. There is no 100% safe way to do it and don't break on the change of UI.

Adding Button in Gmail for web users

I am trying to figure out how can I add a button to the Gmail compose window.
Please see the image below for better idea..
Using Google App Script I have achieved some functionality where we can create almost anything, but How can We create a button in Gmail?
Even if not compose window as shown in image above, I will like to learn how to add button at any place in Gmail.com's window using gadget or any other way.
Note: I have tried many things and ended up nowhere, The Sidebar is deprecated by google so please don't highlight that..
I will be glad if any working code to add button in Gmail available,
Thanks in advance

How to create a secondary slide-out in Google Doc add on side bar in Google Apps Script

I have a Google Doc add-on that utilizes the sidebar: no problem there. When one uses the Google research add-on, there is an secondary slide out from the sidebar that shows a preview of a search result (see picture below) when clicked. I am hoping to replicate this behaviour, but I see nothing about it in the api regarding size and limits. I tried having a tooltip pop up on my links in the sidebar, but they appear cut off or under the main Google Doc palette. I have tried a bunch of other Google Doc add-ons to see if any of them replicate this functionality, but they don't. Before I spend hours on this, I want to first ask is anyone know if this is specific permission for Google's sidebar only, or can developers replicate this functionality?
The Research Tool is a direct integration with Docs and Presentations, it's not a Google Apps Script add-on. The freedom to "slide out" within the document is not available to add-ons today.
As one alternative, you could use an accordion affect to collapse your "first page" and overlay the result page, still within the bounds of the sidebar.
A second alternative would be to use a non-modal window, where you'd have more freedom. (resizing there requires client-server exchanges, but is doable)

Is the modal dialog in google app script editable?

I'm displaying some html with the .showModalDialog function. I'd want to change some of the properties of this modal dialog, like removing the title and changing the padding, is there any way to do this?
There's some limited changes that can be made, such as setWidth() & setHeight(). There's no option to set padding or make advanced changes such as that.

Is there a way to change the size of the Google SaveToDrive button?

I'm using the Google SaveToDrive button on my webpage as shown here: https://developers.google.com/drive/savetodrive
However, the g-savetodrive button always shows up in a fixed size that does not match the rest of my UI/layout. Are there any parameters to it that we can change the size of the button?
I tried other possibilities that I saw in +1 and Google SignIn buttons also (like data-size, data-width, data-height), but none of them worked.
The short answer is: not easily.
The google api embeds the icon in an iframe, which means you'd have to do some fiddling with jquery to apply any style rules to the button.
see: How to apply CSS to iframe?
To make matters worse the img source is very small. Stretching it yields a very fuzzy image that I wouldn't recommend. At the very least you'll want to find a large drive image and use that instead.
I think your best bet is creating a custom button that emulates googles class and id tags. Hopefully you can reverse engineer the button click and hook your custom button up to the same functionality.