タブ表示 Kuc.Tabsについて

【質問】
・Kuc.Tabsを使用してタブの中身を複数表示する方法について教えていただきたいです。

【サンプルコード】 ( Tabs | kintone UI Component · Be a smart kintone developer. (kintone-ui-component.netlify.app)

const Kuc = Kucs[‘1.x.x’];

const space = kintone.app.record.getSpaceElement(‘space’);

// Create each Tab content
const textArea = new Kuc.TextArea({
label: ‘TextArea’,
value: ‘This is sample.’
});

const timePicker = new Kuc.TimePicker({
label: ‘Time’,
value: ‘11:30’
});

const text = ‘This is sample.’;

const tabs = new Kuc.Tabs({
items: [
{
label: ‘A’,
content: textArea,
value: ‘a’,
disabled: false
},
{
label: ‘B’,
content: timePicker,
value: ‘b’,
disabled: false
},
{
label: ‘C’,
content: text,
value: ‘c’,
disabled: false
}
],
value: ‘a’,
className: ‘options-class’,
id: ‘options-id’,
visible: true,
borderVisible: true
});
space.appendChild(tabs);

tabs.addEventListener(‘change’, event => {
console.log(event);
});

上記コードはタブ生成ができるというコードですが、「content:」にて、複数指定し表示することはできるのでしょうか?
上記コードでは、一つ目のタブで
content: textArea,
このように一つのみ表示したいものを指定していますが、
content: textArea,text,
例えばこのように複数表示したいものを指定し、表示することはできるのでしょうか?
この書き方ではなく、複数指定するには他の書き方があるのでしょうか?

ちなみに配列を記載することはできないようです。
上記以外のコードで試したのですが、うまくいかなかったため質問いたしました。
ご教授いただければと思います。
よろしくお願いいたします。

@shiro さん

こんにちは、私も気になっていて一応こうじゃないかなと考えてたことがあったので、回答させていただきました。

早速ですが、提示してくださってるリンク先を見てみると …このように書かれてますね。
image

私も試したことないので推測になってしまうのですが、他のKUCのオブジェクトも既存のHTMLの子要素に対して追加している形なので、 仮ですが、

let contents_element = document.createElement('div');
contents_element.appendchild(textArea);
contents_element.appendchild(timePicker);
contents_element.appendchild(text);

のように新たに作ったdiv要素の子要素にKUCのオブジェクトを追加してあげてあとは

const tabs = new Kuc.Tabs({
  items: [
    {
      label: 'A',
      content: contents_element,
      value: 'a',
      disabled: false
    },
  value: 'a',
  className: 'options-class',
  id: 'options-id',
  visible: true,
  borderVisible: true
});

にみたいにしてあげれば、できるんじゃないかなと考えていますね :thinking:
あとはお好みでDOM操作をして横並びや色もカラフルに…みたいな事をしてあげればいいかなと思われます。

@y_minamitani9534
ご回答ありがとうございます。
私の方で開発しているプラグインがあり、そちらで同じように処理を記載しようとしているのですが、うまくいっておりません。
やり方は回答いただいたものであっていると思うのですが。。

(function (PLUGIN_ID) {
‘use strict’;

//レコード詳細画面でタブ表示
kintone.events.on([ ‘app.record.detail.show’], function (event) {
let config = kintone.plugin.app.getConfig(PLUGIN_ID);
var fieldRecord = event.record;

//入力されたタブ名を変数に代入
var tabText = localStorage.getItem('tabName');
var tabText2 = localStorage.getItem('tabName2');
var tabText3 = localStorage.getItem('tabName3');

console.log(tabText);
console.log(tabText2);
console.log(tabText3);


// スペース
const space = kintone.app.record.getSpaceElement('space');

// フィールドコードからフィールド要素を取得する関数
function createTabContent(fieldCode) {
  const fieldElement = kintone.app.record.getFieldElement(fieldCode);
  return fieldElement;
}

//格納1
var fieldChoice01 = {
  fieldChoice0: config.tabSelect0,
  fieldChoice1: config.tabSelect1,
  fieldChoice2: config.tabSelect2,
  fieldChoice3: config.tabSelect3,
  fieldChoice4: config.tabSelect4,
  fieldChoice5: config.tabSelect5,
  fieldChoice6: config.tabSelect6,
  fieldChoice7: config.tabSelect7,
  fieldChoice8: config.tabSelect8,
  fieldChoice9: config.tabSelect9,
}

let contentContainer = document.createElement('div');
// 各フィールド要素をコンテナに追加
contentContainer.appendChild(createTabContent(fieldChoice01.fieldChoice0));
contentContainer.appendChild(createTabContent(fieldChoice01.fieldChoice1));
contentContainer.appendChild(createTabContent(fieldChoice01.fieldChoice2));
contentContainer.appendChild(createTabContent(fieldChoice01.fieldChoice3));
contentContainer.appendChild(createTabContent(fieldChoice01.fieldChoice4));
contentContainer.appendChild(createTabContent(fieldChoice01.fieldChoice5));
contentContainer.appendChild(createTabContent(fieldChoice01.fieldChoice6));
contentContainer.appendChild(createTabContent(fieldChoice01.fieldChoice7));
contentContainer.appendChild(createTabContent(fieldChoice01.fieldChoice8));
contentContainer.appendChild(createTabContent(fieldChoice01.fieldChoice9));

//タブ生成
//・content:複数表示できない ・値のみでフィールド名が取得されていない
const tabs = new Kuc.Tabs({
  items:[
    {
      label:tabText,
      content: contentContainer,
      value: 'a',
      disabled: false
    },
    {
      label:tabText2,
      content: createTabContent(config['tabSelect2_0']),
      value: 'b',
      disabled: false
    },
    {
      label: tabText3,
      content: createTabContent(config['tabSelect3_0']),
      value: 'c',
      disabled: false
    }
  ],
  value: 'a',
  className: 'options-class',
  id: 'options-id',
  visible: true,
  borderVisible: true
});

space.appendChild(tabs);


tabs.addEventListener('change', event => {
  console.log(event);
});

});
})(kintone.$PLUGIN_ID);

一つ目のタブだけ、複数表示の処理を記載してみましたが
Uncaught Error: Usage: kintone.app.record.getFieldElement(fieldCode)
このエラーがでるようになりました。

appendchild()の中身の書き方が原因だとは思うのですが、分からず詰まっております。

この場合どのように修正すると良いのでしょうか?よろしくお願いいたします。

@shiro さん

なるほど、今プラグインにチャレンジされているんですね!
そのエラーですと、

 kintone.app.record.getFieldElement(fieldCode)

ここが原因になって思いつくことは、プラグインの設定画面に恐らくフィールドコードを設定されていると思いますけど、どこかのフィールドコードが間違っているのでないでしょうか?
または、config側に設定するパラメータ名がずれているなど…
まず、このあたり見てみると何かわかりそうですね :v:
デバッグツールのブレークポイントで見ながらもできるのでピンポイントで止めてみてエラー出てる箇所探れればと思います!

@y_minamitani9534 さん
ありがとうございます。
デバッグツールで探ってみます、!
先程のタブ生成するコードの
contentContainer.appendChild(createTabContent(fieldChoice01.fieldChoice0));
このような書き方は問題ないのでしょうか?

以下はconfig.jsです。長いですが、一応記載いたします。
(function (PLUGIN_ID) {
‘use strict’;

var TextField = ;
var tabFields = {};
var tabFields2 = {};
var tabFields3 = {};

var config = kintone.plugin.app.getConfig(PLUGIN_ID);
var h2 = document.createElement(“h2”);
var b1 = document.createElement(“b”);
var b2 = document.createElement(“b”);
var h3_1 = document.createElement(“h3”);
var h3_2 = document.createElement(“h3”);
var h3_3 = document.createElement(“h3”);

h2.innerHTML = “タブ表示の設定”;
b1.innerHTML = “タブ情報”;

h3_1.innerHTML =“①”;
h3_2.innerHTML =“②”;
h3_3.innerHTML =“③”;

//タブ名入力1
var textBox1 = new Kuc.Text({
label:‘①タブ名入力’,
id:‘tabName’,
requiredIcon: false,
})

//タブ名入力2
var textBox2 = new Kuc.Text({
label:‘②タブ名入力’,
id:‘tabName2’,
requiredIcon: false,
})

//タブ名入力3
var textBox3 = new Kuc.Text({
label:‘③タブ名入力’,
id:‘tabName3’,
requiredIcon: false,
})

b2.innerHTML = “タブ表示設定”;

//フィールド選択1
tabFields.tabField0 = new Kuc.Dropdown({
label:‘表示するフィールド1’,
items:TextField,
requiredIcon: false,
})

//フィールド選択1の+ボタン
let plus = document.createElement(“button”);
plus.innerHTML =“+”;
plus.id = ‘plusId’;
plus.addEventListener(“click”,addplus);

//+ボタン押下で項目追加する処理1
let numFields = 1;
function addplus(){
if(numFields < 10){
tabFields[‘tabField’+numFields] = new Kuc.Dropdown({
label: ‘表示するフィールド’ + (numFields +1),
items: TextField,
requiredIcon: false,
});
const ttarget =document.getElementById(“target”);
ttarget.appendChild(tabFields[‘tabField’+numFields]);
ttarget.appendChild(document.createElement(“br”));
numFields++;
}
}

//フィールド選択2
tabFields2.tabField2_0 = new Kuc.Dropdown({
label:‘表示するフィールド1’,
items:TextField,
requiredIcon: false,
})

//フィールド選択2の+ボタン
let plus2 = document.createElement(“button”);
plus2.innerHTML =“+”;
plus2.id = ‘plusId’;
plus2.addEventListener(“click”,addplus2);

//+ボタン押下で項目追加する処理2
let numFields2 = 1;
function addplus2(){
if(numFields2 < 10){
tabFields2[‘tabField2_’+numFields2] = new Kuc.Dropdown({
label: ‘表示するフィールド’ + (numFields2 +1),
items: TextField,
requiredIcon: false,
});
const ttarget2 =document.getElementById(“target2”);
ttarget2.appendChild(tabFields2[‘tabField2_’+numFields2]);
ttarget2.appendChild(document.createElement(“br”));
numFields2++;
}
}

//フィールド選択3
tabFields3.tabField3_0 = new Kuc.Dropdown({
label:‘表示するフィールド1’,
items:TextField,
requiredIcon: false,
})

//フィールド選択3の+ボタン
let plus3 = document.createElement(“button”);
plus3.innerHTML =“+”;
plus3.id = ‘plusId’;
plus3.addEventListener(“click”,addplus3);

//+ボタン押下で項目追加する処理3
let numFields3 = 1;
function addplus3(){
if(numFields3 < 10){
tabFields3[‘tabField3_’+numFields3] = new Kuc.Dropdown({
label: ‘表示するフィールド’ + (numFields3 +1),
items: TextField,
requiredIcon: false,
});
const ttarget3 =document.getElementById(“target3”);
ttarget3.appendChild(tabFields3[‘tabField3_’+numFields3]);
ttarget3.appendChild(document.createElement(“br”));
numFields3++;
}
}

//サブミットボタン表示
const buttonSubmit = new Kuc.Button({
text: ‘保存’,
type: ‘submit’
})

//キャンセルボタン表示
const buttonCancel = new Kuc.Button({
text: ‘キャンセル’
})

const target = document.getElementById(“target”);
const target2 = document.getElementById(“target2”);
const target3 = document.getElementById(“target3”);
const footer = document.getElementById(“footer”);

target.before(h2);
target.appendChild(b1);
target.appendChild(document.createElement(“br”));
target.appendChild(textBox1);
target.appendChild(document.createElement(“br”));
target.appendChild(textBox2);
target.appendChild(document.createElement(“br”));
target.appendChild(textBox3);
target.appendChild(document.createElement(“br”));
target.appendChild(document.createElement(“br”));
target.appendChild(b2);
target.appendChild(document.createElement(“br”));
target.appendChild(h3_1);
target.appendChild(tabFields.tabField0);
target.appendChild(plus);
target.appendChild(document.createElement(“br”));
target2.appendChild(h3_2);
target2.appendChild(tabFields2.tabField2_0);
target2.appendChild(plus2);
target2.appendChild(document.createElement(“br”));
target3.appendChild(h3_3);
target3.appendChild(tabFields3.tabField3_0);
target3.appendChild(plus3);
target3.appendChild(document.createElement(“br”));
footer.appendChild(buttonCancel);
footer.appendChild(buttonSubmit);

//保存ボタン時の処理
buttonSubmit.addEventListener(‘click’, event => {

//1
const configData ={};
for (let i = 0; i < numFields; i++) {
    configData['tabSelect' + i] = tabFields['tabField' + i].value;
}
//2
for (let i = 0; i < numFields2; i++) {
    configData['tabSelect2_' + i] = tabFields2['tabField2_' + i].value;
}
//3
for (let i = 0; i < numFields3; i++) {
    configData['tabSelect3_' + i] = tabFields3['tabField3_' + i].value;
}


 //入力されたデータをセット
 kintone.plugin.app.setConfig(configData,function(){
  alert('プラグインの設定が保存されました。アプリを更新してください。');
  window.location.href = '../../flow?app=' + kintone.app.getId();
});

//入力されたタブ名1を取得
function getTabName1(){
  var getTab = document.getElementById('tabName').value;
  localStorage.setItem('tabName',getTab);
  return getTab;
}
getTabName1();

//入力されたタブ名2を取得
function getTabName2(){
  var getTab2 = document.getElementById('tabName2').value;
  localStorage.setItem('tabName2',getTab2);
  return getTab2;
}
getTabName2();

//入力されたタブ名3を取得
function getTabName3(){
  var getTab3 = document.getElementById('tabName3').value;
  localStorage.setItem('tabName3',getTab3);
  return getTab3;
}
getTabName3();

});

console.log(config);

buttonCancel.addEventListener(‘click’, event => {
window.location.href = ‘…/…/’ + kintone.app.getId() + ‘/plugin/’;
});

// フィールドをドロップダウンに表示
KintoneConfigHelper.getFields([“SINGLE_LINE_TEXT”, “MULTI_LINE_TEXT”, “RICH_TEXT”, “NUMBER”,
“CALC”, “RADIO_BUTTON”, “CHECK_BOX”, “MULTI_SELECT”, “DROP_DOWN”, “DATE”, “TIME”, “DATETIME”,
“FILE”, “LINK”, “USER_SELECT”, “ORGANIZATION_SELECT”, “GROUP_SELECT”, “REFERENCE_TABLE”, “SPACER”,
“GROUP”, “SUBTABLE”, “RECORD_NUMBER”, “CREATOR”, “CREATED_TIME”, “MODIFIER”, “UPDATED_TIME”]).then(function (resp) {
for (var i = 0; i < resp.length; i++) {
var item;
// サブテーブルのフィールドコードを除外
if (!isSubtableField(resp[i])) {
// サブテーブルのフィールドの場合、関連する親テーブルの情報も取得して表示
if (resp[i].subtableCode) {
item = { ‘label’: resp[i].subtableCode + ‘.’ + resp[i].label, ‘value’: resp[i].subtableCode + ‘.’ + resp[i].code };
} else {
item = { ‘label’: resp[i].label, ‘value’: resp[i].code };
}
TextField.push(item);
}
}
});

// サブテーブル内のフィールドかどうかを判定する関数
function isSubtableField(field) {
// サブテーブル内のフィールドの場合、subtableCode プロパティが存在します
return !!field.subtableCode;
}

})(kintone.$PLUGIN_ID);

@shiro さん

ごめんなさい、ちょっと長いので読むことは厳しいので…いわれているように

contentContainer.appendChild(createTabContent(fieldChoice01.fieldChoice0))

でも問題ございませんよ!
appendchildの中で、定義されているcreateTabContent()関数を実行されているだけなので、大丈夫だと思いますね :v:

@y_minamitani9534 さん
ありがとうございます。
勉強になりました。
デバッグツールにて調査してみます。

1 Like

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