LiveCoding: Table Utility Plug-in Series

Hello there, this repo contains all you need to follow along the Kintone Developer Program (KDP)'s LiveCoding Table Utility Plug-in Series!

Outline

• Getting Started
  • Step 1: Clone the Table-Utility-Plug-in Repo
  • Step 2: Sign Up for Kintone Developer Account (Website)
  • Step 3: Create a Kintone Subdomain (Environment)
• Starting Point
  • Plug-in directory structure
• How to Use the Table Numbering Plug-in?
• Goal Point
• What are Kintone Plug-ins? 🧩
• ⚙️ What is Kintone? ⚙️

Note: These instructions are also viewable as slides. 🎦

---

Getting Started

Step 1: Clone the Table-Utility-Plug-in Repo

git clone https://github.com/ahandsel/Table-Utility-Plug-in

We will be working off of the Table Numbering Plug-in's code inside 1_Starting_Point folder.

The code inside 2_Goal_Point folder contains the modified Plug-in with the new sorting function.

Step 2: Sign Up for Kintone Developer Account (Website)

bit.ly/KDP_signup

• ⚠ Do NOT use Safari
• ⚡Accept Cookies First
• ✅ Use Chrome & Firefox

Step 3: Create a Kintone Subdomain (Environment)

bit.ly/K_DevLic

• ⚡ Only use lowercase, numbers, & hyphens in your subdomain
• ⚠ Do not use uppercase nor special characters

---

Starting Point

We are starting off with the Table Numbering Plug-in.
This is a sample Plug-in provided by Kintone to showcase how Kintone Plug-ins work & how they are structured.

Table Numbering Plug-in automatically adds row numbers to table rows each time the record is saved. The numbers are inserted into a Number field in the Table and automatically re-number themselves when the record is edited & re-saved.

Plug-in directory structure

The Table Numbering Plug-in is located inside the 1_Starting_Point folder and is structured as the following directory tree.

src/  
├── html/  
│       └──── config.html  
|
├── css/  
│       ├──── 51-modern-default.css  
│       └──── config.css  
|
├── js/  
│       ├──── config.js  
│       └──── desktop.js  
|
├── image/  
│       └──── icon.png  
|
└── manifest.json  

---

How to Use the Table Numbering Plug-in?

To test out the Plug-in on your Kintone Subdomain, follow three steps:

Step 1

Git clone this repository:

git clone https://github.com/ahandsel/Table-Utility-Plug-in

Locate the plugin.zip file inside the 1_Starting_Point folder
Path: Table-Utility-Plug-in/1_Starting_Point/plugin.zip

Step 2

Install the Plug-in into your Kintone Subdomain from the Kintone Administration Setting
Reference: Adding/Deleting Plug-Ins (System Administration)

Step 3

Add the Plug-in to a specific Kintone App that has a Table with a Number field
Reference: Adding Plug-Ins to an App

---

Goal Point

After modifying the code as described in the Step_By_Step.md, you should get something like the code in 2_Goal_Point!

Compare your results ~

---

What are Kintone Plug-ins? 🧩

Kintone Plug-ins are packaged JavaScript customization files that can be imported into a Kintone environment & installed into any App (Web Database). Plug-ins provide an easy way for users to share & set up customizations.

• Customization files: Where the data manipulation & other customization is stored.
• Settings page files: Where the GUI settings page for end-users is stored.

For more information on Kintone Plug-ins, refer to About Kintone Plug-ins article.

---

⚙️ What is Kintone? ⚙️

Kintone is a no-code/low-code cloud platform for teams to easily & effectively share and collaborate on their data.

Add JavaScript, CSS, &/or HTML to enhance the frontend UI/UX of a Kintone App (Web Database). This can include features such as maps, buttons, and color-coding.

Read up on how to customize & develop on the Kintone Web Database platform at developer.kintone.io!