diff --git a/.claspignore b/.claspignore
index 866740f..82df346 100644
--- a/.claspignore
+++ b/.claspignore
@@ -1 +1 @@
-dist/main.js
\ No newline at end of file
+main.js
\ No newline at end of file
diff --git a/README.md b/README.md
index 3b11ee9..b57d182 100644
--- a/README.md
+++ b/README.md
@@ -19,7 +19,7 @@ _The included demo React app for Google Sheets shows insertion, deletion and sel
> cd React-Google-Apps-Script
> npm install
```
-2. Enable the Google Apps Script API for your account by visiting[(script.google.com/home/usersettings)](https://script.google.com/home/usersettings):
+2. Enable the Google Apps Script API for your account by visiting [script.google.com/home/usersettings](https://script.google.com/home/usersettings):
@@ -68,12 +68,12 @@ Modify the server-side and client-side source code in the `src` folder. [Add any
## The sample app
-Insert/activate/delete sheets through a simple HTML dialog, built with React. Access the dialog through the new menu item that appears. You may need to refresh the spreadsheet and approve the app's permissions the first time you use it.
+The included sample app allows inserting/activating/deleting sheets through a simple HTML dialog, built with React. Two versions of the same app are provided with different styling: the first version uses vanilla React, and the second uses the popular bootstrap library (in this case, it uses [`react-bootstrap`](https://react-bootstrap.github.io/)). Access the dialogs through the new menu item that appears. You may need to refresh the spreadsheet and approve the app's permissions the first time you use it.
## Features
- Includes popular `eslint` and `prettier` configs for clean, standardized code.
-- `import` CSS from another file:
+- Supports importing CSS from another file:
```js
import './styles.css';
```
@@ -89,15 +89,14 @@ Insert/activate/delete sheets through a simple HTML dialog, built with React. Ac
import server from '../server';
// We now have access to all our server functions, which return promises!
- const { addSheet } = server;
- addSheet(sheetTitle)
- .then(response => doSomething(response))
- .catch(handleError(err));
+ server.addSheet(sheetTitle)
+ .then(response => doSomething(response))
+ .catch(err => handleError(err));
- // Or we can use async/await:
+ // Or we can use async/await. This is the same thing as above:
async () => {
try {
- const response = await addSheet(sheetTitle);
+ const response = await server.addSheet(sheetTitle);
doSomething(response);
} catch (err) {
handleError(err)
@@ -122,7 +121,7 @@ To add new client-side libraries for your React app:
Longer explanation:
-Google Apps Script requires all HTML to be in a single file that is loaded into the dialog. Therefore, webpack has been configured to inline all generated client JS code into a single HTML file (in this case [main.html](./dist/main.html) and [about.html](./dist/about.html)). Inlining all code into a single file can result in large output files, which take longer to load, and can also sometimes cause the Google Apps Script editor to crash when you open it. So to reduce bundle size this project takes advantage of [dynamic-cdn-webpack-plugin](https://github.com/mastilver/dynamic-cdn-webpack-plugin) to automatically load popular libraries found in your app, such as `react` and `react-dom`, from a CDN. It doesn't know about all libraries (only [these](https://github.com/mastilver/module-to-cdn/blob/master/modules.json)), so if you've installed new packages, especially large packages, you should add a CDN url to the [webpack file](./webpack.config.js#L129) to reduce bundle size.
+Google Apps Script requires all HTML to be in a single file that is loaded into the dialog. Therefore, webpack has been configured to inline all generated client JS code into a single HTML file (in this case [main.html](./dist/main.html) and [about.html](./dist/about.html)). Inlining all code into a single file can result in large output files, which take longer to load, and can also sometimes cause the Google Apps Script editor to crash when you open it. So to reduce bundle size this project takes advantage of [dynamic-cdn-webpack-plugin](https://github.com/mastilver/dynamic-cdn-webpack-plugin) to automatically load popular libraries found in your app, such as `react` and `react-dom`, from a CDN. It doesn't know about all libraries (only [these](https://github.com/mastilver/module-to-cdn/blob/master/modules.json)), so if you've installed new packages, especially large packages, you should add a CDN url to the [webpack file](./webpack.config.js#L129) to reduce bundle size. You will need to know your package's global variable. See the examples provided, and also see [here](https://webpack.js.org/configuration/externals/#externals) for more info on how this works.
### Expose all public functions
Make sure to expose all public functions, including `onOpen` and any functions you are calling from the client. Example below shows assignment to `global` object:
diff --git a/dist/code.js b/dist/code.js
index ec11250..46d2867 100644
--- a/dist/code.js
+++ b/dist/code.js
@@ -2,6 +2,8 @@ function onOpen() {
}
function openDialog() {
}
+function openDialogBootstrap() {
+}
function openAboutSidebar() {
}
function getSheetsData() {
@@ -59,6 +61,29 @@ function setActiveSheet() {
return Object.prototype.hasOwnProperty.call(object, property);
}, __webpack_require__.p = "", __webpack_require__(__webpack_require__.s = 2);
}([ function(module, __webpack_exports__, __webpack_require__) {
+ "use strict";
+ __webpack_require__.d(__webpack_exports__, "a", (function() {
+ return onOpen;
+ })), __webpack_require__.d(__webpack_exports__, "c", (function() {
+ return openDialog;
+ })), __webpack_require__.d(__webpack_exports__, "d", (function() {
+ return openDialogBootstrap;
+ })), __webpack_require__.d(__webpack_exports__, "b", (function() {
+ return openAboutSidebar;
+ }));
+ var onOpen = function() {
+ SpreadsheetApp.getUi().createMenu("My Sample React Project").addItem("Sheet Editor", "openDialog").addItem("Sheet Editor (Bootstrap)", "openDialogBootstrap").addItem("About me", "openAboutSidebar").addToUi();
+ }, openDialog = function() {
+ var html = HtmlService.createHtmlOutputFromFile("dialog-demo").setWidth(600).setHeight(600);
+ SpreadsheetApp.getUi().showModalDialog(html, "Sheet Editor");
+ }, openDialogBootstrap = function() {
+ var html = HtmlService.createHtmlOutputFromFile("dialog-demo-bootstrap").setWidth(600).setHeight(600);
+ SpreadsheetApp.getUi().showModalDialog(html, "Sheet Editor (Bootstrap)");
+ }, openAboutSidebar = function() {
+ var html = HtmlService.createHtmlOutputFromFile("sidebar-about-page");
+ SpreadsheetApp.getUi().showSidebar(html);
+ };
+}, function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.d(__webpack_exports__, "c", (function() {
return getSheetsData;
@@ -74,11 +99,11 @@ function setActiveSheet() {
}, getSheetsData = function() {
var activeSheetName = SpreadsheetApp.getActive().getSheetName();
return getSheets().map((function(sheet, index) {
- var sheetName = sheet.getName();
+ var name = sheet.getName();
return {
- text: sheetName,
- sheetIndex: index,
- isActive: sheetName === activeSheetName
+ name: name,
+ index: index,
+ isActive: name === activeSheetName
};
}));
}, addSheet = function(sheetTitle) {
@@ -89,32 +114,14 @@ function setActiveSheet() {
}, setActiveSheet = function(sheetName) {
return SpreadsheetApp.getActive().getSheetByName(sheetName).activate(), getSheetsData();
};
-}, function(module, __webpack_exports__, __webpack_require__) {
- "use strict";
- __webpack_require__.d(__webpack_exports__, "a", (function() {
- return onOpen;
- })), __webpack_require__.d(__webpack_exports__, "c", (function() {
- return openDialog;
- })), __webpack_require__.d(__webpack_exports__, "b", (function() {
- return openAboutSidebar;
- }));
- var onOpen = function() {
- SpreadsheetApp.getUi().createMenu("My Sample React Project").addItem("Sheet Name Editor", "openDialog").addItem("About me", "openAboutSidebar").addToUi();
- }, openDialog = function() {
- var html = HtmlService.createHtmlOutputFromFile("main").setWidth(400).setHeight(600);
- SpreadsheetApp.getUi().showModalDialog(html, "Sheet Editor");
- }, openAboutSidebar = function() {
- var html = HtmlService.createHtmlOutputFromFile("about");
- SpreadsheetApp.getUi().showSidebar(html);
- };
}, function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__), function(global) {
- var _ui__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1), _sheets__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
+ var _ui__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0), _sheets__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
global.onOpen = _ui__WEBPACK_IMPORTED_MODULE_0__["a"], global.openDialog = _ui__WEBPACK_IMPORTED_MODULE_0__["c"],
- global.openAboutSidebar = _ui__WEBPACK_IMPORTED_MODULE_0__["b"], global.getSheetsData = _sheets__WEBPACK_IMPORTED_MODULE_1__["c"],
- global.addSheet = _sheets__WEBPACK_IMPORTED_MODULE_1__["a"], global.deleteSheet = _sheets__WEBPACK_IMPORTED_MODULE_1__["b"],
- global.setActiveSheet = _sheets__WEBPACK_IMPORTED_MODULE_1__["d"];
+ global.openDialogBootstrap = _ui__WEBPACK_IMPORTED_MODULE_0__["d"], global.openAboutSidebar = _ui__WEBPACK_IMPORTED_MODULE_0__["b"],
+ global.getSheetsData = _sheets__WEBPACK_IMPORTED_MODULE_1__["c"], global.addSheet = _sheets__WEBPACK_IMPORTED_MODULE_1__["a"],
+ global.deleteSheet = _sheets__WEBPACK_IMPORTED_MODULE_1__["b"], global.setActiveSheet = _sheets__WEBPACK_IMPORTED_MODULE_1__["d"];
}.call(this, __webpack_require__(3));
}, function(module, exports) {
var g;
diff --git a/dist/dialog-demo-bootstrap.html b/dist/dialog-demo-bootstrap.html
new file mode 100644
index 0000000..554dd07
--- /dev/null
+++ b/dist/dialog-demo-bootstrap.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/dist/dialog-demo.html b/dist/dialog-demo.html
new file mode 100644
index 0000000..e187d36
--- /dev/null
+++ b/dist/dialog-demo.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/dist/main.html b/dist/main.html
deleted file mode 100644
index a475bcc..0000000
--- a/dist/main.html
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/dist/about.html b/dist/sidebar-about-page.html
similarity index 68%
rename from dist/about.html
rename to dist/sidebar-about-page.html
index 7bcef36..a02ec85 100644
--- a/dist/about.html
+++ b/dist/sidebar-about-page.html
@@ -1,11 +1,12 @@
-
+
+
-
-
-
-
-
\ No newline at end of file
+
+
+
+
+
@@ -68,12 +68,12 @@ Modify the server-side and client-side source code in the `src` folder. [Add any
## The sample app
-Insert/activate/delete sheets through a simple HTML dialog, built with React. Access the dialog through the new menu item that appears. You may need to refresh the spreadsheet and approve the app's permissions the first time you use it.
+The included sample app allows inserting/activating/deleting sheets through a simple HTML dialog, built with React. Two versions of the same app are provided with different styling: the first version uses vanilla React, and the second uses the popular bootstrap library (in this case, it uses [`react-bootstrap`](https://react-bootstrap.github.io/)). Access the dialogs through the new menu item that appears. You may need to refresh the spreadsheet and approve the app's permissions the first time you use it.
## Features
- Includes popular `eslint` and `prettier` configs for clean, standardized code.
-- `import` CSS from another file:
+- Supports importing CSS from another file:
```js
import './styles.css';
```
@@ -89,15 +89,14 @@ Insert/activate/delete sheets through a simple HTML dialog, built with React. Ac
import server from '../server';
// We now have access to all our server functions, which return promises!
- const { addSheet } = server;
- addSheet(sheetTitle)
- .then(response => doSomething(response))
- .catch(handleError(err));
+ server.addSheet(sheetTitle)
+ .then(response => doSomething(response))
+ .catch(err => handleError(err));
- // Or we can use async/await:
+ // Or we can use async/await. This is the same thing as above:
async () => {
try {
- const response = await addSheet(sheetTitle);
+ const response = await server.addSheet(sheetTitle);
doSomething(response);
} catch (err) {
handleError(err)
@@ -122,7 +121,7 @@ To add new client-side libraries for your React app:
Longer explanation:
-Google Apps Script requires all HTML to be in a single file that is loaded into the dialog. Therefore, webpack has been configured to inline all generated client JS code into a single HTML file (in this case [main.html](./dist/main.html) and [about.html](./dist/about.html)). Inlining all code into a single file can result in large output files, which take longer to load, and can also sometimes cause the Google Apps Script editor to crash when you open it. So to reduce bundle size this project takes advantage of [dynamic-cdn-webpack-plugin](https://github.com/mastilver/dynamic-cdn-webpack-plugin) to automatically load popular libraries found in your app, such as `react` and `react-dom`, from a CDN. It doesn't know about all libraries (only [these](https://github.com/mastilver/module-to-cdn/blob/master/modules.json)), so if you've installed new packages, especially large packages, you should add a CDN url to the [webpack file](./webpack.config.js#L129) to reduce bundle size.
+Google Apps Script requires all HTML to be in a single file that is loaded into the dialog. Therefore, webpack has been configured to inline all generated client JS code into a single HTML file (in this case [main.html](./dist/main.html) and [about.html](./dist/about.html)). Inlining all code into a single file can result in large output files, which take longer to load, and can also sometimes cause the Google Apps Script editor to crash when you open it. So to reduce bundle size this project takes advantage of [dynamic-cdn-webpack-plugin](https://github.com/mastilver/dynamic-cdn-webpack-plugin) to automatically load popular libraries found in your app, such as `react` and `react-dom`, from a CDN. It doesn't know about all libraries (only [these](https://github.com/mastilver/module-to-cdn/blob/master/modules.json)), so if you've installed new packages, especially large packages, you should add a CDN url to the [webpack file](./webpack.config.js#L129) to reduce bundle size. You will need to know your package's global variable. See the examples provided, and also see [here](https://webpack.js.org/configuration/externals/#externals) for more info on how this works.
### Expose all public functions
Make sure to expose all public functions, including `onOpen` and any functions you are calling from the client. Example below shows assignment to `global` object:
diff --git a/dist/code.js b/dist/code.js
index ec11250..46d2867 100644
--- a/dist/code.js
+++ b/dist/code.js
@@ -2,6 +2,8 @@ function onOpen() {
}
function openDialog() {
}
+function openDialogBootstrap() {
+}
function openAboutSidebar() {
}
function getSheetsData() {
@@ -59,6 +61,29 @@ function setActiveSheet() {
return Object.prototype.hasOwnProperty.call(object, property);
}, __webpack_require__.p = "", __webpack_require__(__webpack_require__.s = 2);
}([ function(module, __webpack_exports__, __webpack_require__) {
+ "use strict";
+ __webpack_require__.d(__webpack_exports__, "a", (function() {
+ return onOpen;
+ })), __webpack_require__.d(__webpack_exports__, "c", (function() {
+ return openDialog;
+ })), __webpack_require__.d(__webpack_exports__, "d", (function() {
+ return openDialogBootstrap;
+ })), __webpack_require__.d(__webpack_exports__, "b", (function() {
+ return openAboutSidebar;
+ }));
+ var onOpen = function() {
+ SpreadsheetApp.getUi().createMenu("My Sample React Project").addItem("Sheet Editor", "openDialog").addItem("Sheet Editor (Bootstrap)", "openDialogBootstrap").addItem("About me", "openAboutSidebar").addToUi();
+ }, openDialog = function() {
+ var html = HtmlService.createHtmlOutputFromFile("dialog-demo").setWidth(600).setHeight(600);
+ SpreadsheetApp.getUi().showModalDialog(html, "Sheet Editor");
+ }, openDialogBootstrap = function() {
+ var html = HtmlService.createHtmlOutputFromFile("dialog-demo-bootstrap").setWidth(600).setHeight(600);
+ SpreadsheetApp.getUi().showModalDialog(html, "Sheet Editor (Bootstrap)");
+ }, openAboutSidebar = function() {
+ var html = HtmlService.createHtmlOutputFromFile("sidebar-about-page");
+ SpreadsheetApp.getUi().showSidebar(html);
+ };
+}, function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.d(__webpack_exports__, "c", (function() {
return getSheetsData;
@@ -74,11 +99,11 @@ function setActiveSheet() {
}, getSheetsData = function() {
var activeSheetName = SpreadsheetApp.getActive().getSheetName();
return getSheets().map((function(sheet, index) {
- var sheetName = sheet.getName();
+ var name = sheet.getName();
return {
- text: sheetName,
- sheetIndex: index,
- isActive: sheetName === activeSheetName
+ name: name,
+ index: index,
+ isActive: name === activeSheetName
};
}));
}, addSheet = function(sheetTitle) {
@@ -89,32 +114,14 @@ function setActiveSheet() {
}, setActiveSheet = function(sheetName) {
return SpreadsheetApp.getActive().getSheetByName(sheetName).activate(), getSheetsData();
};
-}, function(module, __webpack_exports__, __webpack_require__) {
- "use strict";
- __webpack_require__.d(__webpack_exports__, "a", (function() {
- return onOpen;
- })), __webpack_require__.d(__webpack_exports__, "c", (function() {
- return openDialog;
- })), __webpack_require__.d(__webpack_exports__, "b", (function() {
- return openAboutSidebar;
- }));
- var onOpen = function() {
- SpreadsheetApp.getUi().createMenu("My Sample React Project").addItem("Sheet Name Editor", "openDialog").addItem("About me", "openAboutSidebar").addToUi();
- }, openDialog = function() {
- var html = HtmlService.createHtmlOutputFromFile("main").setWidth(400).setHeight(600);
- SpreadsheetApp.getUi().showModalDialog(html, "Sheet Editor");
- }, openAboutSidebar = function() {
- var html = HtmlService.createHtmlOutputFromFile("about");
- SpreadsheetApp.getUi().showSidebar(html);
- };
}, function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__), function(global) {
- var _ui__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1), _sheets__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
+ var _ui__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0), _sheets__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
global.onOpen = _ui__WEBPACK_IMPORTED_MODULE_0__["a"], global.openDialog = _ui__WEBPACK_IMPORTED_MODULE_0__["c"],
- global.openAboutSidebar = _ui__WEBPACK_IMPORTED_MODULE_0__["b"], global.getSheetsData = _sheets__WEBPACK_IMPORTED_MODULE_1__["c"],
- global.addSheet = _sheets__WEBPACK_IMPORTED_MODULE_1__["a"], global.deleteSheet = _sheets__WEBPACK_IMPORTED_MODULE_1__["b"],
- global.setActiveSheet = _sheets__WEBPACK_IMPORTED_MODULE_1__["d"];
+ global.openDialogBootstrap = _ui__WEBPACK_IMPORTED_MODULE_0__["d"], global.openAboutSidebar = _ui__WEBPACK_IMPORTED_MODULE_0__["b"],
+ global.getSheetsData = _sheets__WEBPACK_IMPORTED_MODULE_1__["c"], global.addSheet = _sheets__WEBPACK_IMPORTED_MODULE_1__["a"],
+ global.deleteSheet = _sheets__WEBPACK_IMPORTED_MODULE_1__["b"], global.setActiveSheet = _sheets__WEBPACK_IMPORTED_MODULE_1__["d"];
}.call(this, __webpack_require__(3));
}, function(module, exports) {
var g;
diff --git a/dist/dialog-demo-bootstrap.html b/dist/dialog-demo-bootstrap.html
new file mode 100644
index 0000000..554dd07
--- /dev/null
+++ b/dist/dialog-demo-bootstrap.html
@@ -0,0 +1,18 @@
+
+
+
+