【kintone】ポータルページに動的に要素を追加

kintone カスタマイズ
1

お世話になります。

現在、ポータルページの#layout-oceanにのみ特定の要素を以下の通り動的に要素を追加したいと考えております。

$(function(){

  let addText="<p>hoge</p>"

  $('#layout-ocean').prepend(addText);

});

しかしながら、kintoneのポータルページ等のJSカスタマイズの仕様の影響は、他のコミュニケーションスペース等にも影響を与えることを理解しており、実際にコミュニケーションスペースにも#layout-ocean要素が存在しているため、ポータルページだけに実行したいのに、同じ処理がされてしまいます。

 

これを回避するために、以下の様に開いているページをURLを取得判定する方法を考えました。

$(function(){

 let getURL = ((location.href).slice(-6));//開いているページの末尾6文字を取得

 if (getURL=="portal") { //もしURLの末尾6文字がportalであれば、意図した動的要素の追加処理を実行する

   let addText="<p>hoge</p>"

   $('#layout-ocean').prepend(addText);

  }

 

しかし、実際にはポータルページからワークスペースページに直接リンクした場合、addText要素がワークスペースにも残ってしまい、非同期処理的な振る舞いをみせます。一方でワークスペース上のブラウザでリフレッシュ処理をすると動的に要素は追加されず、意図した通りの処理となります。サーバーサイド側がどのような仕様になっているのか わからないので、解決できないのですが、ポータルページから直接リンクしたとしても意図した処理をするにはどのような対策があり得るのでしょうか？

 

宜しくお願い申し上げます。

2

ryoryo さん

先日のアップデートで ポータル表示イベントが追加されたので、そちらを利用してみてはいかがでしょうか。

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

3

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

これは便利と思ったのですが、動作を確認するとやはりポータルからワークスペースにリンクすると

要素が残ってしまうようです。。

4

ryoryo さん

ポータルからスペースへの遷移は JS 再読み込みしてくれないんですね…

URL 見ると、ハッシュ値以降が変わっているみたいなので、そこをバインドすれば行けそうですね。
動作確認していないので、動くかわかりませんが、以下のようなイメージで、
まずは対象のテキストを削除する処理から始め、ポータルを開いたときのみ追加する。という順番にすれば実現できそうです。

(function() {
var $text = $('#myText');
if ($text) {
$text.remove();
}

 $(window).on('hashchange',function(){  
 var $text = $('#myText');if ($text) {
$text.remove();
}});

kintone.events.on('portal.show', function(event) {
 letaddText='\<p id="myText"\>hoge\</p\>';  
 $('#layout-ocean').prepend(addText);
}):

})();

 

5

有難うございます！動作は確認し、解決はしたのですが、

「URL 見ると、ハッシュ値以降が変わっている」、「そこをバインドすれば行けそう」という点がどうしても理解できないのです。。

 

もし既に該当する要素があれば削除して、そのあとに要素を追加しているように見えるのですが

特に「ハッシュ値以降が変わっている」というのはどういう構造であり、なぜこのような方法で解決することができるのでしょうか。

完全に後学のために知りたいというわがままなのですが、ご教示いただけるととてもうれしいです。

宜しくお願い申し上げます。

6

ryoryo さん

まず基本として、javascript はページが新規に開かれたときやリフレッシュされたときと同時に読み込まれます。
↓のイメージです。

・新規にページが開かれた
・ページを遷移した
・ページを更新した

次に kintone に置いてですが、
ポータルからスペースを遷移する際、一見ページを遷移しているように見えますが、実際は遷移していません。(= リフレッシュが発生していません。)
恐らく全て kintone 内の JS で要素を再描画しているからだと思います。（詳しくは知りませんが。。。）

ページの再読み込みが行われていないので、この再描画の際の書き換えによって変わらない要素、
例えばヘッダーなどの要素に全体 JS で何か追加すると、スペースへの遷移後も表示される。（今回の状態）という状態になります。

従って、ポータルでヘッダーなどに何か要素を追加したら、スペースに遷移後にその要素を削除すれば良いとなります。

ただし、ポータルからスペースに遷移する際の全体 JS の発火は以下のようになります。

①ポータルを開く
 -> 全体 JS が読み込まれる
②スペースを開く
 -> 全体 JS は読み込まれない

スペースを開いたときに 全体 JS が読み込まれるのであれば、
簡単に自分で追加した要素を特定し削除する。という実装が可能です。

ただし、上記の通りスペースを開いたとき JS が読み込まれないので、
①のタイミングでどうにかスペースを開いたとき。というイベントを設定する必要があります。

ここで、先ほどの URL のハッシュ値をイベントに設定できればという流れになり、
JS ではそのイベントが用意されているので、そちらを使用した。という流れです。

7

ご返信および詳細なご解説、誠にありがとうございます。

やはり、ワークスペースに切り替わるときにリフレッシュはされていまいんですね。

またJSにハッシュ値の変化を取得するイベントがあるとはつゆ知らず、大変勉強になりました。

改めて、深い御礼を申し上げます。

宜しくお願いいたします。

8

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