Kintone Technical Training - JavaScript API

Hey, what's up everyone! Welcome to Kintone Technical Training, I am Leo Liao with Kintone and I will show you  how to do JavaScript Customization in Kintone. Let's get started! This material was created based on September 2020 version of Kintone. We may change  our contents without prior notice. Before we start, there are  several items that we will need: First, you'll need to have a Kintone  account with administrators access. Second, you will need to have some  understanding with at least one

programming language in this tutorial.  we will work with JavaScript. Third, you have a google chrome  and a code editor installed. we will be using vs code in this tutorial but you  can use other code editor based on your choices. Lastly, you have downloaded the app template  and imported into your Kintone platform. You can find the GitHub links below for the  apps template and the PDF of this presentation. This tutorial includes many links  for you to find out more details with what we have d

iscussed. Please make  sure you download this PDF presentation file so that you have access to these things. Let's talk about the agenda. here we will  start with fundamental JavaScript on the web then we will introduce Kintone's JavaScript API we will then quickly review some advanced concept  of JavaScript with promises I will also show you the structure of JavaScript in Kintone using es5  and how to upload the JavaScript file we will have some fun and do some hands-on in the end of this  tuto

rial so make sure you stick with us until then Let's review the fundamentals of Javascript JavaScript is even driven meaning that it gets  triggered by some events such as a user action some signals or output from another location it  is asynchronous meaning that it will continue to execute the next line of code even if the  result of the current line is not ready yet it allows the user to interact with HTML and CSS  and thus making change to the UI and improve the user experience while browsing

the web it also  contains common feature with other programming languages in the sense that it allows data  processing as well as using a varieties of APIs there are many types of events available some of  the common ones include when the DOM is loaded when a user clicks or scrolls the  page when typing in the keyboard and when the synchronous request is received  after finishing fetching the data we will cover more in the promise section of this  tutorial we respond to any event by using event

handler so called the event listener which  is a function that runs when an event occurs let's take a look at a common  example with event listener first of all look at our code here in the middle  we have input element and the script element make sure you provide id for your input  element so that JavaScript can get this element inside the script which is where we  will be providing JavaScript functions you will need to tell JavaScript what element are  we looking at we will do so by var input

equals to document.getElementById(); and we will  pass the id which is this id right there then once you get the element your monitor will track any changes that happen with this  element by using add even listener function once JavaScript catches the change event in this  value it passes the event to the event handler the change handler which is right here and we are  simply console logging the output of the input value there so this is what you see inside your  HTML this is what you will see

inside your console let's take a look at another example  the results are exactly the same the only difference is that instead of passing  a handler function which was declared at the top I simply put the function inline as  part of the add event listener function this function inside another function  is referred as the callback function you can also use an inline event listener  in alternative to add event listener by including an unchanged attribute  inside your HTML input element let's take

a look at the different  example on the left hand side I have i'm using the event listener on low to see  whether a window object has been loaded yet or not once it's loaded it will execute this  function which is console.log window is open you'll find the window object  inside every web page you browse on the right hand side you can use the event  listener on load to track your status with an XML HTTP request on using unload to catch successful  response or un-arrow to catch error response let'

s look at some intel password API we will go  over three common sections of Kintone JavaScript API the events the get set data and the  RESTful API the intel JavaScript events let's compare conventional JavaScript with  Kintone's JavaScript in the conventional JavaScript your event target can be anything  and any HTML element that you have built and the event you use will be  click change load and or etc you will be using the add event listener to  watch out for those events whereas in Kintone y

ou would have access to not only the HTML element  but also the record value and the fields itself Kintone also has its own event type where  you can use them when you need there is also a comparable event listener in Kintone for  users to watch where those events are executed you can find more detail in the  link below on Kintone's event let's do another review  with conventional JavaScript we have two input element and the script element  on this page each input element has its own id inside t

he script element we first declare a  calc h function which helps us calculate the age by passing a date in it then we first add an event  listener to watch for the change value in the date input element once the user selects a date it  releases a signal of the change event and thoughts trigger the callback function where we  first get the value of the date which was what the user has chosen and then we pass  the date to the function that we defined above once we get the output result of that ag

e we can  then define and send that value to our HTML code so that every other user can  see the what the result is we will use same example in Kintone note that you  would not need to create your own input element because you would use Kintone field instead the logic is the same you set an  event listener to watch for a change of the value in the birth date field you trigger the callback function it  finds what the date value is performs the calculation based on that day value and then  we outp

ut the result to another Kintone field we return the event then you will see the result if we put both examples side by side you'll  notice a significant resemblance of the structure between intel and the conventional JavaScript  only the syntax used for the event listener and the events that are slightly  different from each other let's take a closer look  at Kintone's event listener similar to the confessional listener you define  the type of the event to watch for and you pass a callback func

tion or handler so that  it gets triggered when the event happens in Kintone you would have to make sure you return  the event object at the end this is because JavaScript is implicit so if you don't return  the value it doesn't return anything for you there are other things you can do  with the event object in king tongue you can get or update the field value you  can enable disable a field or edit you can show the error message on each field or you  can show the error message of that record he

re are some examples if you include  asynchronous code during these events keep in mind that if it's a field change event  which means a single field has been changed you will need to use the get set method in  Kintone in order to update those values get set data you can use the get app id by  typing Kintone.app.getId(); you can also get the record id get the  record value and set the record value remember when you set the record value you need to  include the object of the record so that it kno

ws what you're trying to update you can  also use the get set method in dev tool let's talk about RESTful API in Kintone so  here's the basic structure of Kintone's RESTful API request Kintone.API path or the URL the method  which is get post put or delete and the parameter this is important to have when you  need to update or create a new record you can also use this parameter to filter  out the kind of data that you want to fetch at the end you can pass an optional  callback to catch any succe

ssful response or an optional error callback to catch any error  response now remember that if you don't pass the callback function in there you will  get a Kintone promise object as a return here are some examples with using rest API  and the promise object the one on the top did not include a callback function and thoughts  you can use dot then at the end of the function whereas since there are callback in the  example in the bottom once the API is performed there are no responses needed  to t

ie with this API call you can try out those API  examples in the dev tools as well by copying and paste the code provided  here you can see the result coming out let's talk about my favorite subject  in JavaScript which is the promises one major difference to be aware of is  that the native promise may not work in the older version of the browser whereas Kintone  promise is designed to work in all versions of the browser remember we've talked about  JavaScript being an asynchronous languages pro

mise is the major characteristic for that when you run a promise for one line of code it  initially start with being a painting status JavaScript will continue to execute the next line  of code when the status of that promise becomes fulfilled or rejected it will return the result  back to your code now because we don't have any ways to track how long would it take before  we got a return result from that promisco it would create issues for your following lines of  code if it depends on the resu

lt of that promise this is why we chain promise code with dot  then and that catch they're often referred as the then able object it basically tells JavaScript  that it would only continue to execute the following lines of codes after you've received  a return result from the promise code here's a closer view at the structure of the promise code  remember that then is for any successful result even if even if the return result is empty array  or zero it is still considered as a truebeat value wh

ereas catch is for any arrow  while calling the promise API it is recommended that you  included both when you use promises you can also use multiple  chaining for your promise object by using that then over and over  until you get the result that you need please remember though JavaScript is implicit  so you need to put a return at the end of each function if you forget to put return result  your next dot then will then show undefined here are some basic patterns  called function structure for

synchronous asynchronous with  callback and asynchronous with promises please copy this line of code into your  dev tool and see what the results are those are simple calculations by adding  the first variable and the second variable the return result for the first one should be  three the return result for second one should be seven and then the return result  for the number third should be 11. let's talk about basic JavaScript  structure in Kintone with es5 first of all you have to use the ev

structure ev structure is referring to immediately invoke  function expression this puts a closure of your code to prevent it being affected by the global  state that has already existed in Kintone also remember to use the use strict mode so that  it helps you debug and eliminates any silent errors JavaScript is an interesting language  sometimes it ignores any silent arrows you have but by putting use strict it  will make sure that it display all kinds of error back to you so  you know where th

e problem may be you will then include your event listener  and handler inside the ev function once you finish writing your code you go  to the destinated Kintone app to upload the the JS file via app settings you can either attach actual file or include links  to your file please be noted that you will need to upload your CSS file separately and in additional  to that you will need to attach a separate JavaScript file and CSS file if you want to run  those code inside the mobile version of Kint

one the links are useful when you want to include  additional JavaScript library such as jquery or bootstrap remember well the orders of these  JavaScript links does matter if you're calling a jquery before you import jquery you'll  get an error the general rules of thumb is that any library that you use  should be on top of your code i will walk through these  steps again during the hands-on alright let's do some coding please make  sure you download the app template file and insert it into you

r Kintone platform before  you continue if you want to follow along first open your sales steals app the first customization we want to do is to apply  different background colors to the sales stage field depending on what the value is inside  the sales stage you can see a detailed list of all the fields that I have created for  this app on the right hand side of the screen please keep in mind that the field code columns  are the variables we can use inside our code since cell stage is a drop do

wn field with six different options we want to have a  separate color for each option selected this is the final result we want to achieve  inside detail view we have a purple pink color for our cell stage because it's  a closed one inside the list view I wanted to make sure every record has colors  applied to it according to the value of it let's identify what's needed  to happen in our coding logic based on our requirement we know that we want  to add event listeners in those two events app.re

cord.detail.show and app.record.index.com the detail that show displays a single record  whereas the index.shell displays a list of records then we know that once these event happens  it triggers the process of changing the background color of the cell stage field  here is our basic structure to start with we included two event listeners here  and when each event happened it executed our function which is the change cells stage  field color function which is defined at the top let's go to my edi

tor and i'll show you  the process from beginning to finish so I have already included our app  template I will go to the cell steel and I will add a new record for testing purpose i'll leave the company name blank for now i'll write the deal's name as Kintone technical  training rep is automatically populated the still stage i'll use the first  one which is the qualification expected close date could be anything but  i'll put it at the end of this month deal size i'll put knight five nights pro

bability  that's a hundred and sign contract value is a8 i'll put a note section here click save now to reiterate what we want to do we want to  make sure the cell stage the background color for this particular field is changed depending on the  value over here so let's go to our JavaScript file i have a snipe it so i'll use that sniper  first i'll make sure this is big enough now remember we are using an ev style here in  Kintone so i'll make sure I add a parenthesis at the end of the code so t

hat it executes  I will also use the strict mode so that it returns all the silent errors in this record  now we're currently testing in the detail view so I will make sure I duplicate this function  i'll change this event from index to detail because the detail view it you're only dealing  with one record so i'll make sure that instead of records i'm typing record the first thing  we want to do is to find out what the value is for cell stage so I will do far cells  stage is equal to record dot

cells h dot value now remember this cell stage is the  field code for this field in Kintone and i'll show you where you can find  that you will go to your app setting inside your form tab you will  hover over to the cell stage field you click setting and field  code is defined at the bottom let's go back to our records so now we have the value for the cell  stage the next thing we want to get is the HTML element of this field we will use a Kintone filling  function called that get po element and

we will pass the field code in there now  notice there are two types of element right now I notice i'm making a mistake by calling  Kintone.app dot get field elements this is only useful when you are inside the index  view so i'll make sure I include a record get field element this will  give us one single element and then we have the function called change cells  stage field color I don't have it here just yet but I know that I will pass two perimeters into  it first one is what the element is

which is the sales stage element and then we also have a value  field that would be our self stage right there at the end of your code just remember  that you always need to have a return let's create the change cell stage field color function you can use a function decoration or you can use function expression  as what I have over here in here first of all I want to to structure  my parameter that I passed in as an object I will do far element equal to parameter element and then the value is p

arameter that value i will also have a background color the default value is undefined i'll do a switch  statement based on the value of the value variable this is basically our self stage  option case one is qualification if it's in qualification if the user has  selected qualification the color should be this i'll make sure I have a break here now let me just use one for now as we wanted  to do some testing of this code before we write even more the next thing I want to  do is if I know that m

y background color has a value in there so I will use if  background color is true then my element i'll apply a different background  color to my style of the element make sure it's equal to that background color let's execute this code and see if it's working in Kintone i'll go back to the gear icon  which gives us access to app setting i'll go to customization and  integrations i'll select JavaScript i'll click add file here and i'll import the file that we  have which is change bg colors reme

mber i'm working on a pc so  i'm uploading JavaScript in pc you will need a separate one for mobile device  and you will upload CSS file separately as well once I uploaded the file i'll click  save and i'll click update app i'll go back to the record and now you'll  see a different color for qualification let's finish the code by adding more conditions  so that the color changes depending on different options of your code so i'm going to duplicate  this line of code I know that my next option is

evaluation and when it's evaluated when  it's in evaluation I will have this value do i'll do the same thing one more time  and I know that my next step is negotiation that background color should be 34 ff5 and then for the closed one I  want the color to be f9 e1 fb and this is the same color as the contract the last one we have is closed lost  and the color should be c6 c3 c3 let me upload this code and see if  it's working for all other options we'll go back to app setting we'll  click JavaS

cript and CSS customization we'll delete the existing code and we will add new  files for this new one click save click update app click the records one more time qualification is still working that is great i'll  click edit i'll change the value to evaluation and now you see a different color  being applied let's try all the options negotiation is working close one and close loss now you can also do more with this  one let's say I wanted to indicate when the when the deal is is contracted we no

t  only that we have this current background colors that we have we also want to make this text  bold what we can do is we will just add another another variable i'll call this the final great and inside where the contract is I will  add round weight is also equal to rod at the end of our code we'll make sure  that if we have a value inside found weight we will update the element style and its  found wait to be our value of stylemate let me upload this file again and we'll see  if it's effective

so go back to JavaScript delete the existing file  add the new file click save update the app and then open the records or the record  we'll go to the edit and its contract i am not sure if it's just my eyes but feels  like it's not he found weight does not apply we'll figure that out later what I want to do now  is I also want to make sure this code is executed inside the index.show so that when I have multiple record in the list it will display  the color based on what it should be so to do t

he testing first of all  let me duplicate the existing record and i'll hit duplicate records one more  time i'll select a different cell stage for the new rector that I just duplicated  now we have three records to test with let's go back to our code so now we know  in the list view we have multiple records we can first of all get all the HTML element here in this in this view so first thing we will  do is we'll do fire cells stage element s and we'll do Kintone.app dot get feel elements and we'

ll pass the field code in  there which is ourselves stage your field code should always  be the same inside the same app whether you're in the detail  view or in the index view the next thing I want to do is I will  run an iteration to their records so we'll do a for loop our I is zero well  I is smaller than the record staff length I should increment we'll then have the individual record value with each iteration and with our index number  then we'll understand what the cell stage value is with

each iteration so we'll do the  same thing cell stage that value and then we'll get each individual element  by using the elements that we have at the top and we can get it by passing the index number same  thing over here i'll call this function change cells stage fill color now pass in the same thing that I have passed then with  my previous function value is sales stage just remember that you need to return  your event let me save this code i'll upload this code into  the JavaScript customiz

ation all right now we have done the code successfully  and it changes the color of the cell stage to a different color based on the value of it it looks  like we're able to complete our requirements here so we set even listeners onto events and when each event happens we extract  the record value out from the event object we also need it to fetch the HTML element so  that we can manipulate the background value later in the detail.show event since it's a single  record we will only need to pass

the above result into the handler function and return  the event whereas inside the index.shoka event since we are dealing with multiple records we  needed to iterate through the list of records extract the value and the HTML element before  passing it to the same handler function you can find the bow code inside the GitHub link last but not least in our handler function we run a switch statement and determine whether  we need to apply new color and found weight if you need to have access to the

complete code  in the GitHub link is given in the slide here let's move to the second requirement this time we  want to include an update logic to our probability field changing the percentage from 0 to 100  or vice versa depending on only three options of the value inside the cell stage field if  it's closed lost then probability becomes zero whereas if it's closed one or if it's  contract then the probability is a hundred we will need to use three events here app.record.create.submit app.reco

rd.com app.record.index.edit.submit the create.submit is  for events that gets triggered immediately after you click save button while creating a new record  the edit does submit it triggers immediately after you click save button while editing an  existing record the index.edit.com triggers immediately after you click save button while  editing an existing record inside the list view the operation is this field code or excuse  me update the value after confirming so let's start with the basic s

tructure here as explained in the previous slide we will add  even listeners in these three submit events once it's triggered we will call back  our handler function which is at the top we will wrap up these codes inside an ev  function and we'll be using using the shriek mode you can find the starting code in  the link given in the slides here when we execute the code we should  be seeing a debugger in action developer puts a breakpoint to pause our  execution here and you will also find the co

nsole.log message that I have included  in my code let's run this code in real time i haven't sniped it already  so i'll put him come submit and I need to make sure that I improve the  parentheses so that it executes this function now you can run multiple events you can watch  multiple events by using an array and pass all the events inside this array let's try uploading  this code first and see if we can get a debugger message and before I do that i'll make sure  that this is big enough for wha

t we want to see so i'll go to the app  setting i'll go to JavaScript inside customization and i'll  add the new file which is update probability now remember because we're using submit that  create that submit or edit that submit here so it only gets triggered when  we click save i'll click edit and before I click save i'll make sure that I have  my dev tool open and i'll go to console.log click save and now you'll see debuggering action  what I really like about debugger is that you can go thr

ough every step and when you hover over to  some variables you can actually see their property of this variable from from the get-go this is one  of my favorite debugging mechanisms in JavaScript and then in console because I have  this console.log event so I know that when this submit does edit dot submit happens  I would have the app id I will have the record and I will have the record id and inside  the record object I would have the value for the fields that I have inside this record let  me

click this play button so that it continues let's go back to our code and this time  we'll add some more properties in here so first of all we still need to know the  cell stage and I can do so by doing far record equal to event record because we're dealing  with a single record so I only need to pass I only need to find record we'll do we'll find the  value of cell stage by using record.cells stage we will find the probability or probability we'll find the current value of  probability by usin

g a record probability and I think I have a cAPItal p  inside my field code so I will do it this way this is going to be your default value  now depending on what fields you're using sometimes you might want to attach a number  function to make sure that you got a number you don't have a number and the value you have  is the stream let's say your current value is 50 and it's a string if you try  to do any operations on it instead of 50 plus 50 is 100 it will become 50  plus e and it would return

to you as a string we need to make sure that we turn it into numbers  before we do we apply any operations to it i will have another one called the next  probability this is going to be my new value new probability value and right  now there should be nothing so if my cell stage is equal to close cost what I want to do is my next probability  is zero else if cell's stage is equal to close one or itself stage is equal to and next probability should be 100 let's execute this call to see if it's w

orking so i'll go back to the record let me close  my console for now i'll include JavaScript a file update probability click  save now i'll update the app i'll change one existing record for now so if I change this to close one or because right now I have a hundred  percent so let me change to close loss and then if everything is running then  we should have a zero percent down here now before I do that I realize I haven't  made update changes so that the record value is getting the next probab

ility value so i'm  actually going to say record that probability a value is equal to my next probability  this way i'll finish the assignment now oh sorry not the assignment but i'll finish  setting the new values to the probability field so let me upload this code one more time and I do want to mention that there are tools  available for you to have the ability to upload your code as you've developed so you don't have  to upload your JavaScript code each time when you make a change it will aut

omatically be  reflected but we'll talk about that later so let me change this to  close lost i'll click save and it looks like we're not executing this  code so let's find out what's going on and this time we can actually use a  debugger here to help us figure out what's missing from our code and see if  I can close lost next probability is zero so I added the booger and I will upload this file and we'll try it again it will be as what it is and when we click  save huh now it's back to zero per

cent interesting maybe I just didn't click save i'm not sure  but at least we know that the code is executing so we'll try to we'll apply more  functions here and we'll see if it also if it's working so let me try this let me add  these new things in there in the requirement we know that we want to have another message to the  user that hey i'm changing your probability so to do that we want to do a new probability or  next probability it's not equal to no which is the default value and next pro

bability  is not equal to current probability and we'll use confirm function here and we'll make  sure that the user wants us to it's okay with us update the value here so update probability  well we'll add some syntax to tell the user hey your updated probability  is going to be this next probability and let's see here a probability plus okay I  just need to finish typing there and we'll just notice the user we're changing  it because the cell stage is so on and so forth let me make this line a

little bit smaller just so  that we can see an overview of what is happening here so if next probability is not equal to no  value is not equal to no and if next probability is not equal to the current probability value  and that the user confirms that we should change so if this happens then we  want to say record.probability a value is equal to next probability let's try execute this line of hell i'll keep the dev tool open because I know I will  need it and i'll instead of using the shortcut

I will go to the app setting and  i'll upload the JavaScript file so let's use a different record for testing so if  I click edit if I change this qualification to quotes lost i'll click save now  I can see this comfort message because i'm using close loss my next cell stage  is close loss so the next updated probability is zero percent since it's close loss  i'll click ok now it's zero percent now I notice um I might need some  spaces here to make sure it's running it's running smoothly but th

at's where i'm missing okay i'll have a a bigger view of the current  code and let's review this code one more time so going through the steps of the handler function we first get the record we find what the sales  stage value is we got the current value of the probability from that same record and we want  to make sure that it's converted into a number we define an empty variable a  known variable of a new probability and the next one we will run an if condition  to say if the cell stage is equ

al to close loss then your new probability is zero whereas if  it's close one or a contract then it's a hundred then we want to make sure that  if the new probability is not new and it's not if it's not equal to the current  probability and that user confirms that user clicks ok that yes please update then you  reassign the value you update the value by using record.probability that  value equal to new probability then don't forget you need to return the event and now you should be able to updat

e your code so we see that inside our testing it was  successful we changed from 100 to zero percent actually let me just test it out one more time and  this time we want to change from zero percent to a hundred percent so first of all i'll create  a new record i'll put as evaluation nothing um well i'll put nothing in other fields  and i'll put 10 in the probability field and let me update this record i'll say  it's a we want this deal and we click save now we know that it's a hundred percent 

and once we click ok it's a hundred percent now update is done boiler again you can find the answer in  the GitHub link given in this slide let's do some more this time we want to implement  an API call to update the record in a different ad let me talk about what we want to accomplish  here I would like to add the ability to track when was the last time I had contact with this  account so I have a complete company of this app and I wanted to know well when was  the last time I spoke to this com

pany to do that I will need to  go to my company this app switch over to the screen  i'll go back to the cell space i'll go to the company list I already have one record created here so we  will just use this and I don't have the fields that I need to store when was the last con contact  date so i'll go to the app setting i'll go to form i will drag and drop a new date field into the  form i'll click on the setting of this field and i'll change the name of the field code to  contact date i'll ch

ange the label here as well now changing the label here does not  affect your code but it's always nice to tell the user what this field is for  once i'm done i'll click update the app and you'll notice I now have this new  field but I don't have any values in there great let's go back to the slides and  we'll talk about what we need to do next we will need to go to the contact lock app and what this setup is each time when we  have a contact history with a specific company name this state value

here  needs to get passed to the company list so it basically sends a API  call from the contact log app to complement this app and pass the  date value from this app to this app to do that we will need to use the same event as  we did with the last exercise we will use the cree create.submit we'll use the edit.submit  and we'll use the index.edit.submit our operation will be we'll use the RESTful API to put record which means to update the record  and will update the field of last contact date

let's do let's open the template for this code and you can have access to the  template by clicking on this GitHub link okay we will go to um our cell space  and we'll find the contact log let me just open it as a new tab here for now and I want to make sure that I  am opening the update date file so over here i'll use my sniper which has all my submit event and i'll  make sure I execute this line of code i will upload this code to the customization in JavaScript the file update date click save

and i'll update the app so and i'll open up my dev tool over here that's  the date value I know that I want to pass this day value to my company list to the val to the field  where it says lost contact date and i'll use this company search list as the value so that the  API knows which record is am I trying to update this is useful when you need to input your log  with the company you have spoke to click save now debugger is running it stops right here and  I can see the value of event from her

e it's great let's see what we need to do for next step so we  have a handler this is what we have as default we will first of all we will define which app id that we will use this is going to be the  app id of the company list app that you have we will define what the company name is  and we will define what the date value is then we'll pass all these information into the API remember the structure of the API the  first one is the URL in which you can actually use Kintone.API.url and then defin

e  which specific API we want to use in it we will define what method we will be using because  we're updating a different record we'll use put we will inside our parameter we will include the app id we will use the update key now  this update key is it should be a unique field and we will identify which field is what we  want to use in this case is the company name and the value of the company name you  will get this from your contact log and we're passing the record value with the  field code

that we want to update this field with this value once everything is complete we  will use dot then and we will return the response let's go over let's break down the structure  just a little bit more before we dive into it we have a synchronous processing block  over here which is your promise object and then we return the event at the  end to make sure it gets updated let's go back to our code i'll exit out from this one okay so first thing first we will  need to know which is the company list

that we have which app id is it  so viewers might be different from mine the way to find app id is by going to the  app itself so let's go to company list now if I open this white enough you'll  see there's a number behind the this is your app id for company list we've also  talked about Kintone has a building function for you to find out what your app id is when  you are inside the app we can do incom.get id and it returns us 5 which  is what we have over here that's great so we will make sure

  that we define this over here again just to make sure that you  use your app id not my app id let's go down to the handler we don't need  debugger anymore we'll keep the console lock event there for now first of all we need to  find out what the value is for company.name and we'll find out what the date  value is for this date so to do that we'll first define the record  which is coming from an event we will find the company name which is inside  the record and we will use the field code which

is company underscore name that value we will also  find the date which is the record update the value all these are the one over here all right and we'll do the API here's how it  goes because we're returning a promises here so I want to make sure that I click return intel.API this is the first thing that  you have to do when you run an intel API we want to find the URL and  i'll just use this function.API this function is basically returning your  subdomain URL address there we will not type

go to deep without that for this session  we'll put in the endpoint for this API aorl so this is our URL or where we can send the update  API to because it's update so we're using put and we want to pass the parameters in there  parameter the structure of the parameter you can actually find the details  inside our online documentation the app is the company list app id which  is something that I have to find at the top the update key is first of all we need to define which field  are we using an

d this time we're using company name field remember inside your company list  your company name needs to set to be unique or prohibit to duplicate value so  that we can use the update key here and the value is company name  what this will do is go to the company list app find the find the field  find the value of the field company name and if you find a matching value with the one that  I have here that's the record I want to update and we'll pass the record object and we will make sure that any

fields that we want  to update inside the company list we will put them here so I know that the new field that I just  created inside company list is last contact date in Kintone your structure is after field  code it's an object and inside the object there's a value in there and this is how you need  to do your structure when you update the record so once you're done then rather than pass the  optional callbacks I will just leave it as it is so that I can get the Kintone.promise and  then I ca

n use the dot then function here now we'll have response back let's  cancel out the response and we'll see if we can get a successful message  then you will need to return your event now remember it is always  recommended that you put a that catch this way in case of something spelling we can at least catch this arrow and we can cancel  lock that arrow so that we know what to do with it or the return event here again now if you did put that catch this  last line becomes a non-reachable code so y

ou can delete it because either  way it won't have a return event in it let me update upload this code into my  contact log and we'll we'll see if it works so go to your app setting customization  JavaScript and update the date i realized I say update the data I meant to  say update the code update your JavaScript file and then you update the app okay so i'm going to  open my Kintone record because this is the company that I want to update you'll notice right  now last contact date has no value

in there and I know in the event I actually created I  included the edit.submit which means if I click save while i'm editing it this october 2nd  2020 should be passed over to last contact date let's give it a try click save and if I open my  dev tool let's make sure nothing is returning has a bad message so with king town if you have a successful you'll  see this return response up with a property revision and it will show you the revision number  I will show you what this number means but thi

s looks like we were able to successfully update the  last contact though so let me refresh this record and I don't see any values here so let's debug  first of all there's no history and looks like so let me run this save edit one  more time our previous revision is 2. I will change the value to october 3rd and  if everything is successful I should get a revision value of 3 and you see that I  have an efficient value of that's great my app id is five so this should update the value and let's  s

ee if I am missing any step here i have a key company so I know  that I have the correct app id and I know it's executing it's uploading  um I hope I didn't get the wrong code okay welcome back so um we were trying to debug this line of code and I  realized or we realized where the problem is so let me go to the company let's have remember  this is our field co last contact date and we realized that there is a spelling mistake  with this field code which is why it's not updating the correct fiel

d so I will  make update to this one last contact day there all right i'll click  save i'll update the app okay we still have debugger in there so let me let  me keep it there and we'll go to the company list record and we will try to make an update so let  me click edit and the date is october 4th we'll keep it as it is or click save revision number  seven and if we go to this record october 4th the revision number is actually referring to  this store as history log so you can see who has made

changes to this field and you'll see that  it's leo Kintone.com which is who I signed it as updated this com last contact date field and  change the new value to this one you can click the little icon to show where the update is  and you can restore to the previous version let's go over sections of this code again we're calling a promise object  over here using Kintone.API and we are returning the event once we have  a response there what I haven't done is I haven't displayed the error message a

nd  prevent even prevent saving of this record but you can do it once you once you try it and maybe give me some comments  to see how you feel about using this one alright again you can find the complete  version of the code inside this GitHub link and here is the overview of  the code that we just wrote just remember you need to change your company  list app id to the actual app id that you're using in the example that I demo  i'm using app id number five you can find inside this tutorial you c

an  find again where would you be able to find the sub domain and where would  you be able to find the app id one of the things that we didn't talked about  is that you can actually click on this line item and put a breakpoint before the record  is saved similar to how you use debugger and if you go to the network you can browse  to the record.json object and you'll be able to see the requests that you have made so  I happen to have the same app id over here let's go to number five and the recor

d object  is last contact date the value is may 30th the update key is company  name and the value is this again you will see the updated value and you can check the history  once you update the record via API again thank you for joining this session  and last but not least I wanted to say that there are references available on those  website here so definitely download this PDF definitely visit our website and feel free  to submit questions if you have anything that you would like to find out t

hat is all for us  today and please look forward to the part 2 video i'll see you next time Thank you!