Show DoW Plug-in

Contents

Introduction

This article introduces the Show DoW (Day of the Week) Plug-in, which is a plug-in version of the sample code introduced in the " Show day of the week on Date fields" article.
This plug-in displays the day of the week next to the specified Date field. The text to display next to the Date field can also be modified - for example, the user can choose to show Sunday to be displayed as "Sunday" or "Sun".

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 first have a Date field in its form.

The first setting on the setting page specifies which Date field will display the day of the week next to it's Date value. The rest of the settings allows the user to choose what characters will be displayed to represent the day of the week.

The day of the week will be displayed in brackets next to the Date value, after saving the record and displaying the Record Details page.

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 "kintoneplugin-row" div represents 1 row of related HTML elements.

The first "kintoneplugin-row" div contains the HTML of the first settings, where the user chooses which Date field to display the day of the week next to. A select tag is stated, 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-date-field" class="kintoneplugin-label">Date field to display Day of Week
    <span class="kintoneplugin-require">*</span>
  </label>
  <p class="kintoneplugin-desc">Please select a Date field</p>
  <div class="kintoneplugin-select-outer">
    <div class="kintoneplugin-select">
      <select name="js-select-date-field" id="select-date-field">
        <option value="">-----</option>
      </select>
    </div>
  </div>
</div>

The second "kintoneplugin-row" div contains the HTML of the second settings, where the user chooses the text to display for each day of the week. 7 text input fields are placed in for the 7 days of the week.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div class="kintoneplugin-row">
  <label class="kintoneplugin-label">Name of days to display
    <span class="kintoneplugin-require">*</span>
  </label>
  <div class="kintoneplugin-row"></div>
    <div class="kintoneplugin-input-outer">
      <label for="sun-text" class="kintoneplugin-label">Sunday</label><br>
        <input id="sun-text" name="js-sun-text" class="kintoneplugin-input-text" type="text">
     </div>
  <div class="kintoneplugin-row"></div>
  <div class="kintoneplugin-input-outer">
    <label for="mon-text" class="kintoneplugin-label">Monday</label><br>
    <input id="mon-text" name="js-mon-text" class="kintoneplugin-input-text" type="text">
  </div>
  <div class="kintoneplugin-row"></div>
  <div class="kintoneplugin-input-outer">
    <label for="tue-text" class="kintoneplugin-label">Tuesday</label><br>
    <input id="tue-text" name="js-tue-text" class="kintoneplugin-input-text" type="text">
  </div>
  <div class="kintoneplugin-row"></div>
  <div class="kintoneplugin-input-outer">
    <label for="wed-text" class="kintoneplugin-label">Wednesday</label><br>
    <input id="wed-text" name="js-wed-text" class="kintoneplugin-input-text" type="text">
  </div>
  <div class="kintoneplugin-row"></div>
  <div class="kintoneplugin-input-outer">
    <label for="thu-text" class="kintoneplugin-label">Thursday</label><br>
    <input id="thu-text" name="js-thu-text" class="kintoneplugin-input-text" type="text">
  </div>
    <div class="kintoneplugin-row"></div>
    <div class="kintoneplugin-input-outer">
      <label for="fri-text" class="kintoneplugin-label">Friday</label><br>
      <input id="fri-text" name="js-fri-text" class="kintoneplugin-input-text" type="text">
  </div>
  <div class="kintoneplugin-row"></div>
    <div class="kintoneplugin-input-outer">
      <label for="sat-text" class="kintoneplugin-label">Saturday</label><br>
      <input id="sat-text" name="js-sat-text" class="kintoneplugin-input-text" type="text">
    </div>
 </div>

Both the drop-down field and the input text fields have ids allocated to them, so that they can be controlled 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 is used to populate the drop-down fields on the plug-in config page, and to also save the data inputted by the user.
The function setDropDown is called when the plug-in setting page loads.

1
setDropDown();

This function calls the KintoneConfigHelper.getFields method from the kintone-config-helper library.
By passing 'DATE' as the parameter, an array of field information of all Date fields is returned.

1
2
3
return KintoneConfigHelper.getFields('DATE').then(function(resp) {
  // ...
});

The returned array is used to create a list of Date fields, which is appended to the element with the name js-select-date-field, stored in the previously defined variable $date.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
var $dateDropDown = $date;
var days;
resp.forEach(function(respField) {
  var $option = $('<option></option>');
  switch (respField.type) {
    case 'DATE':
      $option.attr('value', respField.code);
      $option.text(escapeHtml(respField.label));
      $dateDropDown.append($option.clone());
      break;
    default:
      break;
  }
});

At the end of the setDropDown function, the code looks through the CONF object where any saved setting data are stored. If it's the first time for the user to use the plug-in, there are no saved values, thus no values are placed in the settings. If the user has saved any settings before in the plug-in (which is stored using Kintone's setConfig API), then those saved values (the specified Date field and the text to display for the days of the week) are inserted into the designated plug-in settings.

1
2
3
4
if (CONF.name_of_days === undefined) {
  return; // Return if config is not set.
}
days = JSON.parse(CONF.name_of_days);

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 Show day of the week on Date fields. 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
var DATE;
// ...
DATE = config.date_field; // Field code of Date field

These variables are used to identify the correct property of the event object when the record details page loads (when the app.record.detail.show event triggers).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
var record = event.record;

var weekchars = JSON.parse(CONFIG.name_of_days);
var date = new Date(record[DATE].value);
var day = weekchars[date.getUTCDay()];
var dayEl = document.createElement('span');
var dateEl = kintone.app.record.getFieldElement(DATE);

dayEl.textContent = ' (' + day + ')';
dateEl.appendChild(dayEl);

The rest of the code in desktop.js is mostly the same as the code in the Show day of the week on Date fields article.

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 they 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": [
  "date_field",
  "name_of_days"
]

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": "Show DoW Plug-in"
},
"description": {
  "en": "This sample plug-in displays the day of the week next to the Date field."
},
"homepage_url": {
  "en": "https://kintone.dev/en/plugins/simple-samples/show-dow-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)