Learn how to create a mobile app in Unifinity that works with kintone.
In this article, we will show you how to upload files to kintone using kintone's REST API.
In a previous post.User Authenticationwill be required, so please check accordingly.
You can download a sample project of the Unifinity kintone application used in the explanation below. We hope you will take advantage of it.
kintone: File Upload Application
Unifinity: kintone file upload application
Overview of the application to be created
Create a mobile app that takes a photo in Unifinity and uploads the image file to the corresponding field in kintone.
Setting up kintone
In this case, we will prepare an application to input the following items, and register the text string and attached files (image files) from the mobile application.
In order to link, the kintone subdomain name, app ID, and field code for each field are required.
The subdomain name and app ID can be found in the following part of the URL when connecting to the app.
The field code for each field can be checked from the application's settings screen.
Unifinity collaboration settings
String and image files are registered to Kintone. This time, we will explain screen creation and process creation, focusing on how to register image files.
The string registration method isThis articlefor more information.
For basic Unifinity operation, click here.Tutorial Videosfor more information.
0. Preparation
In my previous article.User Authenticationin the application.
Also, set the global variable for the property to the subdomain name identified in the kintone configuration.
1. screen creation
(1) Place a text box for entering text and a button for taking and displaying a photo.
For the button to take a picture, the image of the camera from the image on the design tab is displayed on the button for easy understanding.
(2) Set up a button to send the entered information to kintone.
Screen creation is now complete (there are areas to be updated after process creation in section 2).
2. process creation
This section explains the process of taking pictures and sending data to kintone.
Photography
Creates an action when the shoot button is pressed.
For each item, we will explain the process one by one.
(1) Photography
| #2 | ."Device/Camera Activationwith the camera on the device. The image width and height can be set here, and are set this time to compress the file size. |
| #3 | ."Control/Contents Setto display the content captured in #2 on the camera activation button on the data transmission screen. |
(2) File name generation for image files
| #5 | In this case, we would like to name the file "Date taken.png". First of all, we must find the "Date/time/present date/timeUse the "+" to read the current date and time of the terminal. |
| #6-10 | From the #5 result, use the following logic to obtain the year, month, day, hour, and minute. ."Date/time/year acquired"Date/time/month acquired"Date/time/day acquisition"Date/time acquisition"Date/time/minute acquisition" |
| #11 | Based on the results of #6-10, "theString Functions/Concatenationto create a file name. |
(3) Creation of image files
| #13 | ."File/WriteWrite the results taken in #2 to the filename created in #11 using "#11". The file created here will be saved in the Unifinity app on the device. |
| #14 | ."Variable/Environment Variable SettingsSet any environment variable (in this case, the variable name is "kintone photo") to the file name created in #11 using *Please note that this is not #13 because the file is sent with a file name. |
Sending data to kintone
Create a behavior when the button for sending data to kintone is pressed.
To upload a file to kintone and register it as a record,
(1) Upload files to KINTONE and obtain file keys
(2) Send the file key of (1) to the corresponding record and register it.
This procedure must be performed.
For each item, we will explain the process one by one.
(1) Subdomain name calling
| #2 | ."Variable/Global variable acquisitionto read the kintone subdomain set in the global variable. |
(2) Calling user authentication information
| #4 | ."Database/RetrievalUse the "User Authentication Information (X-Cybozu-Authorization:●●●)" to read the "User Authentication Information (X-Cybozu-Authorization:●●●)" stored in the DB. (0. described in Preparation)User Authenticationin your application and specify the DB there.) |
(3) Uploading files
| #6 | ."Variable/Environment variable acquisitionCall "kintone photo" using "kintone photo" and load the file name where the photo was saved. |
| #7 | ."String Functions/Concatenationand generate the RESTAPI URI (https://(subdomain name).cybozu.com/k/v1/file.json) as determined by KINTONE. This time, the contents of #2, which invoked the subdomain name, are concatenated with "/k/v1/file.json". |
| #8 | ."Network/HTTP requestto send data to kintone. Set each item as follows |
| #9,10 |
After uploading the file, click on the "File/Deleteto delete the image files, as well as using the "Variable/Environment Variable DeletionDelete the environment variable "kintone photo" using |
(4) Obtaining file keys
| #12 | Since the file key is included in the response that registers the record to KINTONE in #8, this is extracted from the response. Let's start with the #8 response, "Dictionary/Acquisitionto get the key: Body. |
| #13 | ."Dictionary/JSON readto convert #12 JSON to dictionaries. |
| #14 | ."Dictionary/Acquisitionto obtain the key: filekey. |
(5) Format data into a format for sending to kintone
When registering data in kintone, you must use the format specified by kintone (in this casethis way (direction close to the speaker or towards the speaker)andthis way (direction close to the speaker or towards the speaker)to format the data.
It will need to be formatted into the following format, and we will show you how to do this below.
| #16 | ."Control/Content AcquisitionSelect what is entered on the screen using the |
| #17 | First, we need to add a dictionary named [{filekey:filekey}], which is the content of the value when registering an attachment, to the "{filekey:filekey}" field.Dictionary/CreationThe "Create" will be created using the "Create" function. Enter filekey as the key and select the contents of #14 as the value. |
| #18 | Next, it must be in array form. To create an array in Unifinity, you must take an empty variable and create a dictionary with it as the key. For this reason, we must first determine whether the "Variable/Variable GetThe variable (NULL in this case) is called if it is not set in the "variable" (NULL in this case). |
| #19 |
."Dictionary/CreationUse "#18" to enter the empty variable #18 for the key and select the contents of #17 for the value. It can now be arrayed. |
| #20,21 |
."Dictionary/CreationThe "I" will be shaped using the "I". |
| #22 |
Next, create the format {String field code:#20,Attachment field code:#21}. |
| #23 |
Finally, create the format {"app": "(ID of app)", "record": {#22}}. |
| #24 |
Processes well-formed elements into JSON format. |
(6) Send data to kintone
When registering data in kintone, the URI (URI) specified by kintone (see below) must be used.This time, here it is.to send the data to the (M).
| #26 | ."String Functions/Concatenationand generate the RESTAPI URI (https://(subdomain name).cybozu.com/k/v1/record.json) as determined by KINTONE. This time, the contents of #2, which invokes the subdomain name, are concatenated with "/k/v1/record.json". |
| #27 |
."Network/HTTP requestto send data to kintone. |
3. stringing
Then, we ask you to link the screen to the process, and you are done.
In the next issue, we will show you how to create an application to advance your workflow in kintone.
The kintone application and sample projects used in this explanation can be downloaded from the following links.
kintone: File Upload Application
Unifinity: kintone file upload application