レコード一覧のtrタグにレコード詳細へリンクを貼る

はじめに

kintoneのレコード一覧からレコード詳細へのリンクは通常、レコード左端のアイコンクリックから遷移を行います。
しかし、解像度の低いモニター等だとクリックしにくいことがあります。
そこで今回、各行のレコードクリックによりレコード詳細へ遷移できるようjavascriptでカスタマイズをしていこうと思います。

コード全容

(function() { 
  "use strict"; 
  

  
  kintone.events.on('app.record.index.show', function(event) { 
          
    
    var t=[];
    t = $('tr');

    
    var url= $('.recordlist-show-gaia');
    for (var i=0; i<url.length; i++){
      url[i] = url[i].getAttribute('href');
    }
     
    
    for (var i=0; i< t.length ; i++) {
      t[i].setAttribute('href',url[i]);
      t[i].setAttribute('onmouseover',"mouseover()");
      t[i].setAttribute('onmouseout',"mouseout()");
    }

    jQuery(function($) {
    $('tr[href]').addClass('clickable')
    .click(function(e) {
  
    if(!$(e.target).is('a')){
     
      if($(e.target).attr("class") != "recordlist-edit-icon-gaia" && $(e.target).attr("class") != "recordlist-edit-gaia" && $(e.target).attr("class") != "recordlist-remove-gaia" && $(e.target).attr("class") != "recordlist-remove-icon-gaia" && $(e.target).attr("class") != "recordlist-save-gaia" && $(e.target).attr("class") != "recordlist-save-icon-gaia" && $(e.target).attr("class") != "recordlist-cancel-gaia" && $(e.target).attr("class") != "recordlist-cancel-icon-gaia"){
              
        window.open($(e.target).closest('tr').attr('href'),'_blank');
      };
    };
    });
  });

  return　event;
    
	});
})(); 


function mouseover(){
document.body.style.cursor = "pointer";}
function mouseout(){
document.body.style.cursor = "default";}

コード解説

【kintone.events.on】

(function() { 
  "use strict"; 
  
  kintone.events.on('app.record.index.show', function(event) { 

ここは決まり文句です。レコード一覧が表示されたタイミングのイベントを拾っています。

【trタグのエレメントを取得】

   var t=[];
   t = $('tr');

jqueryも用いて、レコード一覧のtrタグ要素を配列tに格納しています。
このtrタグに対して各レコード詳細へリンクするURLを貼り付けていきます。

【レコード詳細へのリンクを取得】

    var url= $('.recordlist-show-gaia');
    for (var i=0; i<url.length; i++){
      url[i] = url[i].getAttribute('href');
    }

ここもjqueryを用いて、クラス名「recordlist-show-gaia」（レコード詳細へリンクが存在するtdタグのクラスです）のエレメントを配列urlに格納します。
url内のhref属性を再度urlに格納しなおし、レコード詳細へのリンクURLを取得します。

【取得したURLとマウスオーバー・マウスアウト属性を配列tに挿入】

    for (var i=0; i< t.length ; i++) {
      t[i].setAttribute('href',url[i]);
      t[i].setAttribute('onmouseover',"mouseover()");
      t[i].setAttribute('onmouseout',"mouseout()");
    }

配列tの長さ分for文を回します。i番目のtrタグのエレメントに対して、上記で取得したURLをhref属性として、関数mouseover()をonmouseover属性として、関数mouseout()をonmouseout属性として挿入していきます。
コードの次の部分から実際の動きを記述していきます。

【レコード詳細のURLに対してリンクする】

    $('tr[href]').addClass('clickable')

    .click(function(e) {

hrefの属性を持つtrを選択しclassにclickableを付加し、クリックされた時に処理を開始します。

if(!$(e.target).is('a')){

クリックした場所がaタグでなければ次の処理を開始します。

if($(e.target).attr("class") != "recordlist-edit-icon-gaia" && $(e.target).attr("class") != "recordlist-edit-gaia" && $(e.target).attr("class") != "recordlist-remove-gaia" && $(e.target).attr("class") != "recordlist-remove-icon-gaia" && $(e.target).attr("class") != "recordlist-save-gaia" && $(e.target).attr("class") != "recordlist-save-icon-gaia" && $(e.target).attr("class") != "recordlist-cancel-gaia" && $(e.target).attr("class") != "recordlist-cancel-icon-gaia"){

クリックしたクラスが上記クラスでなければ次の処理を開始します。
これは、クリックした場所がレコード右端の修正・削除アイコンクリック時に遷移してはダメなので、一つずつ除外していきます。

 window.open($(e.target).closest('tr').attr('href'),'_blank');

上記二つの条件を満たす場合、一番近いtrタグのhref属性のURLに対しリンクします。この時、別のタブで表示してほしいので、_blankを指定しておきます。

最後に

レコード一覧でkintoneRESTAPIでのエレメントの取得ができず、苦労しました。
※今回記述したコードは、kintoneのDOMの仕様が変更されると正常に作動しなくなる可能性があります。ご利用いただく時はご注意ください。