├── Screenshot 2020-07-05 at 16.50.54.png
├── appsscript.json
├── README.md
├── Sidebar.css.html
├── Sidebar.js.html
├── Server.gs
└── Sidebar.html


/Screenshot 2020-07-05 at 16.50.54.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andrewroberts/materializecss-jquery-google-apps-script-sidebar/HEAD/Screenshot 2020-07-05 at 16.50.54.png


--------------------------------------------------------------------------------
/appsscript.json:
--------------------------------------------------------------------------------
1 | {
2 |   "timeZone": "Europe/London",
3 |   "dependencies": {
4 |   },
5 |   "exceptionLogging": "STACKDRIVER",
6 |   "runtimeVersion": "DEPRECATED_ES5"
7 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # materializecss-jquery-google-apps-script-sidebar
2 | 
3 | ![Google Apps Script GSheet Sidebar example](https://github.com/andrewroberts/materializecss-jquery-google-apps-script-sidebar/blob/master/Screenshot%202020-07-05%20at%2016.50.54.png?raw=true)
4 | 
5 | Create a form in the sidebar of a Google Spreadsheet using Materialize CSS, jQuery and Google Apps Script.
6 | 


--------------------------------------------------------------------------------
/Sidebar.css.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
 3 | <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 4 | 
 5 | <style type="text/css">
 6 | 
 7 |   .error {
 8 |     color:#FF4081;  
 9 |   }
10 |   
11 |   .status {
12 |     padding-left:10px;
13 |   }
14 |     
15 | </style>
16 | 


--------------------------------------------------------------------------------
/Sidebar.js.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <script
 3 |   src="https://code.jquery.com/jquery-3.5.1.min.js"
 4 |   integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
 5 |   crossorigin="anonymous"></script>
 6 |   
 7 | <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
 8 | 
 9 | <script>
10 | 
11 |   $(document).ready(function() {  
12 |     $('#test-form').submit(onSidebarFormSubmit)
13 |   })
14 | 
15 |   function onSidebarFormSubmit(event) {
16 |   
17 |     event.preventDefault()
18 |  
19 |     var status = $('#submit-status')
20 |     var button = $('#submit-button')
21 |     var form = $('#test-form').get()[0]
22 |   
23 |     status.hide()
24 |     button.text('Submitting...')
25 |     button.addClass('disabled')
26 | 
27 |     google.script.run
28 |       .withSuccessHandler(function() {
29 |         resetForm('Form submitted OK!')
30 |       })
31 |       .withFailureHandler(function(error) {
32 |         resetForm(error, true)
33 |       })
34 |       .onFormSubmit(form);  
35 |       
36 |     // Private Functions
37 |     // -----------------
38 | 
39 |     function resetForm(message, isError) {
40 |     
41 |       if (isError) {
42 |         status.addClass('error')
43 |       } else {
44 |         form.reset()
45 |         status.removeClass('error')      
46 |       }
47 |       
48 |       status.text(message)
49 |       status.show()
50 |       
51 |       button.text('Submit')
52 |       button.removeClass('disabled')
53 |     }
54 |   }
55 | 
56 | </script>


--------------------------------------------------------------------------------
/Server.gs:
--------------------------------------------------------------------------------
 1 | function onOpen() {
 2 |   SpreadsheetApp
 3 |     .getUi()
 4 |     .createMenu('Sidebar')
 5 |     .addItem('Open', 'onOpenSidebar')
 6 |     .addToUi()
 7 | }
 8 | 
 9 | function onOpenSidebar() {
10 | 
11 |   var ui = HtmlService.createTemplateFromFile('Sidebar')
12 |     .evaluate()
13 |     .setTitle('Materialize CSS Sidebar Example')
14 |   
15 |   SpreadsheetApp.getUi().showSidebar(ui)
16 | }
17 | 
18 | function onFormSubmit(form) {
19 | 
20 |   var spreadsheet = SpreadsheetApp.getActive()
21 |   var sheet = getSheet(spreadsheet) 
22 |   var photoUrl = (form.filepath) ? DriveApp.createFile(form.photo).getUrl() : ''
23 |   
24 |   sheet.appendRow([
25 |     new Date(),
26 |     form.first_name,
27 |     form.last_name,
28 |     form.password,
29 |     form.email,
30 |     photoUrl
31 |   ])
32 |   
33 |   // Private Functions
34 |   // -----------------
35 |   
36 |   function getSheet(spreadsheet) {
37 |     
38 |     var sheet = spreadsheet.getSheetByName('Results')  
39 |     
40 |     if (sheet === null) {
41 |       sheet = spreadsheet.insertSheet().setName('Results')
42 |     }
43 |     
44 |     if (sheet.getRange('A1').getValue() === '') {
45 |     
46 |       sheet
47 |         .getRange('A1:F1')
48 |         .setValues([['Timestamp', 'First Name', 'Last Name', 'Password', 'Email', 'Photo']])
49 |         
50 |       sheet.setFrozenRows(1)
51 |     }
52 |     
53 |     return sheet
54 |   }
55 | }
56 | 
57 | function include(filename) {
58 |   return HtmlService.createHtmlOutputFromFile(filename).getContent()
59 | }


--------------------------------------------------------------------------------
/Sidebar.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <base target="_top">
 5 |     <?!= include('Sidebar.css') ?>
 6 |   </head>
 7 |   <body>
 8 |     <div class="container">
 9 |       <div class="section">
10 |         <h5>Test Form</h5>
11 |         <div class="row">
12 |           <form id="test-form" class="col s12">
13 |             <div class="row">
14 |               <div class="input-field col s6">
15 |                 <input 
16 |                   id="first_name" 
17 |                   name="first_name" 
18 |                   type="text" 
19 |                   class="validate" 
20 |                   required>
21 |                 <label for="first_name">First Name *</label>
22 |               </div>    
23 |               <div class="input-field col s6">
24 |                 <input 
25 |                   id="last_name" 
26 |                   name="last_name" 
27 |                   type="text" 
28 |                   class="validate" 
29 |                   required>
30 |                 <label for="last_name">Last Name *</label>
31 |               </div>
32 |             </div>
33 |             <div class="row">
34 |               <div class="input-field col s12">
35 |                 <input 
36 |                   id="password" 
37 |                   name="password" 
38 |                   type="password" 
39 |                   class="validate" 
40 |                   required>
41 |                 <label for="password">Password *</label>
42 |               </div>
43 |             </div>
44 |             <div class="row">
45 |               <div class="input-field col s12">
46 |                 <input 
47 |                   id="email" 
48 |                   name="email" 
49 |                   type="email" 
50 |                   class="validate" 
51 |                   required>
52 |                 <label for="email">Email *</label>
53 |               </div>
54 |             </div>
55 |             <div class="row">
56 |               <div class="file-field input-field col s12">
57 |                 <div 
58 |                   class="file-path-wrapper" 
59 |                   style="padding-left:0px;">
60 |                   <input type="file" name="photo" id="photo">
61 |                   <input 
62 |                     class="file-path validate" 
63 |                     type="text" 
64 |                     name="filepath" 
65 |                     id="filepath"
66 |                     placeholder="Select Photo"
67 |                     style="font-size:1rem">
68 |                 </div>
69 |               </div>
70 |             </div>
71 |             <button 
72 |               id="submit-button" 
73 |               name="submit-button" 
74 |               type="submit" 
75 |               class="waves-effect waves-light btn blue darken-2">
76 |               <i class="material-icons right">send</i>Submit
77 |             </button>
78 |             <button 
79 |               id="reset-button" 
80 |               name="reset-button" 
81 |               type="reset" 
82 |               class="waves-effect waves-light btn grey black-text lighten-2">
83 |               Reset
84 |             </button>
85 |           </form>
86 |         </div>
87 |       </div>
88 |       <div class="row">
89 |         <div class="flow-text status" id="submit-status" hidden></div>
90 |       </div>
91 |     </div>
92 |     <?!= include('Sidebar.js') ?>  
93 |   </body>
94 | </html>


--------------------------------------------------------------------------------