別アプリのレコードをマスタとして、複数のドロップダウンの表示内容を連動させる

コミュニティで提案されていたものを見よう見まねで利用してみましたが、

うまく作動しませんでした。

 

それぞれ

アプリA:ドロップダウンのマスタ用アプリ

アプリB:ドロップダウンを表示させるアプリ

を準備し、

 

アプリAにはフィールドコードとフィールド名を以下にした文字列(1行)入力フィールドを3つ設定、

 フィールド名およびフィールドコード:‘大カテゴリ’、 ‘中カテゴリ’、 ‘小カテゴリ’

 

アプリBにはフィールドコードとフィールド名を以下にしたドロップダウンフィールドを3つ設定しました。

 フィールド名およびフィールドコード:‘大’、 ‘中’、 ‘小’

 

いざ、アプリBを開くと、

一瞬、ドロップダウンのボックスが表示されますが、すぐに消えてしまいます。

前後に設定したラベルなどは表示されますが、肝心のドロップダウンのみが表示されて、すぐに消えてしまいます。

原因がわかりますでしょうか。

 

参考にしたコードは以下で提案されていたものです

https://gist.github.com/fddcddhdd/95cf9a4d5090cf886055#file-gistfile1-js

たけまつ様

 

初めまして。小野間と申します。

リンク先のコードをそのままご利用されているということですよね?

その場合、いくつか引っかかりやすそうなチェックポイントがあります。

1)アプリA(マスタ)のアプリ番号を確認し、アプリAには有効フラグと優先度のフィールドを設定する

|

// カテゴリーマスタ・アプリの情報  
var MASTER\_CATEGORY\_APP\_NO = 1;  
var MASTER\_CATEGORY\_QUERY = ' 有効フラグ in ("ON") ';

|

query:this.query+(' order by 優先度 asc limit '+this.limit+' offset '+this.offset)//order by,limit, offsetの順番じゃないとダメ!

 

例ではマスタアプリの番号は1ですが、実際のマスタアプリの番号に合わせてください。

また、有効フラグ(値はON)をチェックボックスで設定するのと、優先度のフィールドの設定が必要です。

 

2)アプリBのスペースフィールドの設定

|

// 大中小のプルダウンを表示するエリアを生成  
var mySpaceField = kintone.app.record.getSpaceElement('my\_space\_field');

|

ドロップダウンを表示させたい場所にIDを「my_space_field」としたスペースフィールドを設置する

 

3)保存用のフィールドの設置

>アプリBにはフィールドコードとフィールド名を以下にしたドロップダウンフィールドを3つ設定しました。

>フィールド名およびフィールドコード:‘大’、 ‘中’、 ‘小’

 

とありますが、アプリBには文字列(1行)フィールドでフィールド名およびフィールドコード:‘大’、 ‘中’、 ‘小’

を設置してください。

 

恐らくこの辺りが引っかかりそうかな、というポイントなので、ご参考までに。

小野間明子様

 

コメントありがとうございます。

ご指摘の点を修正してみます。

小野間様

 

ご指摘いただいた点を修正してみたのですが、

同じ症状が発生しました。

 

一瞬は表示されるので

2)アプリBのスペースフィールドの設定

3)保存用のフィールドの設置

のどちらかだ正しくできていないような気がするのですが。

 

各画面のスクリーンショットを添付しました。

ご指摘の点を正しく修正できているでしょうか。

 

アプリA画面

アプリB画面

たけまつ様

 

まず、コメント欄で指摘させていただいた箇所ですが、どの部分を修正していただいたのでしょうか。(修正前はどこの部分がどういう設定になっていましたか?)

修正後も全く同じエラーということなので念のための確認ですが、「アプリを更新」されていらっしゃいますでしょうか。

 

なお、一瞬は表示されるということなので恐らく、2)アプリBのスペースフィールドの設定だと思います。

お手数ですが、IDを「my_space_field」としたスペースフィールドを設定できているか、再度、ご確認いただくか

設定の画面を添付していただければ、と思います。

小野間様

 

返信ありがとうございます。

修正内容は以下の通りになります。

1)アプリA(マスタ)のアプリ番号を確認して、アプリAのアプリ番号に変更

変更前:var MASTER_CATEGORY_APP_NO = 1;

変更後:var MASTER_CATEGORY_APP_NO = 28;

(アプリAのURL https://XXXXX.cybozu.com/k/28/)

 

2)アプリAにチェックボックスフィールドで「有効フラグ」を設定

変更前:未設定

変更後:新規に設定

 

3)アプリAに文字列 (1行)フィールドで「優先度」を設定

変更前:未設定

変更後:新規に設定

 

4)アプリBにスペースフィールドの設定し、IDを「my_space_field」とする

変更前:未設定

変更後:新規に設定

 

5)アプリBに設定してあったドロップダウンフィールド3つを削除

変更前:ドロップダウンフィールドをフィールドコードとフィールド名を’大’、 ‘中’、 '小’して3つ設定

変更後:削除

 

6)アプリBに文字列(1行)フィールドをフィールド名およびフィールドコード:‘大’、 ‘中’、 '小’で設置

変更前:未設定

変更後:新規に設定

 

アプリAの設定画面

 

アプリBの設定画面

いずれもアプリは更新済みです。

小野間様

 

画像ファイルが破損してしまっているので、

ひとまずスペースフィールドの設定だけ再送します。

たけまつ様

画像を拝見する限り、設定は合っていそうですね。こちらの環境では、この設定で動作しているのですが…。

動作しないということなので、

https://developer.cybozu.io/hc/ja/articles/207613916

などを参考にデバッグしてみるのが良いと思います。

表示されたエラーメッセージがあれば、お知らせください。

小野間様

返信ありがとうございます。

 

デバッグを行ったところ下記のようなエラーが表示されました。

ブラウザはchromeを使用しました。

たけまつ様

ご返信有難うございます。また、デバッグ画面もありがとうございました。

「undefinedの’value’にアクセスしている」というエラーですよね。

ということは、まずコード内にてvalueでアクセスしようとしている

「BIG_CATEGORY_NAME」、「MIDDLE_CATEGORY_NAME」、「SMALL_CATEGORY_NAME」、

「MASTER_BIG_CATEGORY_NAME」、「MASTER_MIDDLE_CATEGORY_NAME」、「MASTER_SMALL_CATEGORY_NAME」

の辺りで設定が正しいかチェックするべきですね。(タイプミスなどがあるのかもしれません)

優先順位としては画像にない「中」、「小」、「大カテゴリ」、「中カテゴリ」、「小カテゴリ」辺りをチェックすることになりますね。

例えば、「大カテゴリ」、「中カテゴリ」、「小カテゴリ」のフィールドコードなど。

 

また、コードが正しくコピー&ペーストされているのかご確認ください。コードの変更箇所は

「var MASTER_CATEGORY_APP_NO = 1;」→「var MASTER_CATEGORY_APP_NO = 28;」のみです。

小野間様

 

コメントありがとうございます

 

ご指摘通りフィールドコードに誤りがあり、

修正後、ドロップダウンが表示され参照先のアプリにレコードを選択出来るようになりました。

ただ、いざ保存ボタンを押下しても作動しませんでした。

教えていただいたデバックで確認したところ下記のようなエラーが発生していました。

ググってみると「jqueryを読み込んでいない。」とのことらしいのですが、

どのように修正するかがわからず止まってしまっています。

 

何から何まで申し訳ありませんが、

解決方法はわかりますでしょうか。

たけまつ様

> ご指摘通りフィールドコードに誤りがあり、

> 修正後、ドロップダウンが表示され参照先のアプリにレコードを選択出来るようになりました。

 

解決されたようで、良かったですね。

 

jQueryの詳細については「第12回 jQueryを利用してみよう」をご参照ください。

例えば、

https://js.cybozu.com/jquery/2.2.4/jquery.min.js

を下図のように設定することで利用可能になります。

ただし最新版は

https://js.cybozu.com/jquery/3.3.1/jquery.min.js

のようです。

 

 

小野間様

 

保存までできるようになりました。

丁寧に解説していただきありがとうございました。