【kViewer】リストビューの詳細画面にタブ表示をしたい

[Legacy_Account2408 (maru（Legacy Account）)]

こんにちは。

タイトルにもあるように

kViewerに60個以上のフィールドを設定するため、kViewerの詳細画面にタブを設定し、表示を切り替えたいです。ボタンの形は問いませんが、kintoneやフォームブリッジでは以下のように設定しています。

【kintoneのタブ表示】

【フォームブリッジのタブ表示】

カスタマイズでも構いませんので、ご助力いただきたいです。

よろしくお願いいたします。

[Legacy_Account2229 (koichi（Legacy Account）)]

maruさん

こんにちは。こちらも回答します。

 

kintoneタブ表示は自作されたものでしょうか。
それか、プラグインで設定されたものでしょうか。

自作されたものであれば、同様の形でできると思います。

但し、kintoneのように「kintone.app.record.setFieldShown」で
表示状態を切り替えることができないため、少し手を加える必要があります。

// 各タブで表示したいフィールドコード
const tab1Fields = ['フィールドA', 'フィールドB'];
const tab2Fields = ['フィールドC', 'フィールドD'];
const tab3Fields = ['フィールドE', 'フィールドF'];

// 各タブで表示したいフィールド要素
const tab1Elements = [];
const tab2Elements = [];
const tab3Elements = [];


// フィールドコードからフィールド要素を格納（タブの数分）
tab1Elements  = tab1Fields.map(function(field) {
return kv.detail.getElementByCode(code);
});


// 以下をタブボタンのクリックイベントで実行し、表示状態を切り替え（タブの数分）

// 表示する場合
tab1Elements.forEach(function(el, index) {
  el.parentNode.style.display = '';
});

// 非表示にする場合
tab1Elements.forEach(function(el, index) {
  el.parentNode.style.display = 'none';
});

 

わざわざ、フィールド要素を配列に格納している理由は
一度 style.display = ‘none’; により非表示になったフィールドは
kv.detail.getElementByCode(code); で取得することができないため。

 

実環境で試していないのでエラーになるかもしれませんが

大まかな流れはこのようなものです。

 

もしかしたら「parentNode」は要らないかもです。

[Legacy_Account2408 (maru（Legacy Account）)]

koichiさん、ご返信ありがとうございます。

 

kintoneタブ表示は自作されたものでしょうか。
それか、プラグインで設定されたものでしょうか。

＞フォームブリッジは標準機能を、kintoneはプラグインを使用しております。

 

いただいたコードについて、「kintone.app.record.setFieldShown」の代わりに「el.parentNode.style.display」で制御するとのこと承知いたしました。

elの取得データがフィールドタイプのようで、指定外のフィールドも非表示になりました。フィールドコードまたはフィールド名を取得することはできるでしょうか。

 

表示制御のボタンを設置したいのですが、こちらのサイトを参照してみました。

kViewerのスペースを3つ用意し、それぞれにボタンを設置したいと考えております。

1つ目のボタン表示はできましたが、複数個ができません。

// const kButtonField = kv.detail.getElementByCode('kButtonField');
  const kButton = document.createElement('button'); //ボタン生成
  kButton.style.height = '30px'; //ボタンの高さ
  kButton.style.width = '150px'; //ボタンの横幅
  kButton.innerHTML = '基本情報'; //ボタンの表示名
  kButton.style.borderRadius = '10px'; //ボタンのデザイン
  kButton.onclick = function() {
      alert('基本情報ボタンを押下しました。')
  };
  // const sButtonField = kv.detail.getElementByCode('sButtonField');
  const sButton = document.createElement('button'); //ボタン生成
  sButton.style.height = '30px'; //ボタンの高さ
  sButton.style.width = '150px'; //ボタンの横幅
  sButton.innerHTML = '指図リスト'; //ボタンの表示名
  sButton.style.borderRadius = '10px'; //ボタンのデザイン
  sButton.onclick = function() {
      alert('指図リストボタンを押下しました。')
  };
  kv.events.view.detail.mounted.push(function (state) {
      document.querySelector('.kv-element-space').appendChild(kButton);
      document.querySelector('.kv-element-space').appendChild(sButton);
       // kButtonField.appendChild(kButton);
      // sButtonField.appendChild(sButton);
      return state;
    });

 

各スペースコードは左から

「kButtonField」、「sButtonField」、「rButtonField」としております。

 

フィールドコードでボタンの設置場所を指定する必要があると思いますが、その方法をご教授いただけますでしょうか。

よろしくお願いいたします。

[Legacy_Account2229 (koichi（Legacy Account）)]

maruさん

すみません。細かい記述ミスがありました。

 

// 各タブで表示したいフィールドコード
const tab1Fields = ['フィールドA', 'フィールドB'];
const tab2Fields = ['フィールドC', 'フィールドD'];
const tab3Fields = ['フィールドE', 'フィールドF'];

// 各タブで表示したいフィールド要素
let tab1Elements = [];  // ★constではなくletでした
let tab2Elements = [];
let tab3Elements = [];

// フィールドコードからフィールド要素を格納（タブの数分）
tab1Elements  = tab1Fields.map(function(field) {
return kv.detail.getElementByCode(field); // ★codeではなくfieldでした
});

// 以下をタブボタンのクリックイベントで実行し、表示状態を切り替え（タブの数分）

// 表示する場合
tab1Elements.forEach(function(el, index) {
el.style.display = '';  // ★parentNode不要でした
});

// 非表示にする場合
tab1Elements.forEach(function(el, index) {
el.style.display = 'none';  // ★parentNode不要でした
});

 

ボタンは、同様の処理を3つ記載すれば良いですよ。

ボタンをappendする処理を変えています。

const kButton = document.createElement('button'); //ボタン生成
kButton.style.height = '30px'; //ボタンの高さ
kButton.style.width = '150px'; //ボタンの横幅
kButton.innerHTML = '基本情報'; //ボタンの表示名
kButton.style.borderRadius = '10px'; //ボタンのデザイン
kButton.onclick = function() {
  alert('基本情報ボタンを押下しました。')

  // 表示する
  tab1Elements.forEach(function(el, index) {
    el.style.display = '';
  });

  // 非表示にする
  tab2Elements.forEach(function(el, index) {
    el.style.display = 'none';
  });

  // 非表示にする
  tab3Elements.forEach(function(el, index) {
    el.style.display = 'none';
  });

};


// スペース「kButtonField」にボタン「kButton」を設置
kv.detail.getElementByCode('kButtonField').appendChild(kButton);

[Legacy_Account2408 (maru（Legacy Account）)]

koichiさん、

詳細のご確認と修正をありがとうございます。

ボタンの配置ですが、2つのボタンが縦に並んでしまいます。

横に並べることは可能でしょうか。

 

ボタン押下後の挙動はうまくいきました。

ありがとうございました。