Enhance User Experience with a Customized Progress Bar using Google Apps Script

I created a Google Sheets cell counter in Apps Script and need help setting up the bootstrap progress bar using the "percentage" variable.

GS

function cellCounter() {

  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheets = ss.getSheets();
  var cells = 0;
  sheets.forEach(function(sheet){
    cells = cells + sheet.getMaxRows() * sheet.getMaxColumns();
  });
  var division = cells/10000000*100;
  var percentage = +division.toFixed(0);
  return ( "📈 Each Google Sheets document has a capacity for ten million cells. You have used <strong>" + percentage + "%</strong> of the total with <strong>" + cells + " cells</strong>." );
}

HTML

<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>
javascriptgoogle-apps-scriptgoogle-sheetsbootstrap-4

Answer â„–1

Utilize Force-printing scriptlets

  • This method enables passing Apps Script variables into html syntax using <?!= ... ?>
  • To use this, the variable that needs to be passed must be declared globally

Sample for a Webapp (customize it to suit your requirements):

GS

 let size;
  
  function doGet() {
    size = cellCounter();
    return HtmlService.createTemplateFromFile("html.html").evaluate();
  }
  
  function cellCounter() {
  
    var ss = SpreadsheetApp.getActiveSpreadsheet();
    var sheets = ss.getSheets();
    var cells = 0;
    sheets.forEach(function(sheet){
      cells = cells + sheet.getMaxRows() * sheet.getMaxColumns();
    });
    var division = cells/10000000*100;
    var percentage = +division.toFixed(0);
    return percentage;
  }

html.html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="progress">
      <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: <?!= size ?>%">Hello </div>
    </div>
  </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Searching and selecting columns in React using Material-UI

Currently, I am using Material-UI data tables and have implemented a search functionality similar to this Codesandbox example, which only searches the Name/Food column. This is my existing code snippet: const [filterFn, setFilterFn] = useState({ fn: items ...

javascriptreactjsmaterial-ui

Error: Unable to iterate over the elements of `this.state` as it is

NEW UPDATE I encountered an issue with the response being an array, but it was actually coming from the backend (Express/Build folder) Revisiting an old issue that I faced some time ago. In my development environment, everything works fine. But once I d ...

javascriptreactjsmongodbexpressaxios

Unable to connect with controller after deploying asp.net mvc ajax call on server

For the first time, I am encountering a new issue. Although my code runs smoothly on my localhost, when I upload it to the server, I get a bad request error. The specific error message is: 400 (Bad Request) Below is the snippet of my code: Controll ...

javascriptjqueryajaxmodel-view-controllerrequest

Learn the steps for converting data from xlsx or csv files into JSON format

I am currently working on developing an application that allows users to upload xlsx or csv files from the frontend and submit them to a backend built with nodejs and express for processing. However, when I receive the data in the backend, it appears in th ...

javascriptnode.jsexpressbuffersheetjs

javascript implementing optional chaining for a single parameter

Is it possible to implement optional chaining on a single parameter? setAllProperties( Object.values(users).flatMap(({ properties }) => Object.values(properties) ) ); I am looking for a way to ensure that the properties folder exists in ...

javascriptreactjs

Navigate using history.push with user Logout Icon

Currently, I am utilizing a Material UI icon as a logout button in my project. Here is how I have implemented it: function logout(props:any){ localStorage.removeItem("token"); return( <Redirect to="/login" /> ) //props.history.push("/log ...

javascriptreactjstypescriptreact-routerlogout

What is the process for sending data to a node server using POST and receiving a responseText from it through GET?

Here is an example where I'm trying to send data from a JavaScript client to an Express Node server, validate the data against the database on the server, and respond once the verification process is complete. The data object in newHttpRequest.send(da ...

javascriptajaxnode.jshttpexpress

The div element is persisting despite AJAX attempts to remove it

I am currently developing an application that allows users to post and comment. I have a situation where I need to delete a specific comment by clicking on the associated 'x' button. To achieve this, I am making an Ajax call to the remove-comme ...

javascriptphpjqueryhtmlajax

Automatically update certain attributes of an object with Spring MVC's auto-refresh feature

Currently, I have a table in JSP where I am populating all object attributes using Spring MVC. The backend is providing a list of DTO's which are then being added to the ModelView. In the JSP, we iterate through this DTO list and display it in the tab ...

javascriptjavaajaxjspspring-mvc

Two liquid level divs within a container with a set height

I hesitated to ask this question at first because it seemed trivial, but after spending over 3 hours searching on stackoverflow and Google, I decided to give it a shot. The issue I'm facing can be found here: http://jsfiddle.net/RVPkm/7/ In the init ...

javascripthtmlcss

What is the technique for filtering multiple values using the OR operation in ng-model functions?

Currently, I am using an ng-modal labeled as "myQuery." At the moment, there are two filters in place that look like this: <accordion-group heading="" ng-repeat="hungry_pets in Pets" | filter:{hungry:false} | filter:{name:myQuery}" ... > I have ...

javascripthtmlcssangularjsangular-ui-bootstrap

Identifying activity on a handheld device

I am currently working on a website and I have noticed that it doesn't work as well on mobile devices as it does on desktop. There are performance issues that need to be addressed. I've seen other websites redirecting users to a different page wh ...

javascripthtmlcssmobile

Error message: "SyntaxError: Unexpected token import was not caught by the foundation"

I have recently taken over development from a previous developer who integrated Zurb Foundation as a framework into our website. The Foundation framework was installed using npm. I am encountering errors in the console related to all of the foundation java ...

javascriptjquerynode.jsnpmzurb-foundation

Generate an array using the properties of an object

Seeking a more efficient way to configure settings for an app using objects? Consider starting with the following object: var obj = { property_one: 3; property_two: 2; property_three: 1; } And transforming it into the desired array format: v ...

javascriptarraysjavascript-objects

Updating button appearance when clicked using Vue.js and Tailwind CSS

As part of my learning journey, I have expanded this code to enhance my frontend skills. While I am aware that the code can be significantly shortened, I am focused on learning and broadening my experience in frontend development. The code below functions ...

javascriptvue.jstailwind-css

A step-by-step guide on utilizing the v-for index loop to showcase a nested JSON array

My JSON Array has the following structure: items: [ { ID: 11, UserID: "test.com", UserRole: "user", timeStamp: "2021-03-23T15:54:02.125578", dialogs: [ { "Bot" ...

javascriptarraysjsonvue.jsv-for

Effective ways to enable users to upload files in a React Native app

Being in the process of developing a react native app, I am faced with the challenge of allowing users to easily upload files from their mobile devices (pdf, doc, etc). Unfortunately, my search for a suitable native component has proven fruitless. Can anyo ...

cssjavascriptreact-native

Firebase ref.on('value') will repeatedly trigger, even if no changes have occurred

My current setup involves using an event listener to monitor changes in my real-time database. const [chats, setChats] = useState({}); const ref = db.ref(`users/${sender}/chat/`); ref.on('value', (snapshot) => { const data = snapshot ...

javascriptreactjsfirebasefirebase-realtime-database

Implementing a collapsible menu feature in Bootstrap 3 when clicked

Experiencing an issue with a Bootstrap menu where I want the menu to collapse after clicking on one of the sections. This is the HTML code: <div class="container" id="home"> <nav class="navbar navbar-default navbar-fixed-top" role="navig ...

javascriptjquerytwitter-bootstrap-3menu

Ensure the correct file extension is chosen when selecting a file for the 'file_field' and display any error messages using Ruby on Rails

I am currently using Ruby on Rails 3 and Prototype, and I need to be able to check the file extension when a file is selected with file_field. I only want to allow files with extensions of .doc or .pdf, any other extensions should display an error. In my ...

javascriptruby-on-railsrubyajaxprototype