CSS in Apps Script dialog box

Question

I'm not a web developer and I've only used CSS once in the past. What is the process for using CSS? Is this even possible?

var pointsSheet = SpreadsheetApp.openById('1o8_f063j1jYZjFEnI_P7uAztpnEAvQ6mc3Z1_Owa69Y');

//creates and shows an app with a label and password text box
function doGet() {
  var app = UiApp.createApplication();

  var mygrid = app.createGrid(1, 2);
  mygrid.setWidget(0, 0, app.createLabel('Password:'));
  mygrid.setWidget(0, 1, app.createPasswordTextBox().setName("text"));

  var mybutton = app.createButton('Submit');

  var submitHandler = app.createServerClickHandler('getResults');
  submitHandler.addCallbackElement(mygrid);
  mybutton.addClickHandler(submitHandler);

  var mypanel = app.createVerticalPanel();
  mypanel.add(mygrid);
  mypanel.add(mybutton);
  app.add(mypanel);

  return app; //UNCOMMENT WHEN DEPLOYING APP
}

//obtains data based on password entered by user and outputs their info
function getResults(eventInfo) {
  var app = UiApp.getActiveApplication();
  var password = eventInfo.parameter.text;

  var passwordCheckRange = pointsSheet.getRange("B34:C34").getValues();

  if (passwordCheckRange == null) {
    return app;
  }

  var name;
  var studentFound = false;
  for(var i = 0; i < passwordCheckRange.length; i++) {//obtains the name of the student
    if(passwordCheckRange[i][1] == password) {
      name = passwordCheckRange[i][0];
      studentFound = true;
      break;
    }
  }

  var studentRecordRange = pointsSheet.getRange("B3:CZ29").getValues();
  var headingRange = pointsSheet.getRange("B1:CZ2").getValues();

  if (studentRecordRange == null) {
    return app;
  }

  var studentRecord;
  for(var i = 0; i < studentRecordRange.length; i++) {
    if(studentRecordRange[i][0] == name)
      studentRecord = studentRecordRange[i]; //gets the row of the student (B? to AY?)
  }

  var stringRecord = "";
  for(var i = headingRange[1].length-1; i >= 7; i--) {
    if ((studentRecord[i] == "" || studentRecord[i] == "STOP" || studentRecord[i] == "ALLOW") && headingRange[0][i] != "")
      stringRecord += headingRange[1][i] + ": " + headingRange[0][i] + "XP" + "<br>";
  }

  var mygrid = app.createGrid(2, 1);
  mygrid.setWidget(0, 0, app.createLabel('INCOMPLETE CHALLENGES'));
  mygrid.setWidget(1, 0, app.createHTML(stringRecord));

  var mypanel = app.createVerticalPanel();
  mypanel.add(mygrid);
  app.add(mypanel);

  return app;
}

Answer 1

EDIT: This answer is for the now deprecated UIApp service which was deprecated in the year 2014.

What I do is,

1. In the same project I create another script file and name it as CSS.gs
   

2. My CSS.gs will be having following lines,

   var css={}; css.Labels = { fontFamily:'Verdana', fontSize:'12px', width: '100', marginTop: '5'}; css.Inputs = { fontFamily:'Verdana', fontSize:'12px', width: '150'}; css.TextArea = { fontFamily:'Verdana', fontSize:'12px', width: '900', height: '50'}; css.PutBorder = {borderStyle: 'solid'};

3. And I will apply these styles on to app by using .setStyleAttributes()

   eg::app.createLabel('Password:').setStyleAttributes(css.Inputs)

There is setStyleAttribute and setStyleAttribute's'. Please dont get confused. Not all css attributes are supported in GS. You can find out the list of supported styles here.

Answer 2

"Templated HTML" can be used to include a separate CSS file.

The CSS can be put into a separate Apps Script HTML file. CSS is technically just a <style> tag in HTML. So, putting your CSS into an HTML file will display it in the code editor correctly. The HTML File with the CSS can be included in your main HTML file. In the Apps Script HTML file, put your CSS inside of <style> tags.

<style>

.bigHeader {
  color:#808000;
  text-align:center;
  font-family:"Times New Roman";
  font-size:50px;
  background-color:#66CDAA;
  margin-left:1%;
  }

</style>

Then in your main HTML File, put in a scriptlet tag:

<?!= include('Name_Of_HTML_File_With_CSS'); ?>

In your main .gs code file, you need a function named include

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
};

Also see this stackoverflow question: Google app script : Separating HTML and CSS