一覧表示時のスペースに文字列を表示したい

kintone カスタマイズ
1

下記の空白の箇所に文字列を表示したいですが、反映できなかったため

コードが誤っているのだと思いますが、アドバイスいただけないでしょうか。

空白の箇所は「kintone.app.getHeaderMenuSpaceElement()」であるとほかの記事を見て分かったのですが、反映されませんでした…。

 

(function(){
“use strict”;

kintone.events.on(‘app.record.index.show’,function(event){
kintone.app.getHeaderMenuSpaceElement().value=‘テスト’
});
return event;
})();

 

よろしくお願いします。

2

Maruさん、こんにちは。Yoshidaと申します。

下記の記事が参考になるかと思います。

第2回 レコード一覧画面にボタンを置いてみよう！
https://developer.cybozu.io/hc/ja/articles/201767270-%E7%AC%AC2%E5%9B%9E-%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E4%B8%80%E8%A6%A7%E7%94%BB%E9%9D%A2%E3%81%AB%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E7%BD%AE%E3%81%84%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86-

また、動かない時はデバッグすると良いかと思います。

動かない？そんな時はデバッグをしてみよう！入門編
https://developer.cybozu.io/hc/ja/articles/207613916

 

私は、今回の場合は下記のようにしてデバッグしました。

var el = kintone.app.getHeaderMenuSpaceElement();
console.log(el);

3

Kazuhiro Yoshida さん

ありがとうございます。

console.logを試してみたところundefineとなってしまい、何か記述が間違えているのだと思いますが、

教えていただけないでしょうか。

 

(function() {
“use strict”;
kintone.events.on(‘app.record.index.show’, function(event) {

var el = document.createElement(‘a’);
a.textContent = ‘TEST!!’;

kintone.app.getHeaderMenuSpaceElement().appendChild(el);
});
})();

 

よろしくお願いします。

4

Maruさん、Yoshidaと申します。

４行目で作成した var el = document.createElement(‘a’);
el に対して、テキスト等の内容を追加すれば良いですよ。

  1. (function() {
  2. “use strict”;
  3. kintone.events.on(‘app.record.index.show’, function(event) {
  4. var el = document.createElement('a');

  5. //a.textContent = 'TEST!!';

  6. el.textContent = 'TEST!!';

  7. kintone.app.getHeaderMenuSpaceElement().appendChild(el);
  8. });
  9. })();

 

デバッグすると、こうなって <a></a>

こうなる <a>TEST!!</a>

のが見えると思います。DOMの操作はややこしいですね。

5

Kazuhiro Yoshida さん

教えていただきありがとうございます。

el.textContent ～～となるのですね！！

勉強になりました。

無事に反映もできましたので、ここから見た目のCSSなどはまたチャレンジしてみたいと思います。

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

6

 **Maru **さん

動作できたようで良かったです。

今回私も、textContent の利用方法など、改めて調べて勉強になりました。

今後ともよろしくお願いします。