# 業務日報アプリのサブテーブルを訪問管理アプリで参照したいです **URL:** \ **Category:** kintone 開発相談\ **Created:** [2018 年 12 月 4 日午前 6:34 UTC](https://community.cybozu.dev/t/topic/3594 "2018-12-04T06:34:27Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![Legacy\_Account903](https://avatars.discourse-cdn.com/v4/letter/l/74df32/32.png) [@Legacy\_Account903](https://community.cybozu.dev/u/Legacy_Account903)\ **Post date:** [2018 年 12 月 4 日午前 6:34 UTC](https://community.cybozu.dev/t/topic/3594/1 "2018-12-04T06:34:27Z")
長文失礼いたします。   いつも大変お世話になっております。 当方プログラム経験はなく、kintoneの設計は約半月目になる初心者です。   下記のケースで運用可能か、またプログラムを書いてみたのですが全然うまくいかず、ご教示いただければ幸いです。 流れ ①業務日報で必要事項入力。レコード保存。(赤枠が欲しい情報です)②訪問管理で会社名を入力(赤枠内です)しましたら、下記のスペースに①の赤枠の情報を表示させるようにしたい。ここから、会社毎の訪問率の出力や訪問漏れを防ぐためリマインド機能を使って訪問履歴を管理していきたいと考えております。 * * * (function() { “use strict”; // スペースにレコード表示イベント作成 kintone.events.on(‘app.record.detail.show’, function(event){ // houmonはスペースの要素IDです kintone.app.record.setFieldShown(‘houmon’, true); }); // REST APIリクエスト送信 var params = { “app”: 28 }; kintone.api(‘/k/v1/record’, ‘GET’, params).then(function(resp) { // success:レコード番号を表示する alert(resp[‘record’][‘record\_no’][‘value’]); }, function(error) { //error:エラーの場合はメッセージを表示する var errmsg = ‘レコード取得時にエラーが発生しました。’; // レスポンスにエラーメッセージが含まれる場合はメッセージを表示する if (error.message !== undefined) { errmsg += ‘’ + error.message; } alert(errmsg); }); // REST API(レコードの一括取得) var body = { // 下記アプリID28は参照元の業務日報です “app”: 28, “fields”: [“訪問日時”, “終了日時”, “お客様社名”,“支店・事業所名”, “お客様担当者名”, “訪問目的”,“コメント”, “訪問数”] }; kintone.api(kintone.api.url(‘/k/v1/records’, true), ‘GET’, body, function(resp) { // success console.log(resp); }, function(error) { // error console.log(error); }); })(); ------------------------------------------------------------------------------------------------------一番の理想としましては、業務日報のテーブルの結果をそのまま訪問管理に持ってこれるとありがたいのですが、調べててもちんぷんかんぷんになってまいりまして。。。 以前こちらのフォーラムで投稿いただいた下記手順で作成いたしました。 1. アプリの設定 \> フォームの編集でスペースの設置 2. 設置したスペースの設定で、要素のIDを指定 3. JavaScriptで[レコードの表示イベント](https://cybozudev.zendesk.com/hc/ja/articles/201941974#step1)のハンドラーに、4,5の処理を記述 4. [REST APIリクエスト](https://cybozudev.zendesk.com/hc/ja/articles/202166310#step1)と[REST API(レコードの一括取得)](https://cybozudev.zendesk.com/hc/ja/articles/202331474#step2)を利用して、業務日報アプリからレコードを取得する 5. 取得したレコードを1,2で設置したスペースに表示する 以上、宜しくお願い致します。 ---
**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:** [2018 年 12 月 6 日午前 10:53 UTC](https://community.cybozu.dev/t/topic/3594/2 "2018-12-06T10:53:05Z")
岩上様 お世話になっております． cstapの江田と申します． 以下のようなコードで実装できるかと思います． レイアウトはCSSで調節してください． ``` (function(){"use strict";kintone.events.on('app.record.detail.show',function(event){kintone.api(kintone.api.url('/k/v1/records',true),'GET',{app:28,query:'お客様社名 in ("'+event.record.お客様社名.value+'")'}).then(function(response){kintone.app.record.getSpaceElement('houmon').innerHTML='\'+'\'+'\訪問日時\'+'\終了日時\'+'\お客様社名\'+'\支店・事業所名\'+'\お客様担当者名\'+'\訪問目的\'+'\コメント\'+'\訪問数\'+'\'+response.records.reduce(function(histories,record){returnhistories.concat(record.Table.value.filter(function(row){returnrow.value.お客様社名.value===event.record.お客様社名.value;}));},[]).reduce(function(html,row){return(html+'\'+'\'+row.value.訪問日時.value+'\'+'\'+row.value.終了日時.value+'\'+'\'+row.value.お客様社名.value+'\'+'\'+row.value.支店・事業所名.value+'\'+'\'+row.value.お客様担当者名.value+'\'+'\'+row.value.訪問目的.value+'\'+'\'+row.value.コメント.value+'\'+'\'+row.value.訪問数.value+'\'+'\')},'')+'\';});});})(); ``` ただし，サブテーブルのフィールドコードは「Table」としています． ---
**Author:** ![Legacy\_Account903](https://avatars.discourse-cdn.com/v4/letter/l/74df32/32.png) [@Legacy\_Account903](https://community.cybozu.dev/u/Legacy_Account903)\ **Post date:** [2018 年 12 月 7 日午前 9:35 UTC](https://community.cybozu.dev/t/topic/3594/3 "2018-12-07T09:35:59Z")
江田様   いつも大変お世話になっております。 ご返信ありがとうございます！ またご連絡が遅くなりまして申し訳ありません。   頂いた修正内容で、試したところ思っていた通りの動作となりました！ ※私のミスで一部全角が混ざっておりそちらを修正したら動作しました。   レイアウト変更の件、一度CSSについて調べてみます。   本当に助かりました。有難うございます。 以上、今後ともよろしくお願いいたします。 ---
**Author:** ![Legacy\_Account903](https://avatars.discourse-cdn.com/v4/letter/l/74df32/32.png) [@Legacy\_Account903](https://community.cybozu.dev/u/Legacy_Account903)\ **Post date:** [2018 年 12 月 11 日午前 7:24 UTC](https://community.cybozu.dev/t/topic/3594/4 "2018-12-11T07:24:35Z")
江田様 いつも大変お世話になっております。 あの後、cssやカスタマイズビュー、htmlについて調べておりまして、javascriptを使って、文字のサイズや背景色・外枠の作成はできたのですが、 エクセルの表のように格子状(グリッド)にしたいのですが、javascriptのみでの追加は無理なのでしょうか。   現状 更新後 カスタマイズビューは、[https://developer.cybozu.io/hc/ja/articles/202905604](https://developer.cybozu.io/hc/ja/articles/202905604) こちらをご参考にさせて頂き作成したのですが うまくいかず、要素としてレコード内のものというより他のアプリからとってきたスペースの要素を取ってくる考えで またしてもつまずいてしまいました。   現状の、javascriptは下記内容で作成しております。念の為記載いたします。 (function() { “use strict”; kintone.events.on([‘app.record.detail.show’], function(event) { var space = kintone.app.record.getSpaceElement(‘houmon’).parentNode; space.style.background = ‘#ddd’; space.style.width = ‘800px’; space.style.height = ‘500px’; space.style.border = “solid thick black”; return event; }); })();   度々申し訳ありませんがご教示の程、宜しくお願い致します。 ---
**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:** [2018 年 12 月 12 日午前 1:04 UTC](https://community.cybozu.dev/t/topic/3594/5 "2018-12-12T01:04:48Z")
岩上様 お世話になっております． JavaScriptのみで指定できなくもありませんが，基本的にはstyleはCSSファイルに記述した方が良いかと思います． JavaScriptでスペースフィールドにclassを追加して，CSSでstyleを記述します． ・JavaScript ``` (function(){"use strict";kintone.events.on('app.record.detail.show',function(event){kintone.app.record.getSpaceElement('houmon').classList.add('houmon-space');//追加kintone.api(kintone.api.url('/k/v1/records',true),'GET',{app:28,query:'お客様社名 in ("'+event.record.お客様社名.value+'")'}).then(function(response){...});});})(); ``` ・CSS ``` .houmon-space{background:#ddd;width:800px;height:500px;}.houmon-spaceth,.houmon-spacetd{border:1px#000solid;} ``` ---
**Author:** ![Legacy\_Account903](https://avatars.discourse-cdn.com/v4/letter/l/74df32/32.png) [@Legacy\_Account903](https://community.cybozu.dev/u/Legacy_Account903)\ **Post date:** [2018 年 12 月 12 日午前 3:35 UTC](https://community.cybozu.dev/t/topic/3594/6 "2018-12-12T03:35:09Z")
江田様 いつも大変お世話になっております。 上記プログラムで無事やりたかったことが実現できました！ 本当にありがとうございます。 また、行間については、paddingで見やすくできました。   JavascriptとCSSの使い分けや概念について理解が足りなったです。 これからもっと実践を積んで、理解していきたいと思いました。   以上、今後とも宜しくお願い致します。