Implement a Vue.js Search Form in a Custom View

Contents

Overview

This article introduces how to implement Vue.js (External link) into a Custom View of Kintone.

Vue.js (External link) 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 (External link). 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.

A gif showing Kintone data represented with Vue.js. The search form is used to filter the results.

App Setup

Create the form

Create a new App with the following field settings.

Field Type Field Name Field Code Remarks
Text Company Name companyName
Link Company Telephone Number phoneNumber Type set to Telephone number

Prepare the library

Set the Vue.js library in the JavaScript and CSS settings (External link) 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 (External link).

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
<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.

An image of a table created with Vue.js, containing data stated within the JavaScript code.

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 (External link), 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.

An image of a table created withe Vue.js, containing data 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.

An image of a table and search bar created withe Vue.js. The table contains data retrieved from the Kintone App. Typing into the search bar filters the data in the table.

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 (External link) 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.