REST API call custom block not working

ERPNext
1

Hi, I want to integrate Jira with ERPNext, to get started I just want to make easy task first, so I decide to try retrieving all projects from my Jira workspace.

Initially I don’t know how I am going to display the JSON data. After a while I think custom block would be nice since I can customize it and display on ERPNext workspace.

So the custom block would have a button that can fetch the projects thru API calls but for some reason the data is not being displayed, I am not sure what is wrong with my code, or if the API isnt working at all. Here’s the custom block code:

image

HTML

<div class="custom-block">
    <h2>Projects from Jira</h2>
    <!-- Fetch Button -->
    <button id="fetchProjects">Fetch Projects</button>
    <!-- Container for the project list -->
    <div class="project-list"></div>
</div>

CSS

.custom-block {
    padding: 20px;
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

.project-list {
    margin-top: 20px;
}

JavaScript

// Assuming root_element is available
let customBlockElement = root_element.querySelector('.custom-block');
let fetchBtn = customBlockElement.querySelector('#fetchProjects');
let projectList = customBlockElement.querySelector('.project-list');

fetchBtn.addEventListener('click', function() {
    // Clear the list each time the button is clicked
    projectList.innerHTML = "";

    // Define the API Endpoint
    const apiUrl = "https://nematix.atlassian.net/rest/api/2/project";

    // Make the REST API call
    fetch(apiUrl, {
        method: 'GET',
        headers: {
            "Authorization": "Basic " + btoa("amin@nematix.com:{{my jira token(not revealed)}}"), 
            "Content-Type": "application/json"
        }
    })
    .then(response => response.json())
    .then(data => {
        // Handle data
        data.forEach(project => {
            const div = document.createElement('div');
            div.textContent = project.name; // Adjust according to your needs
            projectList.appendChild(div);
        });
    })
    .catch(error => console.error('Error:', error));
});
2

Wait a second… You’re making your Jira credentials available to users on the frontend? Are you the only user of this system? If not, you risk exposing those credentials to anybody with access to that DocType…

3

Let’s just say currently I’m the only one, security isnt my main concern, for now. I need it to able to work ASAP. Like I don’t know what’s wrong with my code, or maybe I don’t even know if ERPNext allows manipulating the custom block such as generating HTML content using Javascript.

Edit: I have checked network in developer console. The response is 200 and I can see all the data returned from Jira which means it is working but something wrong with my JS code, which the problem still unsolved

You have any idea what’s the problem? or at least something I can do. The custom block look like this but supposely a list of projects should display when I click the button.

image

4

I’ve never used an HTML block like that before, but I might be able to help come up with another solution…

What exactly are you trying to do with the Jira data? Just display it?

What does the data look like?

Which DocType are you trying to display the data on?

5

What I’m trying to do with Jira data is to display it on my custom workspace using custom HTML block. But as of right now, I have successfully displayed the data in the HTML block but I have another concern right now.

The data look basically like this for each project

image
image1090×406 10.2 KB

Currently I don’t plan to display the data on any DocType except the workspace but I do want to use Jira REST API to create issue using custom DocType so when click save button, app will make api call to Jira server and create that issue, that is the next thing that I need help. Maybe I need to use seomthing called Webhook but I still dont know how to use it

6

You’re probably going to want to create a custom app if you need to make an API call to Jira… You technically could make the the API call on the frontend with javascript, but that has the same issue that I already referenced (it’s not a good idea to give your credentials to end-users on the frontend).

Are you trying to sync your Jira issues data with a custom DocType in Jira?

Unless you have a need to replicate the data in ERPNext, you might want to look into Virtual DocTypes.