Table Row Count Plug-in

Contents

Introduction

This article introduces the Table Row Count Plug-in, which is a plug-in version of the sample code introduced in the " Count the Number of Rows in Tables" article.
This plug-in inserts the number of rows that a table has into a number field, when a record is saved.

Plug-in file

The packaged sample plug-in zip file can be downloaded from the Releases page (External link) on GitHub.
Install the plug-in into your domain by following the plug-in installation guide on the Help page (External link) .
You can then add the plug-in to a specific App by following the plug-in adding guide on the Help page. (External link) .

Overview

To set up the plug-in, the Kintone App must have a Table and a number field in its form.
Check the Kintone Help Pages (External link) to understand how to create tables in the form.

There are two settings for this plug-in.

For the first setting, select a Table from the drop-down list. The Table names listed in the drop-down are the field code names of the Tables.

For the second setting, select a Number field from the drop-down list.

After saving the plug-in settings and updating the App, the plug-in's features will run when a record is saved, by counting the number of rows in the specified Table, and then inserting the number into the specified Number field.

File structure

The sample codes used in the plug-in are listed under the src file in our GitHub repository (External link) .
The plug-in is created with the following file structure:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

plug-in/
├── html/
│       └──── config.html
├── css/
│       ├──── 51-modern-default.css
│       └──── config.css
├── js/
│       ├──── config.js
│       ├──── desktop.js
│       └──── kintone-config-helper.js
├── image/
│       └──── clock.png
└── manifest.json

config.html (External link)

This file builds the HTML of the plug-in settings page.
Each <div> tag with the "kintoneplugin-row" class represents 1 row of related HTML elements.

The first "kintoneplugin-row" div contains the HTML of the first settings, where the user chooses which Table field to count the rows from. A select tag is stated in the HTML, that creates a drop-down field with a value of "-----". This drop-down field is later populated by the config.js file.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<div class="kintoneplugin-row">
  <label for="select-table-field" class="kintoneplugin-label">Table Rows
    <span class="kintoneplugin-require">*</span>
  </label>
  <p class="kintoneplugin-desc">Please select a table</p>
  <div class="kintoneplugin-select-outer">
    <div class="kintoneplugin-select">
      <select name="js-select-table-field" id="select-table-field" required>
          <option value="">-----</option>
      </select>
    </div>
  </div>
</div>

The second "kintoneplugin-row" div contains the HTML of the second settings, where the user chooses which Number field will hold the final count of the table rows. Similar to the first settings, a select tag is stated in the HTML that creates a drop-down field with a value of "-----". This drop-down field is also later populated by the config.js file.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<div class="kintoneplugin-row">
  <label for="select-number-field" class="kintoneplugin-label">Number field for Table row count
      <span class="kintoneplugin-require">*</span>
  </label>
  <p class="kintoneplugin-desc">Please select a number field</p>
  <div class="kintoneplugin-select-outer">
    <div class="kintoneplugin-select">
      <select name="js-select-number-field" id="select-number-field" required>
        <option value="">-----</option>
      </select>
    </div>
  </div>
</div>

Both drop-down fields in the blocks have ids allocated to them, so that they can be targeted and populated by the config.js file.

51-modern-default.css (External link)

This CSS file is provided on GitHub (External link) . This file styles HTML elements on the plug-in config page to fit in with Kintone's UI.
We recommend that you do not make changes to 51-modern-default.css. If you need to style additional elements, or over-ride the default styles, those changes should be added into config.css.

config.css (External link)

This supporting CSS file is used to style some areas of the plug-in config page that 51-modern-default.css doesn't cover.

config.js (External link)

This file uses the kintone-config-helper library to help build out form elements for the plug-in config page.
The function setDropDown is called when the plug-in config page loads.

1

setDropDown();

This function calls the KintoneConfigHelper.getFields method from the kintone-config-helper library. By passing 'SUBTABLE' and 'NUMBER' as the parameters, an array of field information of all Table fields and all Number fields are returned.

1
2
3

return KintoneConfigHelper.getFields(['SUBTABLE', 'NUMBER']).then(function(resp) {
  // ...
});

The returned array is filtered out to create lists of Table fields and Number fields, and are appended to the elements with the names js-select-table-field and js-select-number-field, which are stored in the previously defined variables $table and $number respectively.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

var $tableDropDown = $table;
var $numberDropDown = $number;
var i;
var $option;
for (i = 0; i < resp.length; i++) {
  $option = $('<option></option>');
  switch (resp[i].type) {
    case 'SUBTABLE':
      $option.attr('value', resp[i].code);
      $option.text(resp[i].code);
      $tableDropDown.append($option.clone());
      break;
    case 'NUMBER':
      $option.attr('value', resp[i].code);
      $option.text(resp[i].label);
      $numberDropDown.append($option.clone());
      break;
    default:
      break;
  }
}

If users have used this plug-in before, the CONF object should have some saved data stored inside. If so, the saved values are applied to the plug-in config page after the input form has been created.

1
2
3
4
5
6
7

// Set default values
if (CONF.table_row) {
  $tableDropDown.val(CONF.table_row);
}
if (CONF.row_count) {
  $numberDropDown.val(CONF.row_count);
}

desktop.js (External link)

This file runs on the regular pages of the App, such as the Record List and Record Details pages, but not on the plug-in config page. This file uses the sample code included in the article " Count the Number of Rows in Tables". The code used in this plug-in is mostly the same, but it's wrapped in an immediate function with the plug-in ID value as the input parameter. The plug-in ID value is needed for several JavaScript API calls, such as Kintone's getConfig API that retrieves data that was saved in the plug-in settings page using the setConfig API.

1
2

// Get plug-in configuration settings
var CONFIG = kintone.plugin.app.getConfig(PLUGIN_ID);

Data retrieved with the kintone.plugin.app.getConfig(PLUGIN_ID) method are allocated to variables.

1
2
3
4

var TABLEROWS, ROWCOUNT;
// ...
TABLEROWS = CONFIG.table_row; // Field code of the table
ROWCOUNT = CONFIG.row_count; // Field code of the number field

These variables are used to identify the correct property of the event object when the Save button is clicked (using the app.record.create.submit and app.record.edit.submit event).

1
2
3
4
5

// Count the number of rows in the table
var num_of_rows = eventobj.record[TABLEROWS].value.length;

// Set a new value in a field, listed in the event object
eventobj.record[ROWCOUNT].value = num_of_rows;

The rest of the code in desktop.js is mostly the same as the code in the " Count the Number of Rows in Tables" article.

kintone-config-helper.js (External link)

The kintone-config-helper.js file is a library that supports the development of the plug-in config page. View the Introduction to Kintone Config Helper article for more details.

manifest.json (External link)

The manifest file states the paths of the files that will be used in the plug-in. It also links to the jQuery library hosted on the Kintone CDN and the kintone-config-helper library so that it can be called on the config page.

1
2
3
4
5
6
7
8

"config": {
  "html": "html/config.html",
  "js": [
    "https://js.kintone.com/jquery/3.3.1/jquery.min.js",
    "js/config.js",
    "js/kintone-config-helper.js"
  ]
}

The array in the value of the required_params key states which settings in the plug-in config page are required. If these settings are not saved using the setConfig API, errors will be displayed on other pages of the App, stating that the plug-in settings have not been configured yet.

1
2
3
4

"required_params": [
  "table_row",
  "row_count"
]

The name, description, and homepage_url key-value pairs are labels and links displayed in the plug-in settings.

1
2
3
4
5
6
7
8
9

"name": {
  "en": "Table row count Plug-in"
},
"description": {
  "en": "This sample plug-in counts the number of rows you have in your table, and places that number in the specified field when you save your record."
},
"homepage_url": {
  "en": "https://kintone.dev/en/plugins/simple-samples/table-row-count-plug-in/"
}

Finally

Licenses

This plug-in is open sourced under the MIT License (External link) . It allows open- or closed-sourced distribution, including commercial use.
If you would like to add more functionality to the plug-in, you are welcome to clone our repository to make your own changes and redistribute it. We generally do not accept external pull requests for the sample plug-in as this repository exists for educational purposes.
If you have any questions related to building Kintone plug-ins, please post your question in the Kintone Developer Program Community Forum (External link) .

Contribution

This sample plug-in was created with the contribution of Fuji Business International (External link)
Mamoru Fujinoki - LinkedIn (External link)