Create a search form in a Custom View with Vue.js

 

Introduction

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

Entering in a search query in the input field will automatically query the displayed results to match the search term.

 

vue_search.gif

 

Implementation

Set Up the App

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

Set the Vue.js CDN Link

Obtain a CDN link for Vue.js such as the following from jsdelivr. 

This article uses version 2.6.14. Note that the above link is mainly used for development environments. Refer to the Vue.js documentation for details on proper installation for production environments.

 

Save the CDN link to the App's JavaScript and CSS settings. Refer to the Customizing with JavaScript and CSS article from the Kintone Help Center for more information on saving JavaScript links.

Create a Custom View with Vue.js Using Static Data

To get an idea of how Vue.js can be used in Kintone, try using it without interacting with Kintone data first.

Create a Custom View

Create a Custom View that displays customer names and their associated phone numbers using the HTML below.
Refer to the Create a custom view article for details on how to make a Custom View.

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

JavaScript Customization

Type the following code into a text editor. Check the view ID of your Custom View in the App's settings, and set this ID in instead of view ID 5118521. Save the code as a JavaScript file and upload it to Kintone.

Saving and updating the App will display the custom view as follows.

US_02.png

Create a Custom View with Vue.js Using Kintone Data

Edit the Custom View and the JavaScript settings with the updated codes below to retrieve and display data from records in Kintone.

Custom View

JavaScript Customization

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. 

 

The custom view with Kintone record data is shown below. 

 

US_03.png

Add a Search Form

The following updated codes add an interactive search form to the Custom View. This search form filters and updates the list according to what the user types in the input field. An input element has been added to the Custom View for the search box, and a function to filter the results has been added to the JavaScript customization.

Custom View

JavaScript Customization

The completed customization result is shown below.

 

vue_search.gif

 

In the JavaScript customization, 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.

Finally

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.

Was this article helpful?
0 out of 0 found this helpful
Do you have any questions or issues related to this article?
Please share your views with us in the Community forums!