Open Gucchiy opened 3 years ago
Kintone に Wordpress ページへのリンクを張る
ボタン設置済み ただし nponeo全体のアプリに表示されている? test_matsuno_app テストアプリにも表示されている 要確認
Kintone に Wordpress ページへのリンクを張る
37
ボタン設置済み ただし nponeo全体のアプリに表示されている? test_matsuno_app テストアプリにも表示されている 要確認
jsを読み込む位置が間違っていた Kintoneシステム管理からではなく 読み込みたいアプリで アプリの設定 カスタマイズ JavaScript で読み込むと対象アプリのみ反映される
https://developer.cybozu.io/hc/ja/articles/201952870 レコード追加画面にボタンが表示されない。 レコード追加後は表示される ヘッダに追加したボタンの左マージンが無い CSSは何処に書くのか
// https://developer.cybozu.io/hc/ja/articles/201767270
(function() {
"use strict";
//レコード一覧画面 app.record.index.showにボタンを追加する
//https://developer.cybozu.io/hc/ja/articles/201941964
kintone.events.on('app.record.index.show', function(event) {
if (document.getElementById('my_index_button') !== null) {
return;
}
var myIndexButton = document.createElement('button');
myIndexButton.id = 'my_index_button';
myIndexButton.innerText = 'neogr.jp を開く';
// ボタンクリック時の処理
myIndexButton.onclick = function() {
// window.confirm('いま押しましたね?');
// ボタンを押したら指定したアドレスを新しいタブで開く
// https://www.sejuku.net/blog/64379
window.open('https://neogr.jp/', '_blank');
};
//ボタンを置く場所はレコード一覧画面のメニュー右側の空白部分
kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);
});
})();
//https://developer.cybozu.io/hc/ja/articles/201952870
(function() {
"use strict";
kintone.events.on('app.record.detail.show', function(event) {
var myIndexButton = document.createElement('button');
myIndexButton.id = 'my_index_button';
myIndexButton.innerText = 'neogr.jp を開く';
myIndexButton.onclick = function () {
// window.alert('メニュー部');
window.open('https://neogr.jp/', '_blank');
}
kintone.app.record.getHeaderMenuSpaceElement().appendChild(myIndexButton);
// 任意のスペースフィールドにボタンを設置
var mySpaceFieldButton = document.createElement('button');
mySpaceFieldButton.id = 'open_neogr';
mySpaceFieldButton.innerText = 'neogr.jp を開く';
mySpaceFieldButton.onclick = function () {
// window.alert('スペースフィールド');
window.open('https://neogr.jp/', '_blank');
}
kintone.app.record.getSpaceElement('open_neogr').appendChild(mySpaceFieldButton);
});
})();
レコード追加画面へのボタン追加ができた ボタンを表示する同じ処理をまとめて変数に入れて書けた
var events = ['app.record.detail.show',
'app.record.create.show'];
kintone.events.on(events, function(event) {
ただし一覧画面
'app.record.index.show'
略
kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);
と レコード詳細・レコート追加
'app.record.detail.show',
'app.record.create.show'
略
kintone.app.record.getHeaderMenuSpaceElement().appendChild(myIndexButton);
は呼び出す場所が違う
kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);
kintone.app.record.getHeaderMenuSpaceElement().appendChild(myIndexButton);
ので同じコードを2重に書かなくてはいけない なんとかなるのだろうか
console.log('event', event.type);
を適宜入れるとブラウザのデベロッパーツール コンソール でどの機能を呼び出しているか確認できる
// https://developer.cybozu.io/hc/ja/articles/201767270
(function() {
"use strict";
//レコード一覧画面 app.record.index.showにボタンを追加する
//https://developer.cybozu.io/hc/ja/articles/201941964
kintone.events.on('app.record.index.show', function(event) {
console.log('event', event.type);
if (document.getElementById('my_index_button') !== null) {
return;
}
var myIndexButton = document.createElement('button');
myIndexButton.id = 'my_index_button';
myIndexButton.innerText = 'neogr.jp を開く';
// ボタンクリック時の処理
myIndexButton.onclick = function() {
// window.confirm('いま押しましたね?');
// ボタンを押したら指定したアドレスを新しいタブで開く
// https://www.sejuku.net/blog/64379
window.open('https://neogr.jp/', '_blank');
};
//ボタンを置く場所はレコード一覧画面のメニュー右側の空白部分
kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);
});
})();
//https://developer.cybozu.io/hc/ja/articles/201952870
(function() {
"use strict";
// イベントはまとめて書くとよいみたいなので
// https://bit.ly/3FSMg2w
var events = ['app.record.index.show','app.record.detail.show',
'app.record.create.show'];
kintone.events.on(events, function(event) {
// kintone.events.on('app.record.detail.show', function(event) {
console.log('event', event.type);
var myIndexButton = document.createElement('button');
myIndexButton.id = 'my_index_button';
myIndexButton.innerText = 'neogr.jp を開く';
myIndexButton.onclick = function () {
// window.alert('メニュー部');
window.open('https://neogr.jp/', '_blank');
}
kintone.app.record.getHeaderMenuSpaceElement().appendChild(myIndexButton);
// 任意のスペースフィールドにボタンを設置
var mySpaceFieldButton = document.createElement('button');
mySpaceFieldButton.id = 'open_neogr';
mySpaceFieldButton.innerText = 'neogr.jp を開く';
mySpaceFieldButton.onclick = function () {
// window.alert('スペースフィールド');
window.open('https://neogr.jp/', '_blank');
}
kintone.app.record.getSpaceElement('open_neogr').appendChild(mySpaceFieldButton);
});
})();
ヘッダに追加したボタンの ブラウザでのIDが 下記の指定で my_index_button になる myIndexButton.id = 'my_index_button'; add_link_button_on_app_record_show.css をつくり
#my_index_button {
margin: 1em 0em 0em 1em;
}
PC用のCSSファイルを読み込むで読み込んだらマージンがつけられた。
https://bit.ly/3COQOot の記事をコピペでボタンを作り https://www.sejuku.net/blog/64379 の指定したアドレスを新しいタブで開く で動作を書き換え https://bit.ly/3COQOot の記事でKintoneに取り込み 一覧画面のみボタンが設置できました。入力画面 は app.record.create.show らしいですができませんでした。 https://bit.ly/3rc4RlQ
add_link_button_on_app_record_show.js