Cómo crear una barra lateral en Google Sheets

Una barra lateral es un elemento de la interfaz de usuario (un área vertical pequeña) que aparece a la izquierda oa la derecha de la ventana más grande o en la pantalla del usuario para mostrar información relacionada o una lista de opciones u opciones de navegación.

La barra lateral de las hojas de Google es un panel de interfaz de usuario que se muestra en el lado derecho de las hojas de Google. Google proporciona un editor de scripts incorporado llamado Apps Script que puede crear varios complementos y elementos para las aplicaciones de G-Suite. También se puede utilizar para crear sus propias barras laterales personalizadas en las hojas de Google.

Este artículo le mostrará cómo crear una barra lateral personalizada en Google Sheets usando el editor de Google Apps Script.

Crear una barra lateral en Google Sheets usando Apps Script

Si desea crear una barra lateral personalizada, debe ingresar y ejecutar cierto código en el editor de Apps Script. Luego, puede crear sus propios widgets dentro de la barra lateral utilizando códigos HTML, CSS y Javascript.

Primero, abra las hojas de Google. En el menú de hojas de Google, haga clic en "Herramientas" y seleccione "Editor de secuencias de comandos".

Eso abrirá el editor de Apps Script en una nueva pestaña de su navegador donde puede escribir su código de interfaz de usuario.

Escriba el siguiente código en la página Code.gs:

function onOpen () {SpreadsheetApp.getUi () .createMenu ('Mi nuevo menú') .addItem ('Mi barra lateral 1', 'showSidebar') .addToUi (); } function showSidebar () {var html = HtmlService.createHtmlOutputFromFile ('Sidebar') .setTitle ('Calculation Sidebar'); SpreadsheetApp.getUi () .showSidebar (html); }

En el código de secuencia de comandos Code.gs anterior, la función OnOpen () crea un menú personalizado llamado "Mi nuevo menú" en la barra de menú de Google Sheets. Ese menú contendrá un elemento de menú llamado "Mi barra lateral-1". Al hacer clic en este elemento del menú, se ejecutará la función showAdminSidebar () (la segunda parte del código) y la barra lateral se mostrará en el lado derecho de la ventana de la hoja de Google.

A continuación, necesitamos crear un archivo HTML en el editor de scripts y luego, con este archivo, puede crear la barra lateral.

Para crear el archivo HTML, haga clic en el icono más (+) junto a Archivos en el editor de Apps Script y seleccione "HTML".

Esto creará un archivo HTML debajo de Code.gs. Cambie el nombre del archivo a "Barra lateral". Este nombre debe ser el mismo que el agregado en la función showSidebar () (var html = HtmlService.createHtmlOutputFromFile ('Sidebar')).

Escriba el siguiente código dentro de la sección del archivo Sidebar.html:

Esta es mi nueva barra lateral

El código anterior muestra la cadena de texto "Esta es mi nueva barra lateral" y el botón "Cerrar" que cierra la barra lateral cuando se hace clic en ella.

Una vez que haya terminado de escribir el código anterior en la sección de Sidebar.html, debe contener el siguiente código:

Esta es mi nueva barra lateral.

La captura de pantalla:

Cuando haya terminado de ingresar ambos códigos, guarde el proyecto haciendo clic en el ícono de guardar en la barra de herramientas (vea la captura de pantalla a continuación). Luego, ejecute las funciones haciendo clic en el icono "Ejecutar".

Ya sea que ejecute el script aquí o seleccione el elemento del menú personalizado en la barra de herramientas de las hojas de Google (por primera vez), Google le pedirá que autorice la ejecución del script. Dado que está ejecutando un widget personalizado de terceros, Google solicitará su autorización. Una vez que autorice el script, mostrará la barra lateral dentro de su hoja de Google.

Cómo autorizar el código de Apps Script en Google

Para autorizar su secuencia de comandos personalizada, siga estos pasos:

Una vez que ejecute el script, Google le pedirá que seleccione su cuenta de Google. Después de seleccionarlo, aparecerá una pequeña ventana emergente, en la que haga clic en "Revisar permisos".

Aparecerá otra ventana emergente, aquí seleccione "Mostrar avanzado" y haga clic en "Ir a proyecto sin título (inseguro)" (se mostrará el nombre de su proyecto).

En la siguiente ventana, haga clic en "Permitir" y la hoja de Google ejecutará su secuencia de comandos.

Una vez que haya hecho eso, vuelva a su hoja de Google y actualícela. El nuevo menú personalizado (Mi nuevo menú) se agregará a la barra de herramientas de la hoja de Google, que agregamos a través del script Code.gs. Haga clic en "Mi nuevo menú" y seleccione el elemento de menú "Mi barra lateral 1" para mostrar la barra lateral.

Ahora su barra lateral personalizada aparecerá en el lado derecho de su hoja de Google con el texto y el botón que agregamos (como se muestra a continuación). Al hacer clic en el botón, la barra lateral se cerrará.

Bueno, ahora sabe cómo crear su propia barra lateral en las hojas de Google.