# 【フォームブリッジ】Kviewerルックアップのカスタマイズ

**URL:** <https://community.cybozu.dev/t/topic/4228>\
**Category:** kintone 開発相談\
**Created:** [2019 年 7 月 12 日午前 1:23 UTC](https://community.cybozu.dev/t/topic/4228 "2019-07-12T01:23:02Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account600](https://avatars.discourse-cdn.com/v4/letter/l/bcef8e/32.png) [@Legacy\_Account600](https://community.cybozu.dev/u/Legacy_Account600)\
**Post date:** [2019 年 7 月 12 日午前 1:23 UTC](https://community.cybozu.dev/t/topic/4228/1 "2019-07-12T01:23:02Z")

</div>

フォームブリッジ上において、

銀行名を入れれば、それに付随した銀行コードや支店名・支店コードが一覧で出され、

そこからさらに支店名で絞込できるようにしたいと考えてます。

&nbsp;

銀行名・銀行コード・支店名・支店コードの一覧データはkintone上で持っているため、

Kviewerルックアップを使えないかと考えたのですが、

Kintoneでは可能な、検索結果後にさらにフィルターをかける機能がありませんでした。

銀行名と支店名でルックアップを分ければいいとも思ったのですが、

同じ支店名、例えば新宿支店となっていても、新宿支店がある銀行は多数存在するため、

銀行コードとそれに対応した支店コードではない可能性があり、

この方法は避けたいです。

&nbsp;

また、Kviewerの外部公開APIで絞込条件もできなくはないのですが、

全国の銀行の1300弱分を登録するのは非常に時間がかかるので、避けたいです。

&nbsp;

よって、Kintoneでのルックアップと同じように、

検索結果後にさらにフィルターをかける機能があればいいのですが、

どのようにすれば実装できますか？

&nbsp;

もしくは、[https://bankcode-api.appspot.com/](https://bankcode-api.appspot.com/)

のような外部APIを使えればよいのですが、

フォームブリッジに組み込むことは可能なのでしょうか？

&nbsp;

ご教示いただけると幸いです。

よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1740](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@Legacy\_Account1740](https://community.cybozu.dev/u/Legacy_Account1740)\
**Post date:** [2019 年 7 月 18 日午前 4:22 UTC](https://community.cybozu.dev/t/topic/4228/2 "2019-07-18T04:22:15Z")

</div>

kyoden様

お世話になっております。  
トヨクモの江田と申します。

kViewerの外部公開APIを用いるのがよいと思います。  
kViewerの設定画面で絞り込み条件を作成しなくても、リクエストパラメータによって検索条件を追加できます。

下記ページの「外部公開API」の箇所に、リクエストパラメータの説明がございます。  
[https://viewer.kintoneapp.com/help/ja/customize](https://viewer.kintoneapp.com/help/ja/customize)

---

<div class="post-metadata">

**Author:** ![Legacy\_Account600](https://avatars.discourse-cdn.com/v4/letter/l/bcef8e/32.png) [@Legacy\_Account600](https://community.cybozu.dev/u/Legacy_Account600)\
**Post date:** [2019 年 7 月 18 日午前 10:24 UTC](https://community.cybozu.dev/t/topic/4228/3 "2019-07-18T10:24:58Z")

</div>

江田様

ご教示いただき誠にありがとうございます。

ただし、私が初心者なのもあって、内容があまり理解できておりません。

もう少しこちらの使い方についてご教示いただくことは可能でしょうか？

&nbsp;

また、こちらを実装した際の実際の動きが分かれば、

非常に理解しやすいのですが、何か作成例等はありますか？

&nbsp;

また、仮にこちらを理解できたとして、

銀行で1300件、支店であれば30000件近くあるものを

実装するのは現実的でしょうか？

&nbsp;

大変お手数をおかけいたしますが、

よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1740](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@Legacy\_Account1740](https://community.cybozu.dev/u/Legacy_Account1740)\
**Post date:** [2019 年 7 月 25 日午前 4:25 UTC](https://community.cybozu.dev/t/topic/4228/4 "2019-07-25T04:25:49Z")

</div>

kyoden様

お世話になっております。  
返信が遅くなり、申し訳ございません。

JavaScriptカスタマイズによって実装できます。

データの取得方法についてご説明します。

FormBridgeに、下記の「generateUrl.js」、「sample.js」を順に読み込ませます。

・generateUrl.js

```
const generateUrl = (baseUrl, params = {}) => {
  let queryParams = []
  if (params !== [] && params !== {}) {
    const add = (key, value) => {
      // if value is a function then call it and assign it's return value as value
      value = (typeof value === 'function') ? value() : value

      // change null to empty string
      value = (value === null) ? '' : value

      queryParams.push(encodeURIComponent(key) + '=' + encodeURIComponent(value))
    }
    const buildQueryParams = (prefix, params, add) => {
      const rbracket = new RegExp(/\[\]$/)
      if (params instanceof Array) {
        params.forEach((val, i) => {
          if (rbracket.test(prefix)) {
            add(prefix, val)
          } else {
            buildQueryParams(prefix + '[' + (typeof val === 'object' ? i : '') + ']', val, add)
          }
        })
      } else if (typeof params === 'object') {
        for (let name in params) {
          buildQueryParams(prefix + '[' + name + ']', params[name], add)
        }
      } else {
        add(prefix, params)
      }
    }

    for (let prefix in params) {
      buildQueryParams(prefix, params[prefix], add)
    }
    return baseUrl + '?' + queryParams.join('&').replace(/%20/g, '+')
  } else {
    return baseUrl
  }
}

```

・sample.js

```
(function() {
  "use strict"
  fb.events.form.mounted = [function(state){
    var searchButton = document.createElement('a')
    searchButton.innerText = '検索'
    searchButton.addEventListener('click', function(){
      var apiUrl = 'https://viewer.kintoneapp.com/public/api/records/ ****** /1' //kViewerの外部公開APIのURL
      var xhr = new XMLHttpRequest()
      xhr.open('GET', generateUrl(apiUrl, {
        additionalFilters: ['銀行名', '支店名'].filter(function(fieldCode){
          return state.record[fieldCode].value
        }).map(function(fieldCode){
          return {
            with: 'and',
            field: fieldCode,
            sign: 'like',
            value: state.record[fieldCode].value
          }
        })
      }))
      xhr.addEventListener('load', function(){
        console.log(JSON.parse(xhr.response))
        /*
          UI作成．
        */
      })
      xhr.send()
    })
    fb.getElementByCode('label').appendChild(searchButton)
  }]
})()

```

銀行名フィールド、支店名フィールドのフィールドコードはそれぞれ「銀行名」、「支店名」と想定して記述しました。  
また、検索ボタン設置のために、フィールドコード「label」のラベルフィールドをFormBridgeに追加してください。

上記のコードで、銀行名と支店名で絞り込んだデータの取得ができます。  
console.log()で出力しているので、ブラウザのコンソール画面にて、取得したデータを確認できます。  
コンソール画面の見方:&nbsp;[https://developer.cybozu.io/hc/ja/articles/207613916](https://community.cybozu.dev/hc/ja/articles/207613916)

取得したデータをもとに、選択肢の作成やフォームへの反映といったUI部分のコードを作成するとよいと思います。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account600](https://avatars.discourse-cdn.com/v4/letter/l/bcef8e/32.png) [@Legacy\_Account600](https://community.cybozu.dev/u/Legacy_Account600)\
**Post date:** [2019 年 7 月 25 日午前 10:05 UTC](https://community.cybozu.dev/t/topic/4228/5 "2019-07-25T10:05:37Z")

</div>

こちらのスクリプト作成いただき誠にありがとうございます。

これらをFormBridge側に読み込ませましたが、検索ボタンをクリックすることができませんでした。

「検索」という文字自体は表示されています。

また、FormBridgeのフィールド形式：フィールドコードを下記のように設定しました。

文字列一行：銀行名

文字列一行：支店名

ラベル：label

apiUrlには今回使いたい外部公開APIのURLを入れています。

銀行名か支店名をkviewerルックアップフィールドにしなければならないのでしょうか？

&nbsp;

また、こちらのスクリプトですと、

検索した結果、銀行コードや支店コードをコピーする記述が無さそうですが、

そちらは追加しなければならないでしょうか？

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1740](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@Legacy\_Account1740](https://community.cybozu.dev/u/Legacy_Account1740)\
**Post date:** [2019 年 7 月 25 日午前 10:24 UTC](https://community.cybozu.dev/t/topic/4228/6 "2019-07-25T10:24:22Z")

</div>

kyoden様

お世話になっております。

すれ違いでコメントしてしまいました。

[https://developer.cybozu.io/hc/ja/community/posts/360047967851](https://community.cybozu.dev/hc/ja/community/posts/360047967851)  
でやり取りする形でもよろしいでしょうか？

---

<div class="post-metadata">

**Author:** ![Legacy\_Account600](https://avatars.discourse-cdn.com/v4/letter/l/bcef8e/32.png) [@Legacy\_Account600](https://community.cybozu.dev/u/Legacy_Account600)\
**Post date:** [2019 年 7 月 26 日午前 12:03 UTC](https://community.cybozu.dev/t/topic/4228/7 "2019-07-26T00:03:19Z")

</div>

かしこまりました。

そちらでお願いいたします。

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2024 年 10 月 29 日午前 8:36 UTC](https://community.cybozu.dev/t/topic/4228/8 "2024-10-29T08:36:24Z")

</div>

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。