带有Google App脚本的CSS [英] CSS with Google App Script
问题描述
我对编写Google App脚本非常新颖。我现在正在处理的脚本只是从Google工作表中提取数据。这非常丑陋,我被告知可以通过使用CSS来使它更好。我读过您的CSS文件可以托管在Google云端硬盘上,并通过脚本从那里访问。我不是一个Web开发人员,过去我只用过一次CSS。这一切的过程是什么?这甚至有可能吗?我的整体问题是我如何开始这个过程?我的脚本低于以防万一你想看到它:
I'm pretty new to writing Google App Scripts. The script I'm working on right now is simply pulling data from a google sheet. It's pretty ugly and I was told I can make it much nicer by using CSS. I've read that your CSS file can be hosted on Google Drive and accessed from there through the script. I'm not a web developer and I've only used CSS once in the past. What is the process for all of this? Is this even possible? My overall question would be "how do I start this process?" My script is below just in case you want to see it:
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;
}
推荐答案
1.在同一个项目中,我创建另一个脚本文件并将其命名为CSS.gs
2.我的CSS.gs将具有以下行,
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> 3。我将通过使用.setStyleAttributes()将这些样式应用于应用程序。
3. And I will apply these styles on to app by using .setStyleAttributes()
eg::app.createLabel('Password:').setStyleAttributes(css.Inputs)
有setStyleAttribute和setStyleAttribute' s 。请不要混淆。
GS中不支持所有css属性。您可以在此处找到支持的样式列表。
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.
这篇关于带有Google App脚本的CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!