Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Kintone Technical Training - Development Overview

Kintone Technical Training - Development Overview

Here is the Development Overview 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=T9IZW7W_BE8

Tweet

More Decks by kintone-technical-training

Other Decks in Programming

Transcript

  1. 2 Notice • This material was created using the November

    2020 version of Kintone. • We may change our contents without prior notice.
  2. 3 Agenda • Introduction to the type of development •

    What you can do with Kintone customization • JavaScript / CSS • Kintone REST API • How to apply JavaScript and CSS customization • Plug-in • How to apply & make plug-in • Webhook • Notes on proposing Kintone customization • FAQ • Summary
  3. 5 Introduction Data in Kintone can connect to the data

    in the other systems. You can import / export Kintone data from / to the other systems. 1. JavaScript / CSS You can let Kintone send the data to the other systems when a record is added / updated / deleted / commented. 2. REST API 4. Webhook You can turn those customization into reusable plugin so that it can be applied to different apps. 3. Plug-in • Types of customization and what you can do with it jquery.min.js ol.js kintone Customize.js load-image. all.min.js ol.css By applying JavaScript / CSS, you can add additional functions on top of the Kintone native features. Webhooks logo The MIT License (https://github.com/logo/webhooks) Copyright © 2014 <[email protected]>
  4. 7 JavaScript / CSS • What is JavaScript? Programming Language

    1. JavaScript programs are executed in browsers. 2. You can add various features on web pages. • JavaScript is widely used to implement dynamic web pages. WEB Page HTML Structure CSS JavaScript Design Action
  5. 8 JavaScript / CSS – 1. Conditional Format I cannot

    understand what's important at a glance. It is difficult to make a list of "Urgent" and "By Status" and check each time. Native feature • It is possible to create a list that extracts only the necessary information. ➤ You cannot modify the color or the font depending on the conditions.
  6. 9 JavaScript / CSS – 1. Conditional Format Customize •

    Text color, size and background color can be modified depending on a value from a different field in the record. https://kintone.dev/en/plugins/advanced-samples/conditional-format-plug-in/ Urgent records are shown in red. Add background color by end date.
  7. 10 JavaScript / CSS – 2. Value check in multiple

    fields Native feature • The input values in each field can be checked for predefined conditions. ➤ It is not possible to perform more detailed value checks or checks between items. If there are no more than 3 days between the start and the end dates, I want an error message to be displayed. But I cannot do that with the native features. Many mistakes made by the input • Input Required • No duplication • Number of characters (minimum, maximum) • Input Required • No duplication Date Text
  8. 11 JavaScript / CSS – 2. Value check in multiple

    fields Customize • It is possible to check in complicated conditions or between multiple fields. And the error message can be displayed at the relevant field. Error message can be displayed in the relevant field.
  9. 12 JavaScript / CSS – 3. Show / Hide fields

    Native feature • You show or hide a field depending on the value in other fields. If there are many items, the record will become vertically long and difficult to enter.
  10. 13 JavaScript / CSS – 3. Show / Hide fields

    Customize • You can control whether fields are enabled, disabled, show or hide according to user’s desired condition. If you select “Yes” and then select “Other”... Show the fields.
  11. 14 JavaScript / CSS – 4. Disable fields and enter

    values automatically Native feature • It is possible to disable some fields to the users with permissions. ➤ It is not possible to disable some fields base on a value of another field or fill them with values automatically. I want to distinguish between automatic input and non-input according to items at the stage of record editing. With a tablet, it is troublesome to enter characters one by one.
  12. 15 JavaScript / CSS – 4. Disable fields and enter

    values automatically Customize • It is possible to disable some fields or fill them with values automatically. https://kintone.dev/en/docs/kintone/js-api/events/record-edit-event/#onload-event-desktop In the case of “Media”... Disabled Name field.
  13. 16 JavaScript / CSS – 5. Gantt chart display Native

    feature • “Calendar view” can be used, but in the case that there are a lot of tasks, it is not easy to check tasks at a glance. I do not understand the overall schedule. Only one field is displayed in the calendar view.
  14. 17 JavaScript / CSS – 5. Gantt chart display Customize

    • In Kintone, there are places that can be freely customized by JavaScript. At this time, implement in the "blank part of the lower part of the menu" on the list view.
  15. 18 JavaScript / CSS – 5. Gantt chart display Customize

    • Display Gantt chart using space above list. https://kintone.dev/en/tutorials/embedding/display-gantt-charts/
  16. 19 JavaScript / CSS Places where you can use for

    customizations (Desktop version) (Places where the element can be obtained) Record List View Record Detail View * It is also possible to add a dedicated customized view.
  17. 23 REST API What is REST API? • A system

    that sends a message described in XML or JSON format when you access a specific URL with HTTP/HTTPS by specifying parameters. Kintone REST API You can pass Kintone data to an external platform or register the received data in Kintone.
  18. 24 REST API – 1. Automatic numbering (use data in

    Kintone) Native feature • A unique record number is assigned each time, but that may not be enough... I want each record number to have a prefix that is assigned every year. I want to assign automatic numbering only to those that have been approved by process management.
  19. 25 REST API – 1. Automatic numbering (use data in

    Kintone) Customize • Fetch the data when a save button is pressed and generate a number automatically based on the fetched information. 1. Count the number of records that match the conditions when save is pressed. 2. Reflect on record. https://kintone.dev/en/tutorials/autofill-data/set-automatic-numbering/
  20. 26 REST API – 2. Enter the value obtained from

    another web service Native feature • You can retrieve data from the other Kintone apps, but you cannot fetch it from another web service. CSV reading Look it up Zip code database
  21. 27 REST API – 2. Enter the value obtained from

    another web service Customize • You can fetch the address with an API by specifying the zip code. 532-0003 Miyahara, Yodogawa-ku, Osaka City, Osaka Prefecture Zip code database Get address Get address
  22. 28 REST API – 3. Show map Native feature •

    You cannot display a map based on the stored information in Kintone. I cannot tell where the company locates at first glance. It would be better if I can display the route from my company to the client's office.
  23. 29 REST API – 3. Show map Customize • Use

    the Google Maps API to retrieve the map information. 1105 California Street, San Francisco CA Map information Another API may charge you. Check the license beforehand.
  24. 30 REST API – 4. Data migration Native feature •

    You can only import a CSV file into Kintone one at a time without attachment. You can only import CSV one at a time. I cannot upload attachment files.
  25. 31 REST API – 4. Data migration Customize • You

    can import attachment files. You can also import multiple CSV files at the same time. Image shopmaster.csv customermaster.csv attachment.jpg attachment.xlsx ・・・ Kintone REST API * Often create intermediate modules for migration. 1. Process data 2. Import data in CSV files 3. Import attachment files
  26. 33 What you can do with Kintone customization - How

    to apply JavaScript and CSS customization
  27. 34 How to apply customization • Apply JavaScript / CSS

    files to your app • Click app setting mark.
  28. 35 How to apply customization • Click field’s setting mark

    and click “Settings”. • Input “Field Code” to each field. Do not forget to save the form. Note that this will be used to specify the field in the program.
  29. 36 How to apply customization • Click the “App Settings”

    tab and then click “JavaScript and CSS Customization”.
  30. 37 How to apply customization • Click “Save”. The files

    are loaded in order from top to bottom. Check the order before saving!
  31. 39 How to apply customization • Help page • Customizing

    an App with JavaScript and CSS https://get.kintone.help/k/en/user/app_settings/js_customize.html
  32. 42 Plug-in • What is Kintone plug-in? • An additional

    program that can apply multiple JavaScripts and CSSs in a pack. By simply installing the plug-in on Kintone and applying it to your app, you can easily extend the app's functionality and link it with other services. jquery.min.js ol.js Kintone Customize.js load-image. all.min.js ol.css
  33. 43 Plug-in - Advantage 1 • Flexible response to app

    changes • Since you can change the setting on the plug-in setting page, it is possible to minimize the effect of app changes such as field additions compared to customizations where you need to modify the programs. JavaScript file Plug-in
  34. 44 Plug-in - Advantage 2 • Applicable to multiple apps

    • Once you load the plug-in into your environment, you can easily apply it to multiple apps. JavaScript Customization Plug-in
  35. 45 Plug-in - Advantage 3 • Easy to update •

    You will get a private key while packaging the plug-in. • If you register the plug-in again with the private key, it will be overwritten and immediately applied to the corresponding apps. App A App B Ver.1 Ver.1 Apply Ver.2 for Kintone App A App B Ver.2 Ver.2
  36. 47 How to apply plug-in • Import plug-in to the

    domain & apply to the app • Install the plug-in on Kintone • Add the plug-in to an app https://blog.kintone.com/company-news/how-to-install-plug-ins-in-kintone
  37. 48 How to apply plug-in • Development guide • Steps

    for Plug-in Development https://kintone.dev/en/plugins/introduction-to-plug-ins/steps-for-plug-in-development/
  38. 50 What you can do with Kintone customization - Webhook

    Webhooks logo The MIT License (https://github.com/logo/webhooks) Copyright © 2014 <[email protected]>
  39. 51 Webhook • What is Webhook? • When an event

    occurs in the system, the system will automatically send data by HTTP/HTTPS to the URL specified in advance. • Kintone Webhook Notification of registration/update information of Kintone application can be sent to the outside.
  40. 52 Webhook - Advantage 1 • Get notified in real

    time and reduce the number of REST API requests • You need to execute REST APIs regularly to check if there are any updates. Note that you cannot detect the updates in real-time. • Kintone will automatically notify you of updates with Webhook. That way, you can get the difference between the data in real-time. Webhook (Outgoing) Without Webhook With Webhook REST API Kintone Kintone
  41. 53 Webhook - Advantage 2 • Customizable without coding Destination

    URL Transmission condition Not all Kintone events are supported. Please be careful.
  42. 54 Webhook - Advantage 3 • Corresponding to record operation

    by REST API • Since the server of Kintone sends the Webhook requests, we can prevent errors like “Some of the users could not execute REST APIs due to a browser crash or JavaScript error.” REST API Webhook REST API JavaScript API Kintone Kintone
  43. 55 Webhook - Advantage 4 • Execution log remains on

    the setting screen • You can look into the cause of problems even if the server of Kintone fails to send the Webhook requests.
  44. 56 Webhook - Ex. Notify Slack of Kintone’s new records

    Customization without Webhook • You need to develop various customizations in many places, and the number of requests will be higher than the one with Webhook. REST API OS settings for regularly running programs Develop a program to fetch records and check whether there are new records. Develop a program to notify Slack of the new records Preparation of terminal Kintone
  45. 57 Webhook - Ex. Notify Slack of Kintone’s new records

    Customization with Webhook • The above can be achieved only by setting on the screen, and the number of requests can be minimized. Webhook Setting on the screen Setting on the screen Kintone https://get.kintone.help/k/en/user/app_settings/set_webhook/webhook.html
  46. 59 Notes on proposing Kintone • The following 3 functions

    cannot be delivered as service policy. * These cannot be done even if customized. 24h 365d 24 hours 365 days operation Support expired Browser behavior Individual update UPDATE • Availability and reliability (service delivery time) https://www.kintone.com/security-2018/#SLO * We provide 24/7 monitoring and have set our Service Level Objectives for our infrastructure. * Our platform operates 24 hours a day, 365 days a year (excluding regular maintenance), with regular backup and redundancy built-in. • Update all subdomains at the same timing. • Supported web browser https://get.kintone.help/general/en/user/list_start/webbrowser.html * Only the latest version or browsers supported by the provider are supported. Here is the policy of “kintone.com” domain. If you on another domain, please refer to the policy of your domain and region.
  47. 60 Notes on proposing Kintone Every second in real time

    Kintone • API Request limit: 10,000 requests / 1 app / 1 day • If the limit is exceeded, a warning email will be sent to the administrator. • Access is not limited immediately. • Number of simultaneous API access limit: 100 / 1 subdomain • The API requests more than the limit will be errors. • If the number of fields in the app (up to 500) increases, performance may be affected. • For IE, it has been confirmed that the performance is affected if the number of fields exceeds 190. • Note that the above values differ depending on the application settings such as access permissions and view settings.
  48. 61 Notes on proposing Kintone • Kintone does not have

    a time trigger, so it cannot be executed at periodic intervals. • Execute at some event on Kintone. • Prepare environment to execute API and use task scheduler or cron. Idea 1 Idea 2 ü Periodic processing cannot be done by Kintone only, so it is necessary to have an external system that can do the things above.
  49. 63 FAQ Is it possible to aggregate data across multiple

    apps/records? It is possible if you use Kintone REST API. It is important to define the requirements where and what data is to be displayed under what conditions (if too many records are aggregated, the load on Kintone increases and the response becomes slow).
  50. 64 FAQ Is it possible to manage budget performance? It

    is possible, but Kintone is not a software dedicated to budget performance management, so it may be necessary to perform quite complicated customization depending on the requirements, and the amount of money may not match. In that case, it may be better to propose Kintone in cooperation with other dedicated software.
  51. 65 FAQ Is it possible to integrate with ◦◦? Kintone

    has functions to import or export data such as the REST API or the CSV download. It depends on whether the other service to integrate with Kintone has a way to import and export data. There are several patterns to do this such as: ・Develop programs using the both APIs if the other service has the API ・If there are no APIs available on the service, find another way to export data from it and import the data to Kintone. ・Using an integration solution such as Zapier If there are no ways available to export data from the service, it is impossible to integrate it with Kintone.
  52. 67 What Kintone is suitable for: 1. Use between other

    departments/branches • Information sharing between other departments or with the head office and branches. 2. Use with business partners • Information sharing with external business partners and information sharing with group companies. 3. Centralized management of disparately managed information • Centralized management of disparately managed information such as multiple systems and Excel. Work requests and applications between departments Summarizing sales information of group companies and exchanging system repair requests for group companies System modification that cannot keep up with system compliance and manages with Excel
  53. 68 What Kintone is suitable for: 4. Use in new

    businesses/businesses that are expanding • Systematization of operations that are not standardized and operations that are changed business processes and rules frequently. 5. Want to start right now! • Due to end of support, deterioration, legal compliance, speed of response is required.
  54. 69 What Kintone is NOT suitable for: 1. Replacement of

    core systems such as accounting system and attendance system • Replacing the core system like accounting and attendance management itself is difficult because Kintone is not the dedicated service. • We recommend using it in combination with the core system. 2. Services for consumers • If the Kintone edit/list page needs to be significantly modified, a large amount of cost may be required. • Please use it as a service that supports internal communication, not as a service for consumers. 3. Systematization of business that causes complicated transaction processing
  55. 71 References • Kintone HP • https://www.kintone.com/ • Kintone Developer

    Program – API Docs • https://kintone.dev/en/docs/ • Kintone Help Site • https://get.kintone.help/k/en/