kintone-framework

kintone-framework

A lightweight framework for Kintone JavaScript customizations.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

• About The Project
• Quick Start
• Installation
• Usage
  • Initialization
  • Kintone
  • API
  • UI
• Development
• Roadmap
• Contributing
• License
• Contact
• Acknowledgments

About The Project

kintone-framework (kfw) is a lightweight, modular framework designed to streamline JavaScript customizations for Kintone applications. It provides a unified API to access Kintone objects, a REST API client integration, and an encapsulated UI component library, enabling developers to build sophisticated, maintainable Kintone apps efficiently.

(back to top)

Built With

• Kintone REST API Client
• Kintone UI Component
• Rollup

(back to top)

Quick Start

(async () => {
  // Initialize
  await kfw.init();

  kintone.events.on(kfw.str.app.record.create.show, async (event) => {
    // Kintone REST API Client
    const response = await kfw.api.record.getRecords({
      app: 1,
      query: "",
    });
    console.log("Records:", response.records);

    // Kintone UI Component
    const btn = new kfw.ui.Button({
      text: "Submit",
      type: "normal",
    });

    btn.addEventListener("click", () => {
      alert("Hello world.");
    });

    // Kintone JavaScript API (app, portal, space only)
    const spaceElement = kfw.app.record.getSpaceElement("Submit_Button");
    if (spaceElement) {
      spaceElement.appendChild(btn);
    }

    return event;
  });
})();

Installation

kintone-framework supports installation via file upload, CDN, or NPM

Option 1: File

• Download the latest assets from Releases
• Extract kfw.min.js.
• Navigate to the JavaScript and CSS Customization section in Kintone App.
• Upload kfw.min.js.
• Click on Save and Update App.

Option 2: CDN

Usage of the CDN is recommended solely for development purposes. For production environments, it is strongly advised to download the kfw.min.js file directly from GitHub to mitigate any potential failures or issues associated with CDN delivery.

• Copy the CDN URL below. Change the version number if needed.
• Navigate to the JavaScript and CSS Customization section in Kintone App.
• Paste the CDN URL.
• Click on Save and Update App.

jsdelivr

https://cdn.jsdelivr.net/npm/kintone-framework@1.2.3/dist/kfw.min.js

// use a version range instead of a specific version
https://cdn.jsdelivr.net/npm/kintone-framework@1.2/dist/kfw.min.js
https://cdn.jsdelivr.net/npm/kintone-framework@1/dist/kfw.min.js

// omit the version completely to get the latest one
// you should NOT use this in production
https://cdn.jsdelivr.net/npm/kintone-framework/dist/kfw.min.js

unpkg

https://unpkg.com/kintone-framework@1.2.3/dist/kfw.min.js
https://unpkg.com/kintone-framework@1.2/dist/kfw.min.js
https://unpkg.com/kintone-framework@1/dist/kfw.min.js
https://unpkg.com/kintone-framework/dist/kfw.min.js

(back to top)

Usage

Initialization

(async () => {
  await kfw.init();

  // Your code here
})();

Kintone

Use kfw to access Kintone desktop and mobile App, Portal, and Space objects

API	Description
kfw.init()	Initializes the framework.
kfw.isMobileApp	Boolean resolved from kintone.isMobileApp()
kfw.str	Unified event string from app and mobile.app
kfw.app	Unified object from kintone.app and kintone.mobile.app
kfw.portal	Unified object from kintone.portal and kintone.mobile.portal
kfw.space	Unified object from kintone.space and kintone.mobile.space

kintone.events.on(kfw.str.app.record.create.show, (event) => {
  console.log(kfw.isMobileApp);
  console.log(kfw.str);
  console.log(kfw.app);
  console.log(kfw.portal);
  console.log(kfw.space);

  return event;
});

Refer to Kintone JavaScript API Documentation.

API

Use kfw.api to interact with Kintone REST API

const response = await kfw.api.record.getRecords({
  app: kfw.app.getId(),
  query: 'status = "In Progress"',
});
console.log(response.records);

Refer to Kintone REST API Client Documentation.

UI

Use kfw.ui to access Kintone UI Components

const btn = new kfw.ui.Button({
  text: "Click Me",
  type: "submit",
});
kfw.app.record.getSpaceElement("Submit_Button").appendChild(btn);

Refer to Kintone UI Component Documentation.

(back to top)

Development

Prerequisites

• Node.js
• NPM

Setup

• Clone the repository

git clone https://github.com/fathulfahmy/kintone-framework.git

• Install dependencies

npm install

• Build the project

npm run build

(back to top)

Roadmap

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

• Fork the project
• Create your feature branch

git checkout -b feat/amazing-feature

• Commit your changes

git commit -m 'feat: add some Amazing Feature'

• Push to the branch

git push origin feat/amazing-feature

• Open a pull request

(back to top)

Contributors

License

Distributed under the MIT License. See LICENSE for more information.

(back to top)

Contact

Fathul Fahmy - LinkedIn - [e-mail]

Project Link: https://github.com/fathulfahmy/kintone-framework

(back to top)

Acknowledgments

• Kintone Labs
• Rollup
• Release Please
• Renovate
• Best README Template

(back to top)