Implement a Vue.js Search Form in a Custom View

Contents

Overview

This article introduces how to implement Vue.js into a Custom View of a Kintone App. With this customization, records can be displayed dynamically with a search form. This article specifically uses Vue 3 for the implementation. For more information on Vue.js, refer to the official website:
Vue.js (External link)

The Customization Result

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

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 of the App. For more information on Javascript and CSS settings, refer to the following article:
Customizing an App Using JavaScript and CSS (External link)

The Vue.js version used in this article is 3.4.31, and is obtained from the following CDN:
https://cdn.jsdelivr.net/npm/vue@3.4.31/dist/vue.global.min.js (External link)

Create a Custom View

In the App settings, navigate to the Views tab and click the [+] button to create a new View. For more information, refer to the following article:
Configuring Views (External link)

Give the view a name and select Custom view as the view type. Check Enable pagination and enter the following code into the HTML Code box. When complete, note the View ID and save the Custom View.

 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>

The HTML for the custom view features an input element for the search box, and an HTML table with the record field names for headers. The v-for property and data enclosed in double curly brackets are syntaxes used by Vue.js. The array of records in event.records are looped through using the v-for loop, and adds each record's data to the table.

Sample Code

Prepare the following JavaScript code in a text editor and navigate to the Kintone App's settings. Upload the file into the Upload JavaScript for PC option of the JavaScript and CSS Customization settings.

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.

sample.js

 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

(() => {
  'use strict';
  const {createApp, ref, computed} = Vue;

  const app = createApp({
    setup() {
      const records = ref([]);
      const searchText = ref(''); // Placeholder for the search box input

      // The setRecords function runs each time the search input changes
      function setRecords(newRecords) {
        records.value = newRecords;
      }

      // The computed() function returns the value of the filter function.
      // computed() automatically tracks its reactive dependencies, and updates accordingly.
      const filteredRecords = computed(() => {
        return records.value.filter(
          (record) => record.companyName.value.indexOf(searchText.value) !== -1
        );
      });

      return {
        records,
        filteredRecords,
        setRecords,
        searchText,
      };
    },
  });

  // The record.index.show event is used to mount the app, and run the setRecords function initially.
  kintone.events.on('app.record.index.show', (event) => {
    if (event.viewId !== {ViewID}) return event;
    const instance = app.mount('#app');

    instance.setRecords(event.records);
    return event;
  });
})();

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.