How can I make buttons on html+ portlets work properly?

I'm new to PPM and it would be helpful to see a simple example of how I could make any sort of change (such as a background color of a page) after clicking a button that I've created. Here's some Javascript I wrote just as a test that works fine in my personal ide, but not in the portlet configuration.

  • Suggested Answer

    0  

    Hi Leeya,

    I can see at least two potential problems here:

    1) You should not add your button to "document.body", as it will refer to the main PPM page, and might end up adding your button completely outside of the portlet. Instead, you should take note of this text displayed at the top of the Javascript box in the HTML+ portlet:

    So try to add your button by using: 

    container.appendChild(button);

    This way, the button will be added directly in the html+ portlet, where I assume you want it.

    2) Trying to set directly the background color of your document.body is not likely to take effect, because there are a LOT of CSS that will take effect on the various sections of the PPM page, likley overriding your setting. If you want to check if your button works, I would advise to use some javascript function such as "alert()" which will show a message - that should be enough to ensure that your code works;

    function doMyActionWhenButtonClicked() {
      alert('It works!');
    }

    I gave it a quick try and it works fine in my HTML+ with this (overly simple) code in the javascript section:

    function doMyActionWhenButtonClicked() {
      alert('It works!');
    }
    
    const button = document.createElement('button');
    button.innerText = 'Click me!';
    button.onclick = doMyActionWhenButtonClicked;
    
    container.appendChild(button);

    Result (when button is clicked):

    Now, all that being said, it looks to me like you may want to enage in experimenting with PPM HTML+ portlet with some developers that have more advanced Front-end/Javascript/CSS development skills - This will definitely save you a lot of time, as the purpose of this forum is to answer questions on PPM-related questions and not generic front-end development topics. 

  • 0 in reply to   

    I realized that switching from document to container fixed the issue almost immediately after I posted this (very convenient timing). There's a bit of a time difference between the rest of my team and I, so I figured this way would be quicker. I'll use other resources for these type questions in the future. I appreciate your response, thank you!