Button change text display every after click

问题

I am new in Google script. Could you please help me on this. I want to create a button in googlesheet with series of text display every after click. ( I dont know what to put in script)

OPEN (green background) --> CLICK--> CLOSE ( red background) --> CLICK--> OPEN (green background)...and so on

Thank you in advance

回答1:

I believe your goal as follows.

You want to achieve the button which is changed when the button is clicked on the Google Spreadsheet.
- For example, when the button with the green color and "OPEN" text is clicked, you want to change it to the button with the red color and "CLOSE" text.
You want to achieve this using Google Apps Script.

Issue and workarounds:

In the current stage, unfortunately, Google Apps Script cannot directly manage the drawing on Google Spreadsheet by editing the text and color. So it is required to think of the workaround for achieving your goal. In this answer, I would like to propose the following 3 workarounds as the methodology.

Workaround 1:

In this workaround, the drawing is used as the button. When the drawing is used as the button, 2 drawings are prepared and both drawings are overwrapped. Each button has the function of button1 and button2, respectively. When a button is clicked, the z index is replaced. By this, the switching button can be achieved. Because in the current stage, the image cannot be directly edited by the Google Apps Script.

Usage:

In order to use the sample script, create 2 buttons as the drawings like the above demo image.
- In this case, please overwrap the both drawings.
- Please assign the function of button1 and button2 to each button.

Copy and paste the following script to the container-bound script of Spreadsheet and save it.

 const button1 = () => switching("button1");
 const button2 = () => switching("button2");

 function switching(name) {
   const ss = SpreadsheetApp.getActiveSpreadsheet();
   const sheet = ss.getActiveSheet();
   const drawings = sheet.getDrawings();
   drawings.forEach(d => d.setZIndex(d.getOnAction() == name ? 0 : 1));
   const temp = ss.insertSheet();
   SpreadsheetApp.flush();
   ss.deleteSheet(temp);
   sheet.activate();
 }

Click the button. By this, the script is run and the button is switched.

Note:

In this case, in order to refresh the change of z index of drawings, it is required to change the focus to other sheet. By this, when the button is clicked, the button is flashing in a moment. About this, I would like to expect the future update.

Workaround 2:

In this pattern, the drawing is used as the button. In this case, 2 drawings are also prepared, and one button is put to the cell "C3" and another one is other position (as the test, the button is put to "E10".) in the same sheet. Each button has the function of button1 and button2, respectively. When a button is clicked, the clicked button is replaced with the button of the another position. By this, the switching button can be achieved.

Usage:

In order to use the sample script, create 2 buttons as the drawings like the above demo image.
- In this case, please put a button to the cell "C3" and another one to other position (as the test, the button is put to "E10".) in the same sheet.
- Please assign the function of button1 and button2 to each button.

Copy and paste the following script to the container-bound script of Spreadsheet and save it.

 const button1 = () => switching("button1");
 const button2 = () => switching("button2");

 function switching(name) {
   const ss = SpreadsheetApp.getActiveSpreadsheet();
   const sheet = ss.getActiveSheet();
   const drawings = sheet.getDrawings();
   if (drawings[0].getOnAction() == name) {
     drawings[1].setPosition(3, 3, 0, 0);
     drawings[0].setPosition(10, 5, 0, 0);
   } else {
     drawings[0].setPosition(3, 3, 0, 0);
     drawings[1].setPosition(10, 5, 0, 0);
   }
 }

Click the button. By this, the script is run and the button is switched.

Note

In this case, it is not required to refresh by focusing to other sheet. But, another button is required to be put to the same sheet.

Workaround 3:

In this workaround, the cell is used as the button. When the cell is used as the button, in this case, the cell "C3" is used. And the OnSelectionChange event trigger is used for executing the script.

Usage:

In order to use the sample script, put the text of "OPEN" and the red color to the cell "C3" like above demo image.

Copy and paste the following script to the container-bound script of Spreadsheet and save it.

 function onSelectionChange(e) {
   const range = e.range;
   const sheet = range.getSheet();
   const a1Notation = range.getA1Notation();
   if (a1Notation == "C3") {
     if (range.getValue() == "OPEN") {
       range.setBackground("#ff0000");
       range.setValue("CLOSE");
     } else {
       range.setBackground("#38761d");
       range.setValue("OPEN");
     }
     sheet.getRange("A1").activate();
   }
 }

Click the cell "C3". By this, the script is run and the text and color of the cell are switched.

Note

In this case, in order to select the button again, it is required to change the selected cell. This is the current specification.

Note:

These are the simple sample scripts. So please modify them for your actual situation.

References:

Class Drawing
Simple Triggers

来源：https://stackoverflow.com/questions/63095150/button-change-text-display-every-after-click

标签

button

google-apps-script

google-sheets