Skip to content

Project Structure

Jump to bottom
Chris edited this page Aug 30, 2020 · 12 revisions

File Structure

Export Sheet Data's code is located in the src folder and split into several key files:

ExportSheetData.gs

This is were data is formatted and exported. Parameters are passed in by the sidebar then examined to properly format exported data. Overall, there's not much to say about this file besides it's the core of Export Sheet Data.

Sidebar.html

The core HTML needed for the sidebar to function. While ExportSheetData.gs handles the actual formatting, Sidebar.html is the front end of the add-on. In other words, the options available for users to adjust are all displayed through this file which are then passed to the backend to properly format data as expected. Sidebar.html is largely empty until it pulls in CSS and JavaScript code from the other sidebar files.

Sidebar.html is designed to be as lightweight as possible. This means using only CSS, HTML, and JavaScript to create a responsive interface. Use of heaver jQuery or AJAX libraries are best avoided to keep load and response times small.

SidebarStyle.html

Contains CSS values used in the sidebar. It is kept separate to make editing easier and is pulled into the sidebar when it is generated.

SidebarJavaScript.html

Contains the JavaScript needed to make the sidebar function as ESD's front end. Like SidebarStyle.html, this file is kept separate from the core Sidebar.html file to make editing it easier and is pulled into the sidebar when it is generated.

Spinner.html

Creates the spinner displayed while data is being compiled. It is purely aesthetic and does not affect how Export Sheet Data functions. The script is licensed under the MIT License from Felix Gnass.

Code Structure

ExportSheetData.gs is written in JavaScript.

Broad stroke formatting rules:

  • New line braces
  • camelCase variable and function names
  • Two empty lines between functions
  • If-else statements should be on their own lines

Sidebar.html (and its associated files) is written in a traditional HTML5 / CSS / JavaScript web page blend.

Broad stroke formatting rules:

  • New line div tags (unless used for empty padding)
  • camelCase id and class naming
  • CSS is declared in the SidebarStyle.html file's <style> tag
  • JavaScript should be loaded at the bottom of the page, with the bulk of JavaScript code declared in the SidebarJavaScript.html file
  • JavaScript should follow the same rules set out for ExportSheetData.gs
Clone this wiki locally