Kintone Technical Training - JavaScript API

Here is the JavaScript API study content of Kintone Technical Training.
If you want to access the reference link in it directly, please download this PDF file.
We hope you enjoy Kintone technical training journey!

[ Video ]
https://www.youtube.com/watch?v=DUfitMPFMj0

[ Programs & App Template ]
https://github.com/Cybozu-GTA/kintone-technical-training-materials

Transcript

1. Kintone Technical Training - JavaScript API 1 Cybozu, Inc.
2. 2 Notice • This material was created based on the September 2020 version of Kintone. • We may change our contents without prior notice.
3. 3 Before we start… • You have a Kintone Account with Kintone administrator's privilege • You have some knowledges with at least 1 programming languages • You have Google Chrome and a code editor installed. • You downloaded the App Template (Company List, Sales Deals and Contact Log) and imported it. • If you completed “Kintone Technical Training – REST API” in advance, you could also use the apps you created. Lookup/Action Related Records Lookup Self Related Records Self Related Records Company List Contact Log Sales Deals
4. 4 Useful Resources • Kintone Developer Program – API Docs • https://kintone.dev/en/docs/ • MDN web docs • https://developer.mozilla.org/en-US/ • Google Chrome DevTools • https://developers.google.com/web/tools/chrome-devtools • https://developers.google.com/web/tools/chrome-devtools/javascript
5. 5 Agenda • Fundamental JavaScript • Kintone JavaScript API • Kintone JavaScript Events • Get/Set Data • Kintone REST API Request from JavaScript • Quick Explanation - Promise • Basic JavaScript structure in Kintone with ES5 • Beginning Hands-on #1, #2, #3
6. 6 Fundamental JavaScript
7. 7 Fundamentals Concepts of JavaScript üEvent-driven, asynchronous programming üInteract with HTML and CSS üOther common programming features • Data processing • API • Browser API: DOM, Geolocation, Canvas & WebGL, WebRTC, etc. • 3rd Party API: Google Maps, OpenStreetMap, etc. https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics
8. 8 Event-driven, Asynchronous Coding • The DOM is loaded • A user clicks an element or scrolls the page • A user types keyboard • Asynchronous request that finishes fetching There are a lot of different type of events. You can respond to any event using an Event Handler/Listener, which is a function that’s called when an event occurs. https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener https://developer.mozilla.org/en-US/docs/Web/Events
9. <input type="text" id="input" value=""/> <script> function changeHandler(event) { // When input value is changed ... console.log(event.target.value); } var input = document.getElementById('input'); input.addEventListener('change', changeHandler); </script> 9 Define Event Handler/Listener #1 – addEventListener Change event example for text input Handler function HTML view Console Input texts are shown in the console when the value in input element is changed Handler function Event type Event attaching description Event target “Handler function is executed when Event type in Event target is triggered”
10. <input type="text" id="input" value=""/> <script> var input = document.getElementById('input'); input.addEventListener('change', function(event) { // When input value is changed ... console.log(event.target.value); }); </script> 10 Define Event Handler/Listener #2 – addEventListener Handler function can be described as a callback function with inline Change event example for text input HTML view Console Input texts are shown in the console when the value in input element is changed
11. 11 Define Event Handler/Listener #3 – Inline Event Handler <input type="text" id="input" onchange="changeHandler(this.value)" value="" /> <script> function changeHandler(value) { // When input value is changed ... console.log(value); } </script> HTML view Console Change event example for text input
12. 12 Define Event Handler/Listener #3 – DOM On-event Handler Load event example for window window.onload = function() { // When window is loaded... console.log('Window is open'); }; var xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.onload = function (success) { // When asynchronous request is succeeded... if (xhr.status === 200) { console.log(xhr.responseText); } }; xhr.onerror = function (error) { // When asynchronous request failed... console.log(error); }; Load/Error event example for XHR This style is a kind of shorthand notation of addEventListener.
13. 13 Kintone JavaScript API
14. 14 Kintone JavaScript API Overview • Kintone JavaScript Events • Get/Set Data • Kintone REST API Request from JavaScript
15. 15 Kintone JavaScript Events
16. 16 Conventional JavaScript Events vs Kintone Events Conventional JavaScript Kintone Event target ü Views ü Elements on HTML you build ü Views ü Record ü Field by Kintone built-in Event type ü Click ü Change ü Load etc. ü app.record.index.show ü app.record.change.text_field ü app.record.create.submit etc. Event description addEventListener() kintone.events.on()
17. 17 Kintone JavaScript Events https://kintone.dev/en/docs/kintone/js-api/ Triggered Timing Event Type
18. 18 Calculate and Set Age in Conventional JavaScript <input type="date" id="date" /> <input type="number" id="age" placeholder="current age"/> <script> function calcAge(date) { date = date.split('-'); var year = Number(date[0]); var month = Number(date[1]); var day = Number(date[2]); var birthdate = year * 10000 + month * 100 + day; var today = new Date(); var targetdate = today.getFullYear() * 10000 + (today.getMonth() + 1) * 100 + today.getDate(); return (Math.floor((targetdate - birthdate) / 10000)); } document.getElementById('date').addEventListener('change', function (event) { // When input value is changed ... console.log(event.target.value); var date = event.target.value; var age = calcAge(date); document.getElementById('age').value = age; // Set age into input#age element }); </script>
19. function calcAge(date) { date = date.split('-'); var year = Number(date[0]); var month = Number(date[1]); var day = Number(date[2]); var birthdate = year * 10000 + month * 100 + day; var today = new Date(); var targetdate = today.getFullYear() * 10000 + (today.getMonth() + 1) * 100 + today.getDate(); return (Math.floor((targetdate - birthdate) / 10000)); } kintone.events.on('app.record.create.change.Birthdate', function(event) { // When Birthdate field is changed ... console.log(event); var date = event.record.Birthdate.value; var age = calcAge(date); event.record.Age.value = age; // Set age into Age field return event; // Don’t forget to return event object }); 19 Calculate and Set Age in Kintone
20. 20 Conventional JavaScript Event vs Kintone Event for Calculating Age Example <input type="date" id="date" /> <input type="number" id="age" placeholder="current age"/> <script> document.getElementById('date').addEventListener('change', function (event) { // When input value is changed ... console.log(event); var date = event.target.value; var age = calcAge(date); document.getElementById('age').value = age; // Set age into input#age element }); </script> kintone.events.on('app.record.create.change.Birthdate', function(event) { // When Birthdate field is changed ... console.log(event); var date = event.record.Birthdate.value; var age = calcAge(date); event.record.Age.value = age; // Set age into Age field return event; // Don’t forget to return event object }); Conventional JavaScript Kintone Handler function Event type Event attaching description Event target
21. Define Kintone JavaScript Events kintone.events.on(type, handler); handler function should be written to return event object. function(event) { doSomeSyncProcessing(); return event; } What event object in Kintone can do ü Get/Update field values: event.record.field_code.value ü Enable/Disable fields: event.record.field_code.disabled ü Show error message on each field : event.record.field_code.error ü Show error message on record: event.error etc. Event object has general features as bellow although it has different properties according to event type event.record.Age.disabled = true; event.record.Details.error = 'Required when you discount.'; 21
22. 22 Define Kintone JavaScript Events kintone.events.on(type, handler); Synchronous Asynchronous for all events except change Asynchronous for change events function(event) { doSomeSyncProcessing(); return event; } function(event) { return somePromiseObject.then(function(response) { doSomeSyncProcessing(); return event; }).catch(function(error) { console.log(error); var message = 'Error Occurred'; event.error = event.error ? event.error + message : message; return event; }); } function(event) { somePromiseObject.then(function(response) { var record = kintone.app.record.get().record; doSomeSyncProcessing(); kintone.app.record.set({record: record}); }).catch(function(error) { console.log(error); var message = 'Error Occurred'; alert(message); }); return event; }
23. 23 Get/Set Data
24. 24 Get/Set Data • Get app ID: kintone.app.getId() • Get record ID: kintone.app.record.getId() • Get record values: kintone.app.record.get() • Set record values: kintone.app.record.set(recordObj) etc. https://kintone.dev/en/docs/kintone/js-api/
25. 25 Get/Set Data – Example in Console To open Google Chrome DevTools Mac: Command + Option + I Win: Ctrl + Shift + I
26. 26 Kintone REST API Request from JavaScript
27. 27 Kintone REST API Request – Example in Kintone JavaScript Event https://kintone.dev/en/docs/kintone/js-api/other/kintone-rest-api-request/#kintone-rest-api-request kintone.api(pathOrUrl, method, params, opt_callback, opt_errback); Parameter Value Required Description pathOrUrl String Yes The path of the Kintone REST API, or the URL obtained with kintone.api.url. method String Yes The HTTP method. Specify one of the following: GET / POST / PUT / DELETE. params Object Yes The parameters to be used with the API, specified as an object. opt_callback Function Optional The callback function called when the API succeeds. opt_errback Function Optional The callback function called when the API fails. Request Parameters Response A kintone.Promise object will be returned if the callback parameter is ignored. Otherwise, there will be no response.
28. 28 Kintone REST API Request – Example in Kintone JavaScript Event kintone.events.on('app.record.index.show', function(event) { kintone.api(kintone.api.url('/k/v1/records', true), 'GET', { app: kintone.app.getId() }, function(response){ console.log(response); }, function(error){ console.log(error); }); return event; }); kintone.events.on('app.record.index.show', function(event) { return kintone.api(kintone.api.url('/k/v1/records', true), 'GET', { app: kintone.app.getId() }).then(function(response){ console.log(response); return event; }).catch(function(error){ console.log(error); return event; }); }); Asynchronous operation with simple callback Asynchronous operation with Promise https://kintone.dev/en/docs/kintone/js-api/other/kintone-rest-api-request/#kintone-rest-api-request
29. Kintone REST API Request – Example in Console
30. 30 Quick Explanation - Promise
31. 31 Quick Explanation - Promise ü Promise object Ø This lets asynchronous methods return values like synchronous methods Ø This contains a fulfilled or rejected returning value Ø Promise is in one of these states Ø pending: initial state, neither fulfilled nor rejected Ø fulfilled: meaning that the operation completed successfully Ø rejected: meaning that the operation failed Ø Method chaining with .then() and .catch() Ø That is also called “Thenable object” ü How to create Promise object Ø new Promise() Ø Promise.resolve(), Promise.reject() Ø kintone.api(), kintone.proxy() [limited in Kintone] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise new Promise(function(resolve, reject) { kintone.api(url, method, body, function(response) { // fulfilled returning value resolve(response); }, function(error) { // rejected returning value reject(error); } ); }); Equivalent kintone.Promise instead of native Promise in the browser cover IE11. kintone.Promise is the polyfill of Promise in Kintone.
32. 32 Quick Explanation - Promise ü How to retrieve a returning value https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise PromiseObject .then(function(fulfilledReturningValue) { // You can get and use a fulfilledReturningValue in this block #1 }) .catch(function(rejectedReturningValue) { // You can get and use a rejectedReturningValue in this block #2 }); after the PromiseObject operation is completed. When the operation contained in PromiseObject fulfilledReturningValue rejectedReturningValue succeeds fails , you can retrieve and use a in block #1 block #2
33. 33 Quick Explanation - Promise ü How to create the method chaining of Promise https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise PromiseObject1 .then(function(response1) { return PromiseObject2; }) .then(function(response2) { return PromiseObject3; }) .then(function(response3) { return PromiseObject4; }) ... .then(function(responseSecondToLast) { return PromiseObjectLast; }); Promise object chained with .then() becomes a new Promise object Totally this Promise object has a returning value from PromiseObjectLast when all chained Promise objects are fulfilled.
34. PromiseObject1 .then(function(response1) { return PromiseObject2; }) .then(function(response2) { return PromiseObject3; }) .then(function(response3) { return PromiseObject4; }) ... .then(function(responseSecondToLast) { return PromiseObjectLast; }); 34 Quick Explanation - Promise https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise ü Points to be careful of Ø Prevent the chain from breaking Ø Don’t miss several patterns of return Promise object Function returning Promise object var promise = function() { return PromiseObject; }; var promise = function() { return PromiseObject1 .then(function(response1) { return PromiseObject2; }); };
35. 35 Ref. 3 Patterns about The Retrieval of The Result Value from Object/Function // Synchronous operation var sum1 = function (v1, v2) { var result = v1 + v2; return result; }; // Asynchronous operation with simple callback var sum2 = function (v1, v2, callback) { var result = v1 + v2; return callback(result); }; // Asynchronous operation with Promise var sum3 = function (v1, v2) { var result = v1 + v2; return Promise.resolve(result); }; var result1 = sum1(1, 2); alert(result1); sum2(3, 4, function (result2) { alert(result2); }); sum3(5, 6).then(function (result3) { alert(result3); }); Definitions Retrievals
36. 36 Basic JavaScript structure in Kintone with ES5
37. 37 Write JavaScript with ES5 (function(){ 'use strict'; var handler = function(event) { console.log(event); return event; } kintone.events.on('app.record.index.show', handler); })(); IIFE (Immediately Invoked Function Expression) prevents polluting global scope https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode https://developer.mozilla.org/en-US/docs/Glossary/IIFE Strict mode eliminates some JavaScript silent errors, etc. You can write JavaScript here ü Declare variables ü Declare functions ü Define events https://kintone.dev/en/legal/javascript-coding-guidelines/ UTF-8 without BOM
38. 38 Upload JavaScript Files #1 Click JavaScript and CSS Customization on App Settings tab in app setting view #2 Add files or links https://get.kintone.help/k/en/user/app_settings/js_customize.html
39. 39 Upload JavaScript Files #3 Click Save #4 Click Update App #5 Click OK
40. 40 Beginning Hands-on #1
41. 41 Preparation – Conditional Formatting of Sales Deals Name Field Code Type Attachment Attachment Attachment Company Name [Search] Company_Name_Search Text Contact Name Contact_Name Text Deal Name Deal_Name Text Deal Size Deal_Size Number Expected Close Date Expected_Close_Date Date Forecast Value Forecast_Value Calculated Note Note Text area Other Related Records Other_Related_Records Related records Probability Probability Number Rep Rep User selection Sales Stage Sales_Stage Drop-down Signed Contract Value Signed_Contract_Value Number
42. Requirement to Customize – Conditional Formatting 42 Change the background color in the field according to the value of Sales Stage Sales Deals Sales Stage Color Qualification #FED101 Evaluation #BFFF50 Negotiation #34FFF5 Closed-Won #F9B1FB Contract Closed-Lost #C6C3C3
43. Requirement to Customize – Conditional Formatting 43 Detail view List view Background colors has been changed
44. Implementation Planning – Conditional Formatting 44 Change the background color of the field according to the value of Sales Stage Sales Deals Sales Stage Color Qualification #FED101 Evaluation #BFFF50 Negotiation #34FFF5 Closed-Won #F9B1FB Contract Closed-Lost #C6C3C3 • Events • app.record.detail.show • app.record.index.show • Operation • Change the background color of the field
45. (function() { 'use strict’; var changeSalesStageFieldColor = function(params) { // add operation here }; kintone.events.on('app.record.detail.show', function(event) { // add operation here return event; }); kintone.events.on('app.record.index.show', function(event) { // add operation here return event; }); })(); 45 Coding – Change the Background Color • Declare function • Define events https://kintone.dev/en/docs/kintone/js-api/events/record-details-event/#onload-event-desktop https://kintone.dev/en/docs/kintone/js-api/events/record-list-event/#onload-event-desktop debugChangeBgColor.js GitHub link Debug Code
46. 46 Testing – Change the Background Color Open Google Chrome DevTools after uploading changeBgColor.js to Sales Deals. And see some records. Background color has been changed Detail view List view
47. 47 Coding – Change the Background Color Events kintone.events.on('app.record.detail.show', function(event) { var record = event.record; var salesStage = record.Sales_Stage.value; var salesStageElement = kintone.app.record.getFieldElement('Sales_Stage'); changeSalesStageFieldColor({element: salesStageElement, value: salesStage}); return event; }); kintone.events.on('app.record.index.show', function(event) { var records = event.records; var salesStageElements = kintone.app.getFieldElements('Sales_Stage'); for (var i = 0; i < records.length; i++) { var record = records[i]; var salesStage = record.Sales_Stage.value; var salesStageElement = elements[i]; changeSalesStageFieldColor({element: salesStageElement, value: salesStage}); } return event; }); Change background color on a single record in the detail view Change background color on all records in the list view Answer Code GitHub link
48. 48 Coding – Change the Background Color Function var changeSalesStageFieldColor = function(params) { var element = params.element; var value = params.value; var backgroundColor; var fontWeight; switch (value) { case 'Qualification': backgroundColor = '#FED101'; break; case 'Evaluation': backgroundColor = '#BFFF50'; break; case 'Negotiation': backgroundColor = '#34FFF5'; break; case 'Closed-Won': case 'Contract': backgroundColor = '#F9B1FB'; fontWeight = 'bold'; break; case 'Closed-Lost': backgroundColor = '#C6C3C3'; break; default: break; } if (backgroundColor) { element.style.backgroundColor = backgroundColor; } if (fontWeight) { element.style.fontWeight = fontWeight; } }; Change the background color of the field according to the value of Sales Stage field Answer Code GitHub link
49. 49 Beginning Hands-on #2
50. Requirement to Customize – Validate and Auto-update Data 50 Update Probability when you submit a record according to the value of Sales Stage Sales Deals Sales Stage Probability Closed-Lost 0 Closed-Won 100 Contract
51. Implementation Planning – Validate and Auto-update Data 51 Update Probability according to the value of Sales Stage Sales Deals Sales Stage Probability Closed-Lost 0 Closed-Won 100 Contract • Events • app.record.create.submit • app.record.edit.submit • app.record.index.edit.submit • Operation • Update after confirming
52. 52 Coding – Update Probability according to Sales Stage • Declare handler • Define events https://kintone.dev/en/docs/kintone/js-api/events/record-create-event/#save-submit-event https://kintone.dev/en/docs/kintone/js-api/events/record-edit-event/#save-submit-event https://kintone.dev/en/docs/kintone/js-api/events/record-list-event/#save-submit-event (function() { 'use strict'; var handler = function(event) { console.log(event); debugger; // Add operation here return event; }; kintone.events.on([ 'app.record.create.submit', 'app.record.edit.submit', 'app.record.index.edit.submit' ], handler); })(); debugUpdateProbability.js Let’s see the content of event object. Debug Code GitHub link
53. 53 Coding – Update Probability Paused by debbuger or breakpoints Shown by console.log You can also put breakpoints to pause Open Google Chrome DevTools after uploading debugUpdateProbability.js to Sales Deals. And save a new record.
54. 54 var handler = function(event) { var record = event.record; var salesStage = record.Sales_Stage.value; var probability = Number(record.Probability.value); var newProbability = null; if (salesStage === 'Closed-Lost') { newProbability = 0; } else if (salesStage === 'Closed-Won' || salesStage === 'Contract') { newProbability = 100; } if ( newProbability !== null && newProbability !== probability && confirm('Update Probability: ' + newProbability + '% since Sales Stage is "' + salesStage + '"?') ) { record.Probability.value = newProbability; } console.log(event); debugger; return event; }; Coding – Update Probability Handler OK Cancel if is clicked. true false A confirm method returns
55. 55 Testing – Update Probability Open Google Chrome DevTools after uploading updateProbability.js to Sales Deals. And save a new record again. The value, 100 is set in the event object Actual Probability value won’t be updated until return event is processed Click OK
56. 56 Testing – Update Probability The actual Probability value has been updated after saving a record. Actual Probability value has been updated
57. (function() { 'use strict’; var handler = function(event) { var record = event.record; var salesStage = record.Sales_Stage.value; var probability = Number(record.Probability.value); var newProbability = null; if (salesStage === 'Closed-Lost') { newProbability = 0; } else if (salesStage === 'Closed-Won' || salesStage === 'Contract') { newProbability = 100; } if ( newProbability !== null && newProbability !== probability && confirm('Update Probability: ' + newProbability + '% since Sales Stage is "' + salesStage + '"?') ) { record.Probability.value = newProbability; } return event; }; kintone.events.on([ 'app.record.create.submit', 'app.record.edit.submit', 'app.record.index.edit.submit' ], handler); })(); 57 Coding – Update Probability updateProbability.js Declare a handler Define events Answer Code GitHub link
58. 58 Beginning Hands-on #3
59. Name Field Code Type #1 Last Contact Date Last_Contact_Date Date 59 Preparation – Add a New Field to Company List App #1 Don’t forget to Update App Create a sample record
60. Requirement to Customize – Update Date 60 Company List Contact Log Update Last Contact Date automatically when Contact Log is saved
61. Implementation Planning – Update Date 61 Company List Contact Log Update Last Contact Date automatically when Contact Log is saved • Events • app.record.create.submit • app.record.edit.submit • app.record.index.edit.submit • Operations • REST API • PUT/record • Last Contact Date
62. 62 Coding – Update Date • Declare handler • Define events (function() { 'use strict'; var handler = function(event) { console.log(event); debugger; // Add operation here return event; }; kintone.events.on([ 'app.record.create.submit', 'app.record.edit.submit', 'app.record.index.edit.submit' ], handler); })(); debugUpdateDate.js Let’s see the content of event object. Debug Code GitHub link https://kintone.dev/en/docs/kintone/js-api/events/record-create-event/#save-submit-event https://kintone.dev/en/docs/kintone/js-api/events/record-edit-event/#save-submit-event https://kintone.dev/en/docs/kintone/js-api/events/record-list-event/#save-submit-event
63. 63 Coding – Update Date Paused by debbuger or breakpoints Shown by console.log You can also put breakpoints to pause Open Google Chrome DevTools after uploading debugUpdateDate.js to Contact Log. And save a new record.
64. 64 Coding – Update Date var handler = function(event) { console.log(event); debugger; // Add operation here return event; }; Handler var COMPANY_LIST_APP_ID = your_company_list_app_id; var companyName = ''; var date = ''; kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', { app: COMPANY_LIST_APP_ID, updateKey: { field: 'Company_Name', value: companyName }, record: { Last_Contact_Date : { value: date } } }).then(function(response) { return response; }); Snippet - REST API request for updating date https://kintone.dev/en/docs/kintone/rest-api/records/update-record/ Hint
65. 65 Coding – Update Date var COMPANY_LIST_APP_ID = your_company_list_app_id; var handler = function(event) { var record = event.record; var companyName = record.Company_Name.value; var date = record.Date.value; kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', { app: COMPANY_LIST_APP_ID, updateKey: { field: 'Company_Name', value: companyName }, record: { Last_Contact_Date : { value: date } } }).then(function(response) { return response; }); return event; }; Asynchronous processing block (Promise object) Return event object The event object should be returned in Kintone event handler. ü The next line will be executed before asynchronous processing has not been finished ü You should put the code in then block when you want to execute some processing
66. var COMPANY_LIST_APP_ID = your_company_list_app_id; var handler = function(event) { var record = event.record; var companyName = record.Company_Name.value; var date = record.Date.value; return kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', { app: COMPANY_LIST_APP_ID, updateKey: { field: 'Company_Name', value: companyName }, record: { Last_Contact_Date : { value: date } } }).then(function(response) { console.log(response); return event; }).catch(function(error) { console.log(error); var message = 'Error Occurred'; event.error = event.error ? event.error + message : message; return event; }); }; 66 Coding – Update Date Returning event object You should make the event object return at the end of Promise object. Promise object This Promise object returns event object. That means event object is returned in handler function through Promise object.
67. 67 Coding – Update Date (function() { 'use strict'; var COMPANY_LIST_APP_ID = your_company_list_app_id; var handler = function(event) { console.log(event); var record = event.record; var companyName = record.Company_Name.value; var date = record.Date.value; return kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', { app: COMPANY_LIST_APP_ID, updateKey: { field: 'Company_Name', value: companyName }, record: { Last_Contact_Date: { value: date } } }).then(function(response) { console.log(response); return event; }).catch(function(error) { console.log(error); var message = 'Error Occurred'; event.error = event.error ? event.error + message : message; return event; }); }; kintone.events.on([ 'app.record.create.submit', 'app.record.edit.submit', 'app.record.index.edit.submit' ], handler); })(); updateDate.js Declare a constant value Declare a handler Define events Answer Code GitHub link
68. 68 Coding – Update Date (function() { 'use strict'; var COMPANY_LIST_APP_ID = your_company_list_app_id; var handler = function(event) { console.log(event); var record = event.record; var companyName = record.Company_Name.value; var date = record.Date.value; return kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', { app: COMPANY_LIST_APP_ID, updateKey: { field: 'Company_Name', value: companyName }, record: { Last_Contact_Date: { value: date } } }).then(function(response) { console.log(response); return event; }).catch(function(error) { console.log(error); var message = 'Error Occurred'; event.error = event.error ? event.error + message : message; return event; }); }; kintone.events.on([ 'app.record.create.submit', 'app.record.edit.submit', 'app.record.index.edit.submit' ], handler); })(); updateDate.js Declare a constant value Declare a handler Define events Replace to your own app ID of Company List app The easiest way to check the app ID of Budget app is to see the URL when you open Company List app list view. And you can also check it in App Management page.
69. 69 Testing – Update Date You can pause if you put breakpoints before saving a new record Open Google Chrome DevTools after uploading updateDate.js to Contact Log. And save a new record again.
70. 70 Testing – Update Date Open Google Chrome DevTools after uploading updateDate.js and save a new record again. You can see an actual request that was called by kintone.api() from Network panel
71. 71 Testing – Update Date Check the updated Last Contact Date field You can also check that a new history was added
72. 72 Thank you for joining this session!!
73. 73 References • Kintone Developer Program – API Docs • https://kintone.dev/en/docs/ • Kintone Developer Program – SDK/Tools • https://kintone.dev/en/sdk/ • MDN web docs • https://developer.mozilla.org/en-US/ • Google Chrome DevTools • https://developers.google.com/web/tools/chrome-devtools • https://developers.google.com/web/tools/chrome-devtools/javascript • Kintone Help Site • https://get.kintone.help/k/en