\
**Category:** Garoon カスタマイズ\
**Created:** [2022 年 9 月 7 日午前 12:19 UTC](https://community.cybozu.dev/t/topic/35 "2022-09-07T00:19:48Z")\
**Posts on this page:** 20\
**Page:** 1
**Author:**  [@Legacy\_Account2091](https://community.cybozu.dev/u/Legacy_Account2091)\
**Post date:** [2022 年 9 月 7 日午前 12:19 UTC](https://community.cybozu.dev/t/topic/35/1 "2022-09-07T00:19:48Z")
いつも大変お世話になっております。本日は表題の質問をするために投稿致しました。が、説明が拙いので図も添えて記述致します、わかり辛く申し訳ございません。
・TIS社のフリープラグイン「テーブルデータ一括表示プラグイン」を使用した、kintoneアプリをGaroon上にHTMLポーレットで挿入しました。
・当該HTMLポーレット上のアプリの一覧画面から、レコード編集ボタンを押すと、通常kintoneアプリに飛んで詳細画面となるはずですが、HTMLポーレット上のまま詳細画面展開してしまいます。
このアプリも他のアプリ同様に、GaroonのHTMLポーレットからkintoneの詳細画面に展開するようにしたいのですが、GaroonのHTMLポーレット設定内容や、kintoneのアプリ設定内容の変更で対応することは可能でしょうか。
このフリープラグインが大変便利なので、GaroonのHTMLポーレットと共存して使用したいのです、、何卒ご教示のほど宜しくお願い致します。
---
**Author:**  [@Legacy\_Account2757](https://community.cybozu.dev/u/Legacy_Account2757)\
**Post date:** [2022 年 9 月 8 日午前 2:37 UTC](https://community.cybozu.dev/t/topic/35/2 "2022-09-08T02:37:43Z")
豊和会 本部様
HTMLポートレットの利用経験はないのですが，
クラウド版の説明を見ると，「HTMLタグは小文字で」とありました．
「ポートレットの内容」(画像3つめ)のframeBorderのBが大文字になっています．
これが原因かはわかりませんが，ほかにも規則があるようなので，
一度確認しなおしてみるのが良いかと思います．
---
**Author:**  [@Legacy\_Account2091](https://community.cybozu.dev/u/Legacy_Account2091)\
**Post date:** [2022 年 9 月 8 日午前 3:05 UTC](https://community.cybozu.dev/t/topic/35/3 "2022-09-08T03:05:18Z")
TO様
ご返信ありがとうございます。また、ご指摘もありがとうございました。早速ながらにBを小文字に修正しましたが、画面遷移は変わらずでした。。
kintone側で、TIS社のフリープラグイン「テーブルデータ一括表示プラグイン」を無効にすると、問題ないのですが、このプラグインをどうしても使いたくて、、、、
同じようにこのプラグインを使いながら、GaroonのHTMLポーレットで挿入してらっしゃる方、、何か方法はありますでしょうか？
---
**Author:**  [@Legacy\_Account2757](https://community.cybozu.dev/u/Legacy_Account2757)\
**Post date:** [2022 年 9 月 8 日午前 5:35 UTC](https://community.cybozu.dev/t/topic/35/4 "2022-09-08T05:35:36Z")
豊和会 本部様
テーブルデータ一括表示プラグインの「レコード詳細へのリンクボタン」は，
kintone標準のそれとは中身が違うので，それが原因と思います．
（詳細レコードに遷移する仕組みが違うということ）
できることがあるとすれば，アプリにリンクフィールドを用意して，
javascriptかなにかをつかってレコード保存時に自分のレコードのURLを格納して，一覧にそれを表示する，
またはDOM操作でア豊和会 本部様
テーブルデータ一括表示プラグインの「レコード詳細へのリンクボタン」は，
kintone標準のそれとは中身が違うので，それが原因と思います．
（詳細レコードに遷移する仕組みが違うということ）
できることがあるとすれば，アプリにリンクフィールドを用意して，
javascriptかなにかをつかってレコード保存時に自分のレコードのURLを格納して，一覧にそれを表示する，
それと未検証ですが，テーブルデータ～のアイコンがbutton属性だったので無理やりonclickを設定して
詳細画面へのリンクを貼る，などでしょうか…．
---
**Author:**  [@Legacy\_Account2091](https://community.cybozu.dev/u/Legacy_Account2091)\
**Post date:** [2022 年 9 月 8 日午前 7:01 UTC](https://community.cybozu.dev/t/topic/35/5 "2022-09-08T07:01:02Z")
TO様
追加でのアドバイスを本当にありがとうございます。
リンクフィールドを一覧に追加する方法は、思いもよりませんでした。
早速追加してみましたが、わたくしの力量ではkintoneのアプリまでの指定しかできず、、、
GaroonのHTMLポーレットで指定したアプリの”レコード”まで指定できずにおります。。。
思いがけず素敵なアイデアを頂いてとても嬉しいのですが、、、
javascriptでレコード保存時に、自分のレコードのURLを格納する方法をご教示いただける方、いらっしゃいませんでしょうか。。
---
**Author:**  [@Legacy\_Account2757](https://community.cybozu.dev/u/Legacy_Account2757)\
**Post date:** [2022 年 9 月 9 日午前 12:20 UTC](https://community.cybozu.dev/t/topic/35/6 "2022-09-09T00:20:37Z")
豊和会 本部様
レコード保存時(submit)では，まだ当該レコードにレコード番号が付与されていません．
実行するならレコードの保存成功時(submit.success)になります．
ただ，そうなるとevent.recordに値を戻してreturnすることができないので，API(PUT)を使う方法になるかと思います．
例示しますので，参考になれば幸いです．
```
(function () {
"use strict";
kintone.events.on([
'app.record.create.submit.success',
'app.record.edit.submit.success',
],function(event) {
const fldLink = 'リンクフィールドのフィールドコード';
const myAppURL = 'アプリのURL(https://～アプリID/)';
//リンクフィールドに何か入っていたら抜ける
if(event.record[fldLink].value){return event;}
const url = myAppURL + 'show#record=' + event.recordId;
//PUT用のbody生成
const body = {
app: kintone.app.getId(),
id: event.recordId,
record: {
[fldLink]: {value: url}
},
};
//PUT
return kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', body).then(function(resp) {
console.log(resp);
return event;
}).catch (function(error) {
console.log(error);
});
});
})() ;
```
レコードIDの取得方法にはほかにkintone.app.record.getId()があるのですが，
こちらはレコードが完全に保存された後(詳細画面表示後)でないとnullになってしまい，
つまり新規登録時では使えないのでevent.recordIdを使っています．
フィールド名やアプリのURLを変数にいれていたりしていますが，
一例だと思って適宜修正，編集等してください．
---
**Author:**  [@Legacy\_Account2091](https://community.cybozu.dev/u/Legacy_Account2091)\
**Post date:** [2022 年 9 月 9 日午前 1:47 UTC](https://community.cybozu.dev/t/topic/35/7 "2022-09-09T01:47:48Z")
TO様
大変お世話になっております、またお忙しい中時間を割いてお付き合いいただき、誠にありがとうございます。
早速ながらにご教示いただいた方法を使わせて頂き、まさに私の希望通りの画面遷移が実現致しました！
本当にありがとうございます。
そこで、、、更に一つ、、もしも可能であればご教示頂きたいのですが、、、アプリの一覧画面に表示される”リンク”を、
リンク機能は持たせたまま、短縮表示出来たりするものなのでしょうか。。。
（信じられない、この図々しい質問、、本当に恐縮しております。。）
---
**Author:**  [@Legacy\_Account2757](https://community.cybozu.dev/u/Legacy_Account2757)\
**Post date:** [2022 年 9 月 10 日午前 12:11 UTC](https://community.cybozu.dev/t/topic/35/8 "2022-09-10T00:11:01Z")
豊和会 本部様
手前味噌ではありますが、先日別件で紹介したコードを少し改変しました。
```
kintone.events.on([
'app.record.index.show',
], function(event) {
//一覧に表示されているレコードすべての「リンク(フィールドコード)」のフィールド要素を取得
const fldLink = kintone.app.getFieldElements('リンク');
//一覧に表示されているレコードをループ
event.records.forEach((rec,id) => {
//「リンク」のフィールド要素のinnerText(表示部分)を[詳細]に変更
fldLink[id].firstChild.firstChild.innerText = '[詳細]';
});
});
```
getFieldElementsで一覧画面上のフィールド要素を取得して、DOM操作をしています。
[getFieldElements](https://community.cybozu.dev/hc/ja/articles/201942004-%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E4%B8%80%E8%A6%A7%E6%83%85%E5%A0%B1%E5%8F%96%E5%BE%97#step3)
これなら、レコードの中身は変えずに見た目だけ変えられます。
コードは未検証です。適宜修正下さい。
---
**Author:**  [@Legacy\_Account2091](https://community.cybozu.dev/u/Legacy_Account2091)\
**Post date:** [2022 年 9 月 12 日午前 2:49 UTC](https://community.cybozu.dev/t/topic/35/9 "2022-09-12T02:49:11Z")
TO様
いつも大変お世話になっております。今回もご教示頂き、重ねてお礼申し上げます。
早速ながらに教えて頂いたJSを取り込んでみました。
そうしましたら、アプリを開いた時、一覧画面にURLが〔詳細〕となって表示されました！ありがとうございます。
ですが、そのすぐ後に「テーブルデータ一括表示プラグイン」が作動すると、表示はURLの状態に戻りました。
もしかして、わたくしのJSファイルの取り込み順が、よろしくないのでしょうか。。
「テーブルデータ一括表示プラグイン」動作後の一覧画面においても〔詳細〕と短縮された表示とするには、何かタイミングの指定が必要なのでしょうか。。。。（わたくしには到底わからないのですが。。。。申し訳ございません。）
---
**Author:**  [@Legacy\_Account2757](https://community.cybozu.dev/u/Legacy_Account2757)\
**Post date:** [2022 年 9 月 13 日午前 12:42 UTC](https://community.cybozu.dev/t/topic/35/10 "2022-09-13T00:42:36Z")
豊和会 本部
プラグインの表示まで考慮できていませんでした．
kintoneの仕様で，読み込みの順番はユーザーのjavascript→プラグインの順になります．
また，プラグインで表示される一覧と通常の一覧では構成するHTML要素が異なるため，
以前に提示したコードでは通常の一覧部分しか修正されません．
ということで，ちょっと手段を選ばない感じにはなりますが，
プラグインが展開するまで待機ループ(再帰処理)→プラグイン展開後に表示されるHTML要素を取得，
表示文字列を変更する，というコードが下記になります．
```
//プラグイン上の，リンクがある箇所の要素id（フィールド名）
const myEleId = 'リンク'
//プラグインで生成するタグを取得できるまで繰り返す
const getId = function(){
//同一idで複数あるのでquerySelectorAllで配列で取得
const stat = document.querySelectorAll("[id=" + myEleId + "]");
//配列がある(要素を取得できた)かどうか判定
if(stat.length){
stat.forEach((ele) => {
//親要素の配下にあるdiv要素のさらに配下のa要素を取得
const ele_a = ele.querySelectorAll("div a");
//配列になるので0番目を指定
if(ele_a.length){
//表示文字を[詳細]にhね項
ele_a[0].innerText = '[詳細]';
}
});
return stat;
}else{
//配列として取得できなかった場合はfalseを返して再帰する
return false;
}
};
//getIdからstatを受け取ってprgChkのresultにresolveする
const resStatus = function(stat){
return new Promise(function(resolve){
setTimeout(function(){
resolve(stat);
}, 1000);
});
};
const cnt = 10;
let r = '';
//プラグインの展開状況(要素取得可否)を判定→再帰
const prgChk = async function(r){
const result = await resStatus(getId());
r--;
if(r <= 0) return;
if(!result) await prgChk(r);
return;
}
```
以前提示したコードと一緒にあっても問題ありませんが，通常画面での対処が不要であれば，
前のコードは残さなくても良いかと思います．
ちょっと，再帰処理まで必要か正直わからないのですが，
以前プラグイン展開後に処理をする必要あったときに再帰処理をしないと結果が安定しなかったので，
今回入れています．
参考になれば幸いです．
---
**Author:**  [@Legacy\_Account2091](https://community.cybozu.dev/u/Legacy_Account2091)\
**Post date:** [2022 年 9 月 13 日午前 1:34 UTC](https://community.cybozu.dev/t/topic/35/11 "2022-09-13T01:34:24Z")
TO様
大変大変お世話になっております。
また、わたくしには既に異次元の解決方法をご教示頂き、誠にありがとうございます。
早速ながらにJSEditで、ご教示いただいたコードを取り込んでみたのですが、動作出来なくて、、、、
何かライブラリファイルの読み込みが必要でしょうか。。
また、気になるマークが出ておりまして、、こちらはこのままで、、OKでしょうか。
この画像は、その気になるマークの画像です。三角！マークです。
また、現在読み込んでいるライブラリファイルは下記画像の通りなのです。
不足しておりますでしょうか。。
---
**Author:**  [@Legacy\_Account2757](https://community.cybozu.dev/u/Legacy_Account2757)\
**Post date:** [2022 年 9 月 13 日午前 2:12 UTC](https://community.cybozu.dev/t/topic/35/12 "2022-09-13T02:12:33Z")
豊和会 本部様
イベントハンドラ内に記載していますか？
省いてしまったので恐縮ですが，提示したコードはイベントハンドラ内に記述してください．
```
kintone.events.on([
'app.record.index.show',
], function(event) {
//この中に記述
});
```
なお，画像の△についてはasyncを使っているからと思われます．
理由はわからないのですが，ほかのコードライターでは注意喚起されないので問題ないかと思います．
---
**Author:**  [@Legacy\_Account2091](https://community.cybozu.dev/u/Legacy_Account2091)\
**Post date:** [2022 年 9 月 13 日午前 4:28 UTC](https://community.cybozu.dev/t/topic/35/13 "2022-09-13T04:28:10Z")
TO様
早速のご返信ありがとうございます。お忙しいのに本当に申し訳ございません。
はい、、イベントハンドラの中に記載しているのですが。。。
一覧画面は、URLの表示のまま変わらずで。。。せっかくお時間頂いているのに、本当にすみません、、、
---
**Author:**  [@Legacy\_Account2757](https://community.cybozu.dev/u/Legacy_Account2757)\
**Post date:** [2022 年 9 月 13 日午前 7:32 UTC](https://community.cybozu.dev/t/topic/35/14 "2022-09-13T07:32:07Z")
豊和会 本部様
提示したコードの説明に誤りがありました．すいません．
提示したコードにある「myEleId」はフィールド名ではなくフィールドコードでした．
URLをいれているフィールドコードを確認ください．
---
**Author:**  [@Legacy\_Account2091](https://community.cybozu.dev/u/Legacy_Account2091)\
**Post date:** [2022 年 9 月 14 日午前 12:03 UTC](https://community.cybozu.dev/t/topic/35/15 "2022-09-14T00:03:05Z")
TO様
引き続き大変お世話になっております。また、ご返信いただけてとても嬉しいです。
早速ながらにフィールドコードを確認致しましたら、TO様が最初にコーディングして下さった通り、「リンク」でした。
と、思うのですが、心配で、、下記の画像にてフィールドコードを見て頂けますでしょうか、、、
折角ここまでお付き合いいただけて、是非実現させて頂きたいので何卒、何卒宜しくお願い致します。
---
**Author:**  [@Legacy\_Account2757](https://community.cybozu.dev/u/Legacy_Account2757)\
**Post date:** [2022 年 9 月 14 日午前 2:14 UTC](https://community.cybozu.dev/t/topic/35/16 "2022-09-14T02:14:07Z")
豊和会 本部様
すいません．コードの一番最後に「prgChk(cnt)」が抜けていました…．
```
//プラグインの展開状況確認開始
prgChk(cnt);
```
具体的にはここです…（一番最後で良いと思います）．
```
//プラグインの展開状況を判定→再帰
const prgChk = async function(r){
const result = await resStatus(getId());
r--;
if(r <= 0) return;
if(!result) await prgChk(r);
return;
}
//プラグインの展開状況確認開始
prgChk(cnt);
```
これを追加して，お試しください．
---
**Author:**  [@Legacy\_Account2091](https://community.cybozu.dev/u/Legacy_Account2091)\
**Post date:** [2022 年 9 月 14 日午前 2:49 UTC](https://community.cybozu.dev/t/topic/35/17 "2022-09-14T02:49:11Z")
TO様
ああ、本当に本当に本当にありがとうございます！！
見事わたくしの理想通り、完璧すぎる状態で表示＆動作出来ました！
長い時間お付き合いいただき、誠にありがとうございました。心より感謝致します。
このスレッドが他にお悩みの方にも見て頂けることを祈ります。
---
**Author:**  [@Legacy\_Account2091](https://community.cybozu.dev/u/Legacy_Account2091)\
**Post date:** [2022 年 9 月 27 日午前 12:49 UTC](https://community.cybozu.dev/t/topic/35/18 "2022-09-27T00:49:56Z")
TO様
いつも大変お世話になっております。上記のスレッドでご教示いただいた方法で、理想の一覧画面を使わせて頂いております。
そんな中、下記の事象が発生しておりまして、わたくしには解決出来ず悩んでおります。。このような場合教えて頂いたコードを修正することで、対応は可能でしょうか、、、お忙しいところ誠に恐縮ですが、一番ご理解頂けておりますので、是非またご教示下さい。
＜事象＞
一覧画面で縮小表示していたURLが、改ページするとURL表示になってしまいます。（表示に時間がかかっているのかと思い、３分ほど待ちましたが表示はそのままでした。。。）
---
**Author:**  [@Legacy\_Account2757](https://community.cybozu.dev/u/Legacy_Account2757)\
**Post date:** [2022 年 9 月 27 日午前 1:30 UTC](https://community.cybozu.dev/t/topic/35/19 "2022-09-27T01:30:31Z")
豊和会 本部様
改ページすることで，プラグインの再読込が行われているようです．
再読込もやはりjavascript→プラグインの順番なのですが，
改ページの時はすでにプラグインが一度読み込まれているため，
プラグインの展開状況確認ですぐにtrueになっていて，
チェックがスルーされたままプラグインが読み込まれてリンクが元に戻っている，という現象と判断しました．
なので，先日，入れるのを忘れた↓を，
```
//プラグインの展開状況確認開始
prgChk(cnt);
```
↓にしてください．
```
//プラグインの展開状況確認開始
setTimeout(function(cnt){
prgChk(cnt);
}, 1000);
```
setTimeoutでチェックのタイミングを遅らせています．
1000はミリ秒で1000で1秒です．これくらいが良いかと思いますが，適宜調整ください．
（PCやネット環境によって読み込みスピードが異なることに留意ください）
「setTimeoutやるならもうチェックしないでいきなりタグ拾えばいいのでは？」
とも思いましたが，そのあたりは適宜判断ください．
（一番修正が少ない方法として提案しています）
---
**Author:**  [@Legacy\_Account2091](https://community.cybozu.dev/u/Legacy_Account2091)\
**Post date:** [2022 年 9 月 27 日午前 5:38 UTC](https://community.cybozu.dev/t/topic/35/20 "2022-09-27T05:38:25Z")
TO様
いつも大変お世話になっております。今回も早速のご回答を誠にありがとうございます！
早速反映し、改ページ後も短縮表示されました。
また、わたくしのレベルをご配慮いただき、修正の少ない方法でのご教示尾も本当にありがとうございました。
[次のページ](https://community.cybozu.dev/t/topic/35.md?page=2)