Embedding a Qlik Sense button object leads to “c.children.forEach is not a function” error

[matiasj]

Hi all,

I have a web-application (Angular + TypeScript) that embeds Qlik Sense visualizations through the Capability API. Embedding tables and filter panes works, but now I need to embed a Qlik Sense button object (specifically something like sn-action-button).

However, when I include the button’s object ID in my page, I get the following error:

--------------------------------------------------------------------------------

TypeError: c.children.forEach is not a function
createLabelAndIcon sn-action-button.25e8c45d9f118c132af2.js:formatted:3002
s sn-action-button.25e8c45d9f118c132af2.js:formatted:5510
component sn-action-button.25e8c45d9f118c132af2.js:formatted:5634
BM stardust.js:133
render stardust.js:133
paint 3219.40346c9d07149083d98e.js:2
Et 3219.40346c9d07149083d98e.js:2
f require.js:2
…

--------------------------------------------------------------------------------

The moment I remove the button from view, the error disappears. Also, when the button is in place but I click it, nothing happens: it doesn’t perform the intended selection or apply anything in the alternative state.

Here’s what I’m doing in the Angular component:

--------------------------------------------------------------------------------
Template:
--------------------------------------------------------------------------------
<div [id]="id"></div>
--------------------------------------------------------------------------------

--------------------------------------------------------------------------------
Component:
--------------------------------------------------------------------------------
ngOnInit() {
this.qlikService.getQlikApp().pipe(
switchMap(app => app.getObject(this.id, this.objectId!)),
tap(() => this.loaded = true)
).subscribe();
}
--------------------------------------------------------------------------------

I followed the official docs here:
https://help.qlik.com/en-US/sense-developer/November2024/Subsystems/APIs/Content/Sense_ClientAPIs/Ca...

• Is there a known issue that prevents the sn-action-button (or some button object) from being embedded the same way as other Qlik Sense elements?
• Are there extra steps needed (e.g., importing the extension from Qlik? Some extra script or resource necessary outside the standard approach for getObject)?

Thanks in advance for any suggestions or guidance!

Qlik Sense, API, Capability API, capability, capabilityapi, Error, sn-action-button, Embedding, Error, ButtonObject, typescript, angular

[matiasj · Accepted solution]

This error occurred because the label of the embedded button was too long and didn't fit in the container.

Solution was to make the web-applications container element for the button wider. Other possible solution is to make the button label text shorter.