Kintool

A toolkit for Kintone JavaScript customization
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact
8. Acknowledgments

About The Project

Kintool is a development toolkit for Kintone JavaScript customization. It provides a cross-platform JavaScript API, an integrated UI Component library, and a REST API Client.

(back to top)

Built With

• Kintone REST API Client
• Kintone UI Component
• Rollup

(back to top)

Getting Started

// Initialization
(async () => {
  await kintool.init();

  // REST API Client
  const getDropdownItems = async () => {
    const response = await kintool.api.record.getRecords({
      app: "1",
      query: 'Account_Status in ("Active")',
    });
    const items = response.records.map((rec) => rec.Name.value);
    return items;
  };

  // JavaScript API
  kintool.events.on("app.record.create.show", async (event) => {
    // UI Component
    const space = kintool.app.record.getSpaceElement("Name_Space");
    const dropdown = new kintool.ui.Dropdown({
      label: "Name",
      items: await getDropdownItems(),
    });

    space.appendChild(dropdown);

    return event;
  });
})();

Prerequisites

• Kintone App

Installation

Option 1: File Upload

1. Download the latest assets kintool.zip from Releases.
2. Go to JavaScript and CSS Customization in Kintone App settings.
3. Upload kintool.iife.min.js.
4. Click on Save and Update App.

Option 2: CDN URL

CDN is not recommended for production environment. Please download kintool.iife.min.js from GitHub Releases to prevent any failures and problems associated with CDN.

1. Copy the CDN URL.
2. Go to JavaScript and CSS Customization in Kintone App settings.
3. Paste the CDN URL.
4. Click on Save and Update App.

jsDelivr

https://cdn.jsdelivr.net/npm/[email protected]/dist/kintool.iife.min.js
https://cdn.jsdelivr.net/npm/[email protected]/dist/kintool.iife.min.js
https://cdn.jsdelivr.net/npm/kintool@x/dist/kintool.iife.min.js
https://cdn.jsdelivr.net/npm/kintool/dist/kintool.iife.min.js

UNPKG

https://unpkg.com/[email protected]/dist/kintool.iife.min.js
https://unpkg.com/[email protected]/dist/kintool.iife.min.js
https://unpkg.com/kintool@x/dist/kintool.iife.min.js
https://unpkg.com/kintool/dist/kintool.iife.min.js

Option 3: NPM Package

1. Install package.

npm install kintool
pnpm add kintool
yarn add kintool

2. Import package.

import kintool from "kintool";

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

  kintool.events.on("app.record.create.show", (event) => {
    return event;
  });
})();

(back to top)

Usage

JavaScript API

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

  // Access Kintone JavaScript API with kintool
  kintool.events.on("app.record.create.show", (event) => {
    console.log(kintool.app);
    console.log(kintool.space);
    console.log(kintool.portal);
    console.log(kintool.isMobileApp);
    console.log(kintool.events.on);
    console.log(kintool.events.off);

    return event;
  });
})();

API	Description
kintool.init({})	Initialize kintool with optional configuration
kintool.events.on(type, handler)	Resolves to app or mobile.app
kintool.events.off(type, handler)	Resolves to app or mobile.app
kintool.app	Resolves to kintone.app or kintone.mobile.app
kintool.space	Resolves to kintone.space or kintone.mobile.space
kintool.portal	Resolves to kintone.portal or kintone.mobile.portal
kintool.isMobileApp	Boolean indicating mobile environment

Please refer to Kintone JavaScript API Docs

UI Component

// Access Kintone UI Component with kintool.ui
const dropdown = new kintool.ui.Dropdown({
  label: "Name",
  items: users,
});
console.log(dropdown);

Please refer to Kintone UI Component Docs

REST API Client

// Access Kintone REST API Client with kintool.api
const response = await kintool.api.record.getRecords({
  app: "1",
  query: 'Account_Status in ("Active")',
});
console.log(response);

Please refer to Kintone REST API Client References

Configuration

await kintool.init({
  api: {
    // Kintone REST API Client Parameters
    baseUrl: "https://example.kintone.com",
  },
});

Please refer to Kintone REST API Client Parameters

(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!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feat/amazing-feature)
3. Commit your Changes (git commit -m 'feat: add some amazing feature')
4. Push to the Branch (git push origin feat/amazing-feature)
5. Open a Pull Request

(back to top)

Top contributors:

License

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

(back to top)

Contact

Fathul Fahmy - LinkedIn - [email protected]

Project Link: https://github.com/fathulfahmy/kintool

(back to top)

Acknowledgments

• Kintone Labs
• Release Please

(back to top)