How to block Kintone App operations if the external API call returns a false response?

1

I want to call an external API before entering and displaying data in the app.

This API will take the login ID as a parameter.

If the response returns false, the app will not allow operations, and its list data will not be viewable.

If the response returns true, normal operations with the Kintone app will be allowed.

I'm using JavaScript and CSS Customization to add a JS file to check the kintone.events.on("app.record.index.show", function (event) { event }), but it's not working.

I would greatly appreciate any support from everyone.

1 Like
2

Hi there, can you share any sample codes which will help other community members to debug?

3

My code

kintone.events.on("app.record.index.show", function (event) {
  const user = kintone.getLoginUser();
  const query = "JavaScript";
  const apiUrl = `https://www.googleapis.com/books/v1/volumes?q=${query}`;
  const payload = {
    id: user.code,
  };
  fetch(apiUrl, {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
      // Authorization: "Bearer your_token_here",
    },
    // body: JSON.stringify(payload),
  })
    .then((response) => {
      if (response) {
        //When call api successful then the Kintone app will be allowed
        alert("The API call was successful");
        return true;
      }
    })
    .catch((error) => {
      // If call api failed, not show app kintone
      alert("Error: " + error.message);
      return false;
    });
  return event;
});

To my knowledge, when entering the app, the earliest event that is triggered is app.record.index.show . However, according to the documentation, this event is called after the record list page has been displayed. So how can I intervene before that to prevent the app from displaying or not showing any data at all if an external API call fails (i.e., the user is not allowed to interact with the app)? If you have a solution, could you please provide an example? Thank you very much.

image
image1197×578 18.6 KB

thank you, will-yama

4

Hello @Hoang_Viet ,

Since app.record.index.show is indeed the earliest event when entering apps, you can initially hide records by manipulating the DOM and then show the content based on the response. It's important to note that Kintone allows developers to customize its UI through JavaScript. However, there can be cases where regressions occur after Kintone updates.

This isn't perfect, but here's a sample script that demonstrates how to hide/show content by pressing buttons in the header:

(function() {
    'use strict';

    // Function to hide the app content
    function hideAppContent() {
        const appContent = document.querySelector('.contents-gaia');
        if (appContent) {
            appContent.style.display = 'none';
        }
    }

    // Function to show the app content
    function showAppContent() {
        const appContent = document.querySelector('.contents-gaia');
        if (appContent) {
            appContent.style.display = 'block';
        }
    }

    // Event triggered when the app's index page is displayed
    kintone.events.on('app.record.index.show', function(event) {
        // Hide the app content when the index page is displayed
        hideAppContent();

        // Create a button to show the app content
        const showButton = document.createElement('button');
        showButton.textContent = 'Show Content';
        showButton.onclick = showAppContent;

        // Create a button to hide the app content
        const hideButton = document.createElement('button');
        hideButton.textContent = 'Hide Content';
        hideButton.onclick = hideAppContent;

        // Append the buttons to the Kintone header menu space
        const headerMenuSpace = kintone.app.getHeaderMenuSpaceElement();
        headerMenuSpace.appendChild(showButton);
        headerMenuSpace.appendChild(hideButton);

        return event;
    });

})();
2 Likes