My google script executes very slowly, but it has been condensed from just 107 lines to one. How would I go about making it more responsive?

Question

I have recently started working on Google Apps Script in a Google spreadsheet that is meant to provide a similar service to QuickBooks for free. I have attached the more human-friendly code below:

    function onOpen() {
    var e = SpreadsheetApp.getUi();
    SpreadsheetApp.getActiveSpreadsheet()
    .getSheetByName("Loading").activate()
    e.createMenu("Gameplex Invoice PRO")
    .addItem("Settings", "settingsopen")
    .addSeparator().addSubMenu(e.createMenu("Clients")
    .addItem("Add Client", "showPromptCoustomerAdd")
    .addItem("Recive payments", "_")
    .addItem("Estimate", "_")
    .addItem("Credit Memo", "_")
    .addItem("Sales Reciept", "_")
    .addItem("Refund Reciept", "_")
    .addItem("Delayed Credit", "_")
    .addItem("Delayed Charge", "_")
      .addSubMenu(e.createMenu("Invoice")
        .addItem("Add Invoice", "showPromptInvoiceAdd")))
      .addSubMenu(e.createMenu("Suppliers")
        .addItem("Expense", "showPromptCoustomerAdd")
        .addItem("Cheque", "_").addItem("Bill", "_")
        .addItem("Pay Bils", "_")
        .addItem("Purchase Order", "_")
        .addItem("Supplier Credit", "_")
        .addItem("Credit Card Credit", "_")
        .addItem("Print Cheques", "_"))
      .addSubMenu(e.createMenu("Other")
        .addItem("Deposit", "showPromptCoustomerAdd")
        .addItem("Transfer", "_")
        .addItem("Statement", "_").addItem("Add Note", "_")
        .addItem("Credits", "credits"))
        .addSubMenu(e.createMenu("Pages")
        .addItem("Home", "showPromptCoustomerAdd")
        .addItem("Notes", "Notesopen")
        .addItem("Clients", "clientsopen")
        .addItem("Help", "Help")
        .addItem("Settings", "settingsopen")
        .addItem("Credits", "credits"))
        .addToUi(), Utilities.sleep(5),
        SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Home").activate()
}

function showPromptCoustomerAdd() {
    var e = SpreadsheetApp.getUi(),
        t = SpreadsheetApp.getActiveSpreadsheet(),
        d = e.prompt("Please type the name of the costomer below", "Company Name:", e.ButtonSet.YES_NO);
    t.insertSheet("." + d + ".")
}

function showPromptInvoiceAdd() {
    SpreadsheetApp.getUi();
    var e = HtmlService.createHtmlOutputFromFile("costomer-selection").setTitle("Gameplex Invoicer PRO- Add Invoice");
    SpreadsheetApp.getUi().showSidebar(e)
}

function credits() {
    SpreadsheetApp.getUi();
    SpreadsheetApp.getUi().alert("Tristan Poland - Code, UI Design \r\n Tyler Poland - Code, Financial knowledge"), SpreadsheetApp.getActiveSpreadsheet().toast("To join our team, just click below:", "Thank you for reading the credits section")
}

function settingsopen() {
    var e = HtmlService.createHtmlOutputFromFile("Settings").setTitle("Gameplex Invoicer PRO- Settings");
    SpreadsheetApp.getUi().showSidebar(e)
}

function Notesopen() {
    SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Notes").activate()
}

function Help() {
    SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Help").activate()
}

function Exit() {
    SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Loading").activate()
}

function clientsopen() {
    SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Coustomers").activate()
}

function Home() {
    SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Home").activate()
}

function RANDALPHA(e, t) {
    var d = "";
    if ("number" != typeof e || "number" != typeof t) return "NaN";
    var a, r = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()<>-=_+:;";
    switch (t) {
        case 0:
            a = r.substr(0, 52);
            break;
        case 1:
            a = r.substr(0, 62);
            break;
        case 2:
            a = r;
            break;
        default:
            return "Error: Type choice > 2"
    }
    for (var i = 0; i < e; i++) d += a.charAt(Math.floor(Math.random() * a.length));
    return d
}

The Google spreadsheet has buttons in the form of images that run functions within the script to provide a nice UI, but when I click any of the UI buttons, the doc says: 'running script' for roughly five minutes before the function finishes. Have I done something wrong with compacting my code, is there any way to get it to respond better to buttons?

The document is below for those interested: https://docs.google.com/spreadsheets/d/1x9AxrWsmBgowhpPGUgMLITd51z0PVWai_oE5FbmP2ME/edit?usp=sharing

I would appreciate any help anyone can provide.

Answer 1

Render it as HTML on the Client Side

You are trying to build up the UI piece by piece using Apps Script functions. This is very inefficient because every time you add something to the UI from Apps Script, the information has to travel from the Google server which is hosting the script.

For example, if someone presses a button in your UI that changes the UI and nothing else, making Apps Script take care of this means that the information would need to travel from the client (user) to Google's servers, and back to the client again.

You are much better off using plain HTML and rendering all the UI logic in the sidebar, for example, in the script editor, make a simple code file and then make a html file called "index".

Code.gs

var htmlOutput = HtmlService
    .createHtmlOutputFromFile('index.html')
    .setTitle('My App');
SpreadsheetApp.getUi().showSidebar(htmlOutput);

index.html

<h1>Hello!</h1>
<script>console.log("I am being rendered client side!")</script>

Then within your HTML you can build it as you would a normal web page. Crucially, you can add in <script> tags and get JavaScript running on the users side, which will speed up everything considerably.

If you do need to communicate back to Apps Script, from the HTML sidebar, take a look at the article Client to server communications which has some good examples.

References

• Sidebar Reference
• HTML in Apps Script Guide
• HTML Service Reference
• Client to server communications Guide