Apps脚本对话框中的CSS [英] CSS in Apps Script dialog box

问题描述

我不是网络开发人员，过去只使用过一次CSS。使用CSS的过程是什么？

  var pointsSheet = SpreadsheetApp.openById（'1o8_f063j1jYZjFEnI_P7uAztpnEAvQ6mc3Z1_Owa69Y'）; 
 
 //创建并显示带有标签和密码文本框的应用程序
函数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（‘提交’）; 
 
 var SubmitHandler = app.createServerClickHandler（’getResults’）; 
 SubmitHandler.addCallbackElement（mygrid）; 
 mybutton.addClickHandler（submitHandler）; 
 
 var mypanel = app.createVerticalPanel（）; 
 mypanel.add（mygrid）; 
 mypanel.add（mybutton）; 
 app.add（mypanel）; 
 
退货应用程序； //取消部署应用程序
时的注释
 
 //根据用户输入的密码获取数据并输出其信息
函数getResults（eventInfo）{
 var app = UiApp.getActiveApplication（）; 
 var password = eventInfo.parameter.text; 
 
 var passwordCheckRange = pointsSheet.getRange（ B34：C34）。getValues（）; 
 
 if（passwordCheckRange == null）{
 return app; 
} 
 
变量名； 
 var studentFound = false; 
 for（var i = 0; i< passwordCheckRange.length; i ++）{//获取学生的姓名
 if（passwordCheckRange [i] [1] ==密码）{
名称= passwordCheckRange [i] [0]; 
 studentFound = true; 
休息时间； 
} 
} 
 
 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]; //获取学生的行（从B？到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）; 
 
退货应用程序； 
} 
  

解决方案

编辑：此答案适用于现在已弃用的UIApp服务已于2014年弃用。

我要做的是

1. 在同一项目中，我创建另一个脚本文件并将其命名为CSS.gs
   

   
   



2. 我的CSS.gs将是

   
   

   var css = {}；
   css.Labels = {fontFamily： Verdana，fontSize： 12px，宽度： 100，marginTop： 5}；
   css.Inputs = {fontFamily： Verdana，fontSize： 12px，宽度： 150}；
   css.TextArea = {fontFamily：‘Verdana’，fontSize：‘12px’，宽度：‘900’，高度：‘50’}；
   css.PutBorder = {borderStyle：'solid'};

   
   



3. 然后我将使用将这些样式应用于应用程序。 setStyleAttributes（）

   
   

   例如:: app.createLabel（'Password：'）。setStyleAttributes（css.Inputs）

   
   

有setStyleAttribute和setStyleAttribute' s '。请不要感到困惑。
GS中并非所有css属性都受支持。您可以在此处找到列表。

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;
}

解决方案

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.

这篇关于Apps脚本对话框中的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！