Form Bridge with kViewer to Pull Data from Kintone Apps Tutorial

Back to Form Bridge Overview page

Introductory

When creating a public web form using Form Bridge, data in Kintone can be referenced and pulled with the kViewer integration.
Form Bridge kViewer integration
We will go through how to set up the Form Bridge “Quote Request Form” references data of the “Product Master App” in Kintone.

Step 1. Create the Product Master App in Kintone

Login to Kintone. Create a new app. You may already have a Product Master App, but for the tutorial, we will use a simple app with the Product ID, Product Name, and Price.
Product Master DB

Step 2. Create a Public API View in kViewer

Login to kViewer. From the “Create a new view” screen, click on “Public API” to make a Public API View and register the necessary information.
Reference: Getting Started with kViewer
kviewer create new view
Enter in the fields you’d like to use with the kViewer lookup as well as the number of records to fetch with a single request. The number of records you specify for a single request will be the number of records that are shown on a single page of the lookup. Make sure to save, deploy, and make the view public.
kviewer public api settings

Step 3. Create the Quote Request Management App in Kintone

Create a new app in Kintone. For all the fields that are planned to use the kViewer lookup function to pull data from Kintone, do not use the “Lookup” field on the Kintone. Form Bridge does not support the “Lookup” field on Kintone. Therefore, the key of the lookup field in the Kintone app will not be displayed on the Form Bridge form.
Quote Request Management App Form Settings

Step 4. Create the Quote Request form in Form Bridge

Login to Form Bridge and create a new web form using the Quote Request Management App.
Reference: Getting Started with Form Bridge
Form Bridge preview

Step 5. Set up the kViewer Lookup in Form Bridge

Make sure to be signed into kViewer and Form Bridge in the same browser. In Form Bridge, go to the kViewer tab and click the blue button to connect kViewer and Form Bridge.
Form Bridge kviewer integration setup
If the text on the button has changed to “Update to kViewer connection” then you’re on the right track. Next we will move on to the field settings.
form bridge kviewer integration success
You should now be able to use the “kViewer Lookup” field.
Form Bridge kviewer lookup field
Add a kViewer Lookup field to your form and click on the gear mark to go to the settings.
Form Bridge kviewer lookup field settings

Then, enter in the settings for the lookup as follows.

kviewer lookup settings
A. Base view of lookup: Select the view created on Step 2.
B. Display kViewer field: Select the information to display when referencing data.
C. Search field: Select the field to use to search. Checking the box will prevent partial matches from being returned in the search.
D. Change a field’s value in a record from the API view when selecting: Set up the Form Bridge fields you would like the kViewer lookup fields to populate.
Save the form, and deploy. Let’s test out the lookup on the form.
Form Bridge kviewer lookup setup form

The lookup has been created. Try entering in a product name.

Form Bridge kviewer lookup search
The data that applies to that search will appear.
Form Bridge kviewer search result
The information shown at this stage is from the fields that were selected in B earlier. Furthermore, the maximum number of fields shown on one page here is what was decided in step 2 when the kViewer Public API View was created. Clicking “Select” will insert the selected data into the appropriate fields of the form.
Form Bridge kviewer lookup success

Navigate

Back to Form Bridge Overview page