Limitation of number of collapsible sections in a card.

Leandro Zubrezki

unread,

Apr 23, 2021, 8:56:09 AM4/23/21

to Google Apps Script Community

Hi all,

I am building the documentation of custom functions for Google Sheets directly in the Workspace Add-on sidebar so the users have the reference right there where they need it.

I've design it as collapsible sections where the title is the name of the function and a short description and then when you uncollapse you can see the full description, parameters, examples etc. Here is the code:

<pre style='color:#000000;background:#ffffff;'>function viewFormulas_() {

const builder = CardService.newCardBuilder()

.setName('Fórmulas');

const section = CardService.newCardSection()

.setHeader('Fórmulas disponibles (beta)')

.setCollapsible(false)

.setNumUncollapsibleWidgets(0)

.addWidget(CardService.newTextParagraph()

.setText('Puedes ver las fórmulas y sus parámetros directo sobre una celda escribiendo =JAGUAR_. Adicionalmente aquí listamos todas con ejemplos adicionales.')

);

builder.addSection(section);

FORMULAS.forEach((formula) => {

const section = CardService.newCardSection()

.setHeader(`${formula.name}\n${formula.shortDescription}`)

.setCollapsible(true)

.setNumUncollapsibleWidgets(0)

.addWidget(CardService.newTextParagraph()

.setText(`Descripción:\n${formula.description}`)

)

.addWidget(CardService.newTextParagraph()

.setText(`Sintaxis:\n${formula.syntax}`)

)

formula.parameters.forEach((param) => {

section.addWidget(CardService.newTextParagraph()

.setText(`${param.name} - ${param.condition}\n${param.description}`)

)

});

section.addWidget(CardService.newTextParagraph()

.setText(`Ejemplos:\n${formula.examplesDescription}`)

)

formula.examples.forEach((example) => {

section.addWidget(CardService.newTextParagraph()

.setText(`=${example.func}\n${example.description}`)

)

});

builder.addSection(section);

});

return builder.build();

}

</pre>

The problem is I have found a limitation that is not documented anywhere, YOU CAN'T ADD MORE THAN 12 COLLAPSIBLE SECTIONS TO THE CARD. I have more than 12, the sections just don't appear, there is no error or anything. The limitation is for collapsible only, I can add more sections that are not collapsible without any problem.

I don't think it is even worth submitting an issue in the bug tracker but just as a FYI.

Leandro Zubrezki

unread,

Apr 23, 2021, 8:57:45 AM4/23/21

to Google Apps Script Community

Ok that didn't work as I expected:

Online syntax highlighting for the masses! for "JavaScript" 2021-04-23 09-56-46.png

function viewFormulas_() {

const builder = CardService.newCardBuilder()

.setName('Fórmulas');

const section = CardService.newCardSection()

.setHeader('Fórmulas disponibles (beta)')

.setCollapsible(false)

.setNumUncollapsibleWidgets(0)

.addWidget(CardService.newTextParagraph()

.setText('Puedes ver las fórmulas y sus parámetros directo sobre una celda escribiendo =JAGUAR_. Adicionalmente aquí listamos todas con ejemplos adicionales.')

);

builder.addSection(section);

FORMULAS.forEach((formula) => {

const section = CardService.newCardSection()

.setHeader(`${formula.name}\n${formula.shortDescription}`)

.setCollapsible(true)

.setNumUncollapsibleWidgets(0)

.addWidget(CardService.newTextParagraph()

.setText(`Descripción:\n${formula.description}`)

)

.addWidget(CardService.newTextParagraph()

.setText(`Sintaxis:\n${formula.syntax}`)

)

formula.parameters.forEach((param) => {

section.addWidget(CardService.newTextParagraph()

.setText(`${param.name} - ${param.condition}\n${param.description}`)

)

});

section.addWidget(CardService.newTextParagraph()

.setText(`Ejemplos:\n${formula.examplesDescription}`)

)

formula.examples.forEach((example) => {

section.addWidget(CardService.newTextParagraph()

.setText(`=${example.func}\n${example.description}`)

)

});

builder.addSection(section);

});

return builder.build();

}

Joshua Snyder

unread,

Apr 23, 2021, 9:37:12 AM4/23/21

to Google Apps Script Community

Haven't experienced this with collapsible sections myself, but we have experienced a limit on the number of widgets that can be added to a section, beyond which the widgets simply do not show.

This makes sense because if there were too many widgets/sections in a card the response time for the card to load would become very slow.

Why don't you use decorated text for each function, then a separate function detail card that is loaded when the function is clicked?

It would allow you to get a similar level of functionality but would circumvent this problem, and decrease your load time as you wouldn't need to load unnecessary widgets for the functions the user is not interested in.

Leandro Zubrezki

unread,

Apr 23, 2021, 10:35:36 AM4/23/21

to Google Apps Script Community

The are 14 formulas and the idea was to give a quick view of all the options and then using the collapsible section for the detail information to be able to jump from one to the other and compare easily. 100% agree with you though, the options are:

1) Divide the functions by type with a decorated text option and then navigate to the detail and see 5/6 formulas or

2) Create decorated text options and then navigate to the detail of the specific function.

Will probably go with 2) to keep having the whole list of formulas in one place and then the detail to see the parameters, examples, etc.

Kim Nilsson

unread,

May 6, 2021, 3:55:45 AM5/6/21

to Google Apps Script Community

To let the rest of us learn, please do post the solution you chose.

Leandro Zubrezki

unread,

May 12, 2021, 7:12:34 AM5/12/21

to Google Apps Script Community

Hi Kim!

I ended up with number 2, a list of formulas and then on click you can see the details:

FormulasSection.ts — web (Workspace) 2021-05-12 08-09-35.png

FormulasSection.ts — web (Workspace) 2021-05-12 08-10-19.png

Hope it helps, cheers!

Reply all

Reply to author

Forward