Implement a Vue.js Search Form in a Custom View
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.
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. 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.
|
|
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.
|
|
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.
|
|
JavaScript Customization
Upload the following script to the App. Replace {ViewID} with the View ID of the Custom View.
|
|
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.
|
|
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.
|
|
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.