はじめに
関連レコードを利用する際に、参照先のアプリに新規のレコードを追加するのは
ちょっと時間がかかってしまいます。
標準機能での遷移
このTipsでは、関連レコードを利用しているアプリから
参照先での新規のレコード追加画面に値を引継ぎつつ遷移することで
新規レコード作成の手間を減らすカスタマイズをご紹介します。
本Tipsを適用した後の遷移
なお、アプリアクションを利用することで、値を引継ぎつつ新規のレコード登録をすることも可能ですが
カスタマイズを使えば、レコードの情報を参照して新規レコード作成ボタンを非表示にしたり
参照先の新規レコード作成時にルックアップを併せて使うことができます。
準備
この本Tipsのサンプルを作成するにあたって、アプリストアから営業支援(SFA)パックを追加し
顧客情報アプリの会社名のフィールドコードと案件情報の顧客名のフィールドコードを"company"に変更ください。
また、関連レコードのフィールドコードは”relation”としています。
また、関連先のアプリに遷移するためのボタンを設置する「スペースフィ―ルド」を
関連レコードが表示される箇所の近くに設置します。
ここでスペースフィールドの要素IDは”jump_button”と設定しました。
営業支援(SFA)パックで追加される案件情報のアプリでは、すでに顧客情報アプリの"company"のフィールドを参照する
ルックアップフィールドが設定されており、部署名とご担当者名が引き継がれる形になっております。
顧客情報アプリで新規レコード追加に遷移するボタンを押下したとき、ルックアップの値が入力するように
ルックアップの取得を自動で行うのTipsも盛り込んだサンプルを作成しました。
このカスタマイズでは、顧客情報アプリ内の関連レコードのアプリIDを取得し
設置されたボタンを押下することで、案件情報アプリの新規レコード追加画面に遷移します。
サンプルプログラム
なお、上記のサンプルコード内でのボタン表示はCybozu CDNからjQueryを利用しています。
また新デザインに対応させるために、kintone Plug-inで紹介されている51-modern-default.cssも適用ください。
使用したAPI
最後に
新規レコードに1クリックで飛べて、フィールドにも値が入ります。
このカスタマイズTipsを体験してしまうと
関連アプリのレコード詳細画面参照＋新規レコード登録＋フィールドに値はじめから入力
という操作をしていたころに戻れなくなるほど楽になります、ぜひ、お試しください！
注意事項
- Chromeブラウザでのみ動作を確認しております。
アクションボタンを使うのと、機能的に違うところはありますか？
ボタンの設置場所が関連レコードの近くにできるところ以外でもしあればご教示のほどよろしくお願いいたします。
↑すみません、記事の中に書かれているのを見落としていました><
関連レコードが存在する場合、非表示にする事は可能でしょうか？
Toshi 様
関連レコードが1件以上の場合に非表示にするというのはいかがでしょうか。
件数取得はこちらの情報が参考になりそうです。
https://cybozudev.zendesk.com/hc/ja/articles/213209606
https://cybozudev.zendesk.com/hc/ja/articles/203030394
https://cybozudev.zendesk.com/hc/ja/community/posts/201537544
サンプルでは、追加登録ボタンで別タブに案件情報が表示されると思いますが、
案件情報画面のキャンセルボタンを押しても何も起こりません。
これは意図通りの動きでしょうか？
意図通りであれば、キャンセルボタンを表示しないか、キャンセルボタンを押したら、自タブを
閉じるようなカスタマイズができないか。方法を探しています。
Ryo Kobayashi様
いつもお世話になっております。
cybozu.com developer network事務局です。
別タブで表示されたレコード登録画面で「キャンセル」ボタンを押した時の挙動についてですが、
ブラウザの戻ると同じ動作をしているため、戻る先がない状態になりますので、画面遷移できない
状況になっております。
別の方からも同様のご質問をいただき、ご回答いただいたことがあります。
サンプルコードも記載していただいておりますので、是非参考にしていただければと思います。
○キャンセルボタンが効かなくなる
https://cybozudev.zendesk.com/hc/ja/community/posts/115000486103
よろしくお願いいたします。
顧客情報画面にて追加登録ボタン押下により表示された
案件情報画面にて保存ボタンを押下した場合。
案件情報画面を閉じ顧客情報画面に戻りたいのですが
何か方法がありますでしょうか?
また顧客情報画面に戻った際に、今回登録された案件情報を画面に反映させたいのですが
自動で画面更新などを行わせる方法がありますでしょうか?
以上、ご教授をよろしくお願いいたします。
Y.Takeuchi様
申し訳ありませんが、ご質問はJavaScriptの記述方法の範疇になると思いますため、
基本的には cybozu developer コミュニティ をご活用ください。
その上で見解を述べさせていただきます。
最初のご質問としては、案件情報画面の保存ボタンを押すイベントが発火したときの処理は、案件管理側のアプリのJavaScriptでしか制御できないと思うため、顧客情報アプリから遷移したときのみの条件で顧客情報画面に戻る、というのはおそらくできないか難しいかと存じます。
2つ目のご質問としては、location.reload()を実行することで画面の更新処理はできますが、
1つ目のご質問と同様に、案件情報が画面に登録されるタイミングで、ということが、別アプリなので難しいように思います。
自動更新処理そのものについてはサイトヘッダーの「検索」ボタンから"location.reload"キーワードでサイト内検索いただくと、いろいろと方法が見つかると思います。
ここで質問すべきことではないかもしれませんが・・・
ie11で動作せず(新規追加ボタンを押下しても新しいウィンドウは開きましたが、検索項目が引き継がれていませんでした。)
コンソールで確認したところ「オブジェクトは 'addEventListener' プロパティまたはメソッドをサポートしていません。」が表示されていました。
IEの互換表示設定解除などを行いましたがうまく表示されませんでした。良い方法ご教示ください。
福里様
投稿いただいたところ恐縮ですが、ブラウザの設定かJavaScriptの書き方の範疇になると思われるため、
コミュニティの方に投稿をお願いできますでしょうか。
本サンプルと同じコードを書いているのです「new_app.app.record」がnullになってしまいます。
console.logで見る限りnew_app.appまでは取れていると思うのですが…
hohashi 様
new_app.app.record.set() は、kintone.app.record.set() 関数と同様の関数を使用しています。
そのため、new_app.app までが正しく取得できている場合、new_app.app.record も正しく取得できます。
１点ほど確認させてください。
使用しているブラウザは chrome でお間違いないでしょうか。
注意事項にもある通り、chrome ブラウザでのみ動作を確認しております。
他のブラウザのご利用の場合は正しく動作しない可能性があります。
PCでは問題なく動作するのですが、
モバイルでは動きません。
（新タブは開くが、値を持ってこれてない）
モバイルでも同じことは出来ないでしょうか。
TK 様
お世話になっております。
cybozu developer network 事務局です。
こちらのカスタマイズは、chrome ブラウザでのみ動作を確認しております。
そのため他のブラウザやデバイスでご利用の場合は、正しく動作しない可能性があります。
また、本コメント欄は、記事へのフィードバックを目的としておりますので、
具体的なカスタマイズ方法や技術的な質問につきましては、
cybozu developer コミュニティをご活用ください。
お手数をおかけいたしますが、よろしくお願いいたします。