showModalDialog from Spreadsheet not beautiful!

[kle...@ritenourschools.org]

I am a teacher and have cobbled together a game in a Google spreadsheet with the help of many internet searches. To play in my online classroom, the teacher clicks a menu item to have a random question pulled from a spreadsheet tab and displayed with showModalDialog.  I have posted image and code here: https://stackoverflow.com/questions/64722895/fill-gas-modaldialog-box-with-html-no-white-alternative  The problems are:

-  questions come in various sizes but are all aligned to the top of the Dialog

 - a border only displays on the top and left

 - dialog has an ugly white box with the close X in the top corner even when I have a close button the panel

 - if the question is too long I get sliders which is awful in an online class situation

I would like a way to display a pretty html? panel with the question centered and maybe an attractive background, close button, no white stuff. I am willing to learn new software but the only thing I have found is showModalDialog.

[Alan Wells]

You can't get rid of the white space around the edges of a dialog box.

If you want to stay with Google products and want an alternative, you'd need to use an Apps Script Web App for your app.

You could have the user use the link for the Web App rather than the link to the Sheet.

Do they need to see the Sheet?  If they must see the Sheet, then you could have the Sheet open in one browser tab

and the Web App open in another browser tab.  If that's not acceptable, then you'd need to embed the Sheet into the Web App maybe.

You could still use the spreadsheet for the data source of the random questions.

I looked at your Stack Overflow question.

I don't use HTML design tools, so I don't know what's out there, but there are probably some that could help you.

The problem with using something that does the work for you, is that you don't understand the HTML and CSS,

then you're creating something that you don't understand.

Then it can be very difficult to make even the slightest change.

There are CSS frameworks that you can use to help you style the HTML.  Which one you want to use is personal preference.

But, learning how to use the framework and setting it up to work with Apps Script can be more work than it's worth depending upon how much time you can afford to invest in this.

This is the documentation for a Web App.

https://developers.google.com/apps-script/guides/web

You need to use doGet() you'll never use doPost() to display the Web App.

I'd be shocked if there isn't someone who has already designed something like you need.

Hopefully someone will see this and have something for you.

[Clark Lind]

What if instead of having the code inside sheets, you did it inside Slides? Then you could still pull the question data from the sheet, but instead, you either update text on a slide, create a new slide, or whatever. Slides is better at presenting information.  

Just a thought for consideration.

On Thursday, November 12, 2020 at 7:42:25 PM UTC-5 kle...@ritenourschools.org wrote:

[Lissa Klein]

Thanks. I am a very olf Fortran and Cobol program. I have hand coded html and played with CSS. I am still trying to figure out how much javascript can be used with Google App Scripts. I tried to learn Java when I was in my 60s but did not get all the layers and layers of stuff to do simple things. I have appreciated your help multiple times.

--
You received this message because you are subscribed to a topic in the Google Groups "Google Apps Script Community" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-apps-script-community/cbEEtps5ESk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-apps-script-c...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/258b5aa7-d515-428c-a533-401e07d4062bn%40googlegroups.com.

--

L.Klein

CONFIDENTIALITY NOTICE: Any information contained in or attached to this message is intended solely for the use of the intended recipient(s). Any review, retransmission, dissemination of, or taking of any action in reliance upon, this communication by persons other than the intended recipient(s) is prohibited.  If you are not the intended recipient or a person responsible for delivering this message to the intended recipient(s), reply to sender to inform us that you have received this message in error and destroy all copies of the original message. Please do not copy, distribute or use this email or the information contained in it for any purpose without permission of the sender.

[Lissa Klein]

I don't suppose Spreadsheet behavior can be included in Slides. I have been using them for presentations, embedded videos, audio, links, PDFs as background with text boxes on top to allow data entry. That is the extent of Slides tricks I have learned.  Here is what the Connect Four Spreadsheet looks like. It is an essential part of the game. The question just opens when the teacher cues it up and the teacher closes it when the question has been answered or not and the teacher drops the dot in the location the student chooses. Competition is useful in education.

Other teachers are SELLING solutions. I do not want to do that and I have no budget to buy a solution. I would like to make things available for free to other teachers.

--

You received this message because you are subscribed to a topic in the Google Groups "Google Apps Script Community" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-apps-script-community/cbEEtps5ESk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-apps-script-c...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/17ac8a58-0d89-412c-944e-123962979012n%40googlegroups.com.

[Darren D'Mello]

Could you please share the spreadsheet?

You received this message because you are subscribed to the Google Groups "Google Apps Script Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-apps-script-c...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/CAKyj8xDPJkcTmUtM%2BGpB65wj37U2KN_O--D6p2e8MuyxU5ns0A%40mail.gmail.com.

[Lissa Klein]

Looks like slides is also restricted to showModalDialog!  I am having trouble setting up the permissions for the Slide to access the Spreadsheet. 

{
  "timeZone": "America/Mexico_City",
  "dependencies": {
  },
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "oauthScopes": [
    "https://www.googleapis.com/auth/spreadsheets.readonly"
  ]
}

Exception: You do not have permission to call SpreadsheetApp.openByUrl. Required permissions: https://www.googleapis.com/auth/spreadsheets 

//@NotOnlyCurrentDoc
function onInstall(){
  onOpen();
}

function globalVariables(){
  var variables = {
                   // this is the Connect Four Game
                   sheetId: '1fmZCittj4ksstmhh8_t0O0csj8IDdwi9ohDDL5ZE7VA',  
                   sheetUrl: 'https://docs.google.com/spreadsheets/d/1fmZCittj4ksstmhh8_t0O0csj8IDdwi9ohDDL5ZE7VA/edit?usp=sharing'
                  };
  return variables; //return a dictionary of keys and values
}

function onOpen() {
  var variables = globalVariables();   //load the Global variables
  try  {
      var ss = SpreadsheetApp.openByUrl(variables.sheetUrl);
//    var ss = SpreadsheetApp.openById(variables.sheetId)
    if (!ss) {
      SlidesApp.getUi().alert("Spreadsheet not found!");
      return;
    }  
  }    catch(e)    {
      SlidesApp.getUi().alert(e);
      return;

  }

etc. 

On Thu, Nov 12, 2020 at 8:07 PM Clark Lind <cwl...@gmail.com> wrote:

--

You received this message because you are subscribed to a topic in the Google Groups "Google Apps Script Community" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-apps-script-community/cbEEtps5ESk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-apps-script-c...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/17ac8a58-0d89-412c-944e-123962979012n%40googlegroups.com.

[Lissa Klein]

I can share the spreadsheet but I don't think that is part of the problem.  Clark Lind suggested using Slides instead of Spreadsheet but Slides is also limited to showModalDialog to display html. In looking into this I started working on a game in a slide. New problem: Slide cannot access Spreadsheet.

The first sheet in the spreadsheet is the game board. The 2nd, 3rd, etc. sheets each have a single column containing a question. I randomize the questions when a game is initialized. I use cache to hold the row / question last presented.

{
  "timeZone": "America/Mexico_City",
  "dependencies": {
  },
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "oauthScopes": [
    "https://www.googleapis.com/auth/spreadsheets.readonly"
  ]
}

Exception: You do not have permission to call SpreadsheetApp.openByUrl. Required permissions: https://www.googleapis.com/auth/spreadsheets  

//@NotOnlyCurrentDoc
function onInstall(){
  onOpen();
}

function globalVariables(){
  var variables = {
                   // this is the Connect Four Game
                   sheetId: '1fmZCittj4ksstmhh8_t0O0csj8IDdwi9ohDDL5ZE7VA',  
                   sheetUrl: 'https://docs.google.com/spreadsheets/d/1fmZCittj4ksstmhh8_t0O0csj8IDdwi9ohDDL5ZE7VA/edit?usp=sharing'
                  };
  return variables; //return a dictionary of keys and values
}

function onOpen() {
  var variables = globalVariables();   //load the Global variables
  try  {
      var ss = SpreadsheetApp.openByUrl(variables.sheetUrl);

//    var ss = SpreadsheetApp.openById(variables.sheetId)   // tried both ID and URL

    if (!ss) {
      SlidesApp.getUi().alert("Spreadsheet not found!");
      return;
    }  
  }    catch(e)    {
      SlidesApp.getUi().alert(e);
      return;
  }

. . . rest of code

I found others with similar problems which is why I added " //@NotOnlyCurrentDoc". I also went to some security place and deleted all the permissions hoping I would get a dialog to allow but access but it did not happen.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/CAHeo4XjEowDB3eHWYjO_vbOax111LrJs%2BLOQj%3D4ChnF%3DXA34ng%40mail.gmail.com.

--

L.Klein

[Clark Lind]

Lissa,

Now that I see what you are doing, forget using slides. What I meant was using a slide for your modal dialog, not your whole project. 

If you want to share, I'm sure we can find a way to make it work. I was playing with it earlier and had some suggestions. 
If you replace /edit with /copy in the URL, it will force us to make a copy of your file. :)

To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/CAKyj8xB%2BjVzgkaPicKdKAfLOQL%3D1KA5gNyXawH0sBK%2BfDk12tQ%40mail.gmail.com.

[Lissa Klein]

I have succeeded in making the showModalDialog as 'pretty' as possible by adding a background color, border, and button.  I have a second game in slides (tic-tac-toe) which uses the same question set from the spreadsheet and displays the same modal dialog panel. Someday I will learn to write real code. I would like to have games where the students don't see all the toolbars. Thank you for you kind offer.

L.Klein

To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/CAHgJr-3f%3D-DOsUVeN51RxTgiB6CCqqZm3G3iDnJOrLcmXDpifA%40mail.gmail.com.