Create a New Button and Add it to a Container Using Custom JavaScript in SAP Build Apps

[Ron_Hagan]

Hi,

I have a container that I want to dynamically add a button to using custom JavaScript when I click a button that already exists in the form.

This is the code I've tried and i know that the Component ID of the container is correct but the button isn't showing up.  I'm guessing that maybe I'm not creating the button correctly?  Also, I haven't done anything with the inputs or Outputs.  Is that something that I would need to do?

const container = document.getElementById("9f1b57c7-72a2-4d17-9c20-91ab6dbecc4c");
const newButton = document.createElement("button");
newButton.textContent = "Click Here";
container.appendChild(newButton);

Thanks in advance!

Cheers,

Ron

[Edrilan_Berisha · Accepted solution]

Hi Ron,

why don't you just add the button via the SAP Build tool itself using drag and drop?

Best,

Edrilan Berisha

SAP S/4HANA Cloud Financials Development

[Ron_Hagan · Accepted solution]

Hi Edrilan. I will be bringing in data and depending on what is returned, I may have to add one or more buttons (or text components).

[Edrilan_Berisha · Accepted solution]

Hi Ron, in development we also have such cases, usually we to not create a button depending on what kind of data is returned or what kind of situation we are. We have the button always there but we hide it or show it depending on that.

[Edrilan_Berisha · Accepted solution]

I think you could do the same:

1. Install a "Hide component" flow function from the Marketplace.

2. Attach it to the button's "Component tap" event. (I guess you press another button earlier which will fetch some data?)

3. Choose the desired button in the flow function properties.

[Ron_Hagan · Accepted solution]

That makes sense, Edrilan! I'm going to try that. Thank you!