Overview

This article introduces how to implement Vue.js into a Custom View of Kintone.

Vue.js is a JavaScript framework used to build user interfaces. One of the features of Vue.js is two-way data binding via the v-model directive . The v-model directive allows changes to the UI or data model to be displayed automatically if there is a change in either one. In vanilla JavaScript, an event must be set that when triggered, executes a function to change the UI or data model. Vue.js's two-way data binding instead automatically updates the UI if there is a change to the data model, or updates the data model if there is a change in the UI. This tutorial will explain how to use Vue.js with a Kintone Custom View to create a dynamically updated search form.

The Customization Result

Kintone data is displayed in the UI with Vue.js. The search form can be used to filter the displayed data.

App Setup

Create the form

Create a new App with the following field settings.

Prepare the library

Set the Vue.js library in the JavaScript and CSS settings of the App. The Vue.js version used in this article is 2.6.14, and is obtained from https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js .

Vue.js Custom View Examples

Example using static data and no search bar

Example Overview

The data used in this example is defined in the JavaScript code. A table is created with Vue.js. No search bar is added in with this example.

Custom View HTML

Enter the following HTML code into the HTML Code settings of the Custom View.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<div id="app">
  <table border="1px">
    <tr>
      <th>Customer</th><th>Phone</th>
    </tr>
    <tr v-for="customer in customers">
      <td>{{customer.companyName}}</td><td>{{customer.phoneNumber}}</td>
    </tr>
  </table>
</div>

The v-for property and data enclosed in double curly brackets are syntaxes used by Vue.js.

JavaScript Customization

Upload the following script to the App. Replace {ViewID} with the View ID of the Custom View. The View ID can be found in the Custom View settings.

 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

(function($) {
  'use strict';
  // Create a new Vue instance
  var vm = new Vue({
    data: {
      customers: []
    },
  });

  kintone.events.on('app.record.index.show', function(event) {
    if (event.viewId !== {ViewID}) return event; // Replace the ID number with the ID of the created custom view
    var customers = [
      {companyName: 'Company A', phoneNumber: '123-XXX-0000'},
      {companyName: 'Company B', phoneNumber: '123-XXX-1111'},
      {companyName: 'Company C', phoneNumber: '123-XXX-2222'},
      {companyName: 'Company D', phoneNumber: '123-XXX-3333'}
    ];
    // Mount the Vue instance on the HTML element with ID #app in the custom view
    vm.$mount('#app');

    // Set the data
    Vue.set(vm, 'customers', customers);
    return event;
  });
})();

Test the custom view

After saving the view and updating the App, navigate to the Custom View. The following data should be displayed.

Example using Kintone data and no search bar

Example Overview

The data used in this example is retrieved from the Kintone App. A table is created with Vue.js. No search bar is added in with this example.

Custom View HTML

Enter the following HTML code into the HTML Code settings of the Custom View.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<div id="app">
  <table border="1px">
   <tr>
     <th>Customer</th><th>Phone</th>
   </tr>
   <tr v-for="record in records">
     <td>{{record.companyName.value}}</td><td>{{record.phoneNumber.value}}</td>
   </tr>
  </table>
</div>

JavaScript Customization

Upload the following script to the App. Replace {ViewID} with the View ID of the Custom View.

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

(function() {
  'use strict';
  var vm = new Vue({
    data: {
      records: []
    },
  });

  kintone.events.on('app.record.index.show', function(event) {
    if (event.viewId !== {ViewID}) return event; // Replace the ID number with the ID of the created custom view
    var records = event.records;

    // Mount the Vue instance on the HTML element with ID #app in the custom view
    vm.$mount('#app');

    // Set the data
    Vue.set(vm, 'records', records); // Use the array of Kintone records as is
    return event;
  });
})();

The array of records in event.records can be set as is to the Vue instance. The for loop is handled in the HTML with v-for , and allows the JavaScript code to be simpler because a lengthy JavaScript for loop is unnecessary.

Test the custom view

After saving the view and updating the App, navigate to the Custom View. The data in the Vue.js table is retrieved from the Kintone App.

Example using Kintone data and a search bar

Example Overview

The data used in this example is defined in the JavaScript code. A table is created with Vue.js. An interactive search form is added in this example. This search form filters and updates the list according to what the user types in the input field.

Custom View HTML

Enter the following HTML code into the HTML Code settings of the Custom View. An input element has been added to the Custom View for the search box.

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

<div id="app">
  Search <input type="text" v-model="searchText" placeholder="Search for">
  <table border="1px">
    <tr>
      <th>Customer</th>
      <th>Phone</th>
    </tr>
    <tr v-for="record in filteredRecords">
      <td>{{record.companyName.value}}</td>
      <td>{{record.phoneNumber.value}}</td>
    </tr>
  </table>
</div>

JavaScript Customization

Upload the following script to the App. A function to filter the results has been added to the JavaScript customization. Replace {ViewID} with the View ID of the Custom View.

 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

(function() {
  'use strict';
  var vm = new Vue({
    data: {
      searchText: '', // Add a section for search text to the data object
      records: [],
    },
    computed: {
      // Create a function to filter
      filteredRecords: function() {
        var self = this;
        return self.records.filter(function(record) {
          return record.companyName.value.indexOf(self.searchText) !== -1;
        });
      }
    },
  });

  kintone.events.on('app.record.index.show', function(event) {
    if (event.viewId !== {ViewID}) return event; // Replace the ID number with the ID of the created custom view
    var records = event.records;

    // Mount the Vue instance on the HTML element with ID #app in the custom view
    vm.$mount('#app');

    // Set the data
    Vue.set(vm, 'records', records);
    return event;
  });
})();

Test the custom view

The completed customization result is shown below.

The filteredRecords function has been added to the computed properties of the Vue instance. The Custom View HTML code has been modified to display the results of the filteredRecords function. For more information on computed properties, refer to the Computed Properties and Watchers article of the Vue.js documentation.

While the default search function of Kintone only accepts full words, implementing this customization with Vue.js allows the user to search incrementally.

Reference

Vue.js is suitable to easily create customized forms, displays, and other UI/UX dependent features in Kintone. Additionally, Computed properties and Components can be utilized to fulfill needs that Kintone may not be able to do by default, such as live updating of displayed data. There are also many other features of Vue.js that can be explored to create highly functional Kintone customizations. Try some out to see all the possibilities of Vue.js and Kintone.

• Vue.js website
• Vue.js: Computed properties
• Vue.js: Components
• Vue.js: Examples