CSS с Google App Script

Question

Я довольно новичок в написании скриптов Google App. Сценарий, над которым я сейчас работаю, просто извлекает данные из листа Google. Это довольно уродливо, и мне сказали, что я могу сделать это намного лучше, используя CSS. Я читал, что ваш CSS-файл может быть размещен на Google Drive и доступен оттуда через скрипт. Я не веб-разработчик, и я использовал CSS только один раз в прошлом. Каков процесс всего этого? Это вообще возможно? Мой общий вопрос будет "как мне начать этот процесс?" Мой скрипт ниже на всякий случай, если вы хотите его увидеть:

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

Что я делаю,
1. В том же проекте я создаю другой файл сценария и называю его CSS.gs
2. Мои CSS.gs будут иметь следующие строки:

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. И я буду применять эти стили к приложению с помощью.setStyleAttributes()

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

Есть setStyleAttribute и setStyleAttribute 's'. Пожалуйста, не запутайтесь. Не все атрибуты CSS поддерживаются в GS. Вы можете узнать список поддерживаемых стилей здесь.

Answer 2

Вы можете поместить свой CSS в HTML-файл скрипта приложения, а затем включить HTML-файл с CSS в свой основной HTML-файл. В HTML-файле скрипта приложения поместите свой CSS в <style> теги.

<style>

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

</style>

Затем в вашем основном HTML-файле поместите тег скриптлета:

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

В твоем главном .gs файл кода, вам нужна функция с именем include

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

Также посмотрите на этот вопрос о стекопереработке: скрипт приложения Google: разделение HTML и CSS