Hi,

The objective is to get JSON data from the webhook server.

I am getting a failure on the HTML+ portlet when using the fetch API to do a REST POST Request to the webhook server:

Refused to connect to 'flaalmmvb01.mtn.co.za:5000/.../OctaneDetails' because it violates the following Content Security Policy directive: "default-src blob: 'self' 'unsafe-inline' 'unsafe-eval' img.youtube.com app.powerbi.com admhelp.microfocus.com www.youtube.com". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

sendPostRequest @ VM507:22Understand this error
16:59:44.493 VM507:22 Refused to connect to 'flaalmmvb01.mtn.co.za:5000/.../OctaneDetails' because it violates the document's Content Security Policy.
sendPostRequest @ VM507:22Understand this error
16:59:44.493 VM507:37 Error fetching data: TypeError: Failed to fetch
at HTMLButtonElement.sendPostRequest (eval at eval (PortletUtilitiesJS.jsp:477:25), <anonymous>:22:5)

I looked at the HTML+ Portlet tutorial on GitHub (https://github.com/MicroFocus/ppm-html-plus-portlets), for the REST API as well as ChatGPT guidance on the usage of the fetch API in JavaScript

Not sure what I am doing wrong

Here is my HTML which used for testing the HTML+ Portlet:

<div><button id="submit-button">Submit</button></div>
<div id="response"></div>

My JavaScript code:

// Replacing raw data by property-indexed data
data = DF.HtmlPlusUtils.utils.indexDataByColumnKey(data, metadata.columnsInfo);
// Function to perform a POST request with custom JSON payload
function sendPostRequest() {
    // Define variables for the payload
    const epicUrl = 'http://nlaoctmve103.mtn.co.za:8080/ui/entity-navigation?p=5001/7001&entityType=work_item&id=46003';

    // Construct the JSON payload
    const payload = {
        name: epicUrl
    };

    const url = 'http://FLAALMMVB01.mtn.co.za:5000/webhook/OctaneDetails'; // Replace with your API endpoint
    const headers = new Headers({
        // 'Accept': 'application/json',
        'content-type': 'application/json'
    });

    fetch(url, {
        method: 'POST',
        headers: headers,
        body: JSON.stringify(payload)
    })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }
            return response.json();
        })
        .then(data => {
            displayResponse(data);
        })
        .catch(error => {
            console.error('Error fetching data:', error);
            displayResponse({ error: error.message });
        });
}

// Function to display the response from the server
function displayResponse(data) {
    const responseDiv = document.getElementById('response');
    responseDiv.textContent = JSON.stringify(data, null, 2);
}

// Add event listener to the button
document.getElementById('submit-button').addEventListener('click', sendPostRequest);

If I test in Postman then I get a JSON response back from the webhook server.

It seems it's my JavaScript because I also get "Fail to Fetch" error in IntelliJ IDEA 2024.1.2 (Ultimate Edition).

Lastly, with PPM 24.3 webhook functionality, I successfully send a request to the webhook server.

Any suggestions on what I am doing wrong?

Thanks.