みなさんこんにちは。
雨が降っています。大雨です。
子どもたちの学校や保育園もおやすみ。
仕事どころではないです。
このスレで、私がkintone カスタマイズの実況をします。
いつもはWindowsなんですが、
ちょっと機動性が悪いのでChromebookでやってみようと思います。
子供に邪魔されながらもやれそうなカスタマイズ・・・
そうだ。kintone UI Component の Table を使ってなにかやろうと思います。
今のところkintoneに問題はないけど、子どもたちが暴れ回って仕事どころではありません。
30分ごとぐらいに進捗を投稿できればと思います。
※投稿がなかったら、子供の相手をしていると思ってください。
断じて構ってちゃんではないつもりなのですが、
せっかくなので、質問や応援コメントお待ちしています
ウッここで問題発生！
Chromebookのスクショのとり方がわからない！！
めげてなるものか！！！
グーグルの力を借りて調べてなんとかしてやる！
新規作成したらアロー関数で出るようになってる。
つづく・・・
それから、kintone UI Component のページを見てみます。
ComponentsのTable、まって、Tabsとかある。いつできたんだろう！？
気になるけど、ここは惑わされずにTableのページを見ます。
脳停止でサンプルコードをコピーします。
と思ったけど、これはkintone.app.record.getSpaceElement()使ってるのでスペースフィールド作らなきゃ。
const Kuc = Kucs['1.x.x']; を消しておきます。(() => {
'use strict';
kintone.events.on('app.record.edit.show', (event) => {
// ↓↓ここからコピペしたコード
// const Kuc = Kucs['1.x.x'];
const space = kintone.app.record.getSpaceElement('space');
const renderAge = dataCell => {
const spanElement = document.createElement('span');
spanElement.innerText = `The age is ${dataCell}`;
return spanElement;
};
const renderName = cellData => {
const dropdown = new Kuc.Dropdown({
items: [
{ label: 'John Brown', value: 'john' },
{ label: 'Steven Gerrard', value: 'steven' }
],
value: cellData
});
return dropdown;
};
const table = new Kuc.Table({
label: 'Table',
columns: [
{
title: 'Name',
field: 'name',
render: renderName
},
{
title: 'Address',
field: 'address'
},
{
title: 'Age',
field: 'age',
render: renderAge
}
],
data: [
{
name: 'john',
age: 32,
address: 'New York No. 1 Lake Park'
},
{
name: 'steven',
age: 22,
address: 'New York No. 2 Lake Park'
}
],
className: 'options-class',
id: 'options-id',
actionButton: true,
visible: true
});
space.appendChild(table);
table.addEventListener('change', event => {
console.log(event);
});
// ↑コピペしたコードここまで
return event; // ←追加
});
})();
ウッ。。。JSEditでインデント揃えるのがめんどくさいから揃えなかった・・・。
すると・・・・わーい！！！
でも、＋ボタン押すと新しい行のAddressや年齢の数字がこんな感じに空欄になっちゃう。
色々入力できるようにしたいなぁ。。。
初めて使ったのでよくわかっていませんが ＋マークで行を増やしたらデフォルトの住所が出るようにしました。また、インデントしました。
(() => {
'use strict';
kintone.events.on('app.record.edit.show', (event) => {
// ↓↓ここからコピペしたコード
// const Kuc = Kucs['1.x.x'];
const space = kintone.app.record.getSpaceElement('space');
const renderAge = dataCell => {
const spanElement = document.createElement('span');
spanElement.innerText = `The age is ${dataCell}`;
return spanElement;
};
const renderAddress = cellAddress => {
console.log(`cellAddress:${cellAddress}`)
const spanElement = document.createElement('span');
if (cellAddress === "") {
spanElement.innerText = `somewhere in brooklyn`;
} else {
spanElement.innerText = cellAddress;
}
return spanElement;
};
const renderName = cellData => {
const dropdown = new Kuc.Dropdown({
items: [
{ label: 'John Brown', value: 'john' },
{ label: 'Steven Gerrard', value: 'steven' }
],
value: cellData
});
return dropdown;
};
const table = new Kuc.Table({
label: 'Table',
columns: [
{
title: 'Name',
field: 'name',
render: renderName
},
{
title: 'Address',
field: 'address',
render: renderAddress
},
{
title: 'Age',
field: 'age',
render: renderAge
}
],
data: [
{
name: 'john',
age: 32,
address: 'New York No. 1 Lake Park'
},
{
name: 'steven',
age: 22,
address: 'New York No. 2 Lake Park'
}
],
className: 'options-class',
id: 'options-id',
actionButton: true,
visible: true
});
space.appendChild(table);
table.addEventListener('change', event => {
console.log(event);
});
// ↑コピペしたコードここまで
return event; // ←追加
});
})();
お久しぶりです。何時間ぶりでしょう。娘にペシペシ叩かれていました。
「Address」をTextにしてみようと思います
kintone UI Component のドキュメントによると…
全部入りのTextは長いみたいだけど要はnew Kuc.Text();で空っぽのテキストボックス作れるのでやってみよう。
const table = new Kuc.Table({...});
の
columnsのrenderでTextを返す関数を指定してあげれば良さそう。
const renderAddress = cellData => {
const text = new Kuc.Text();
return text;
}
を指定してあげれば良さそう？
あっ、でも初期値のcellDataいれてあげたいからこうかな
const renderAddress = cellData => {
const text = new Kuc.Text({
value: cellData;
});
return text;
}
TableのcolumnsのAddressのところ↓こう
{
title: 'Address',
field: 'address',
render: renderAddress
},
すると、いいかんじ
つづく！
@aaa 大丈夫です！いろいろ試しているとこれはこうやって使うのか〜ってなるので
たのしいですね〜！！！
aaaさんのコードからひらめきを得ました〜ヾ(´∀｀)ﾉｷｬｯｷｬ
試してみようと思います！ありがとうございます！！！
おはようございます。
もう雨も止んだし学校も保育園もあります。
昨日の @aaa さんの以下のコードからヒントを得まして
const renderAddress = cellAddress => {
console.log(`cellAddress:${cellAddress}`)
const spanElement = document.createElement('span');
if (cellAddress === "") {
spanElement.innerText = `somewhere in brooklyn`;
} else {
spanElement.innerText = cellAddress;
}
return spanElement;
};
初期値を設定してみました。Textの方はプレースホルダー設定してみました
const renderName = cellData => {
const v = cellData === '' ? 'initialValue' : cellData;
const dropdown = new Kuc.Dropdown({
items: [
{ label: '--初期値--', value: 'initialValue'},
{ label: 'John Brown', value: 'john' },
{ label: 'Steven Gerrard', value: 'steven' }
],
value: v
});
return dropdown;
};
const renderAddress = cellData => {
const text = new Kuc.Text({
value:cellData,
placeholder:'Address を 入れてね'
});
return text;
}
ちょっと説明すると
const v = cellData === '' ? 'initialValue' : cellData;
というのは三項演算子を使った書き方で、
もしcellDataが’‘空っぽ（空文字）だったら、vの値を ‘initialValue’ にする。
cellDataが’'空っぽ（空文字）じゃなかったら、vの値をcellDataにする。
という意味です。
@aaa さんのコードの↓この部分と同じような意味です。
if (cellAddress === "") {
spanElement.innerText = `somewhere in brooklyn`;
} else {
spanElement.innerText = cellAddress;
}
これで↓こんな感じになりました。
面白いね！！
マタヤロウ！！ノシノシ
三項演算子で思い出したのですが、Typescriptの ??が
JavaScriptにもあるのですね。両方とも使ったことないですが。
Null 合体演算子 (??) - JavaScript | MDN
素敵情報ありがとうございます！！！
kintoneのカスタマイズしてると空文字だったりundefinedだったりnullだったり出てくるので
使えるところがいろいろありそうですね
|| とか && はめっちゃ使ってました
このトピックは最後の返信から 60 分が経過したので自動的にクローズされました。新たに返信することはできません。