Question Re: Create a New Button and Add it to a Container Using C... in Technology Q&A

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

Ron_Hagan — Thu, 14 Mar 2024 15:22:34 GMT

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

Re: Create a New Button and Add it to a Container Using C...

Edrilan_Berisha — Thu, 14 Mar 2024 15:29:44 GMT

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

Re: Create a New Button and Add it to a Container Using C...

Ron_Hagan — Thu, 14 Mar 2024 19:41:05 GMT

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).

Re: Create a New Button and Add it to a Container Using C...

Edrilan_Berisha — Thu, 14 Mar 2024 19:56:09 GMT

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.

Re: Create a New Button and Add it to a Container Using C...

Edrilan_Berisha — Thu, 14 Mar 2024 19:57:59 GMT

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.

Re: Create a New Button and Add it to a Container Using C...

Ron_Hagan — Thu, 14 Mar 2024 20:15:39 GMT

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