いつもお世話になっております。
現在「レコード追加時にテーブルに値をセットする」というJSカスタマイズをして、チェックリストのアプリを作成しています。
が、行の数がかなり多いので読み込みに時間がかかっており、ロード中に保存してしまうとリストが不完全になってしまう不具合があります。
そこで、
①ロード中であることを明示する
②その間は編集できないようにする
というようにしたい思いますが、どのようにしたらよいでしょうか。
どなたかご教示くださいますようお願いいたします。
②については以下のCSSでできそうなのですが・・・
ーーーーーーーーーーーー
.edit-subtable-gaia input {
pointer-events : none;
background: #dbdcdd !IMPORTANT;
box-shadow: initial !IMPORTANT;
}
.edit-subtable-gaia button {
pointer-events : none;
}
こんにちは。
こちらのspin.jsを使えば1,2のどちらの課題もクリアできると思います。
早速ご返信いただきありがとうございます。
記事を見ながら試してみているのですが、レコード作成時にスピナーが止まらない（他のカスタマイズが動かない）状態になってしまいました。
コンソールでは以下のエラーが出ているのですが、どのように対応したらよろしいでしょうか。
{"code":"CB_JH01","id":"aluwg2dZqvDxRr6qsJ8e","message":"認証に失敗しました。セッション認証には、「X-Requested-With」ヘッダーが必要です。"}
検索してみてもイマイチよくわからず・・・
初歩的なところが分かっておらず申し訳ございませんが、ご教示いただけますと助かります。
エラー的にはスピナー関係ないところでエラーが出てますね。
↓のような感じで実装すればうまくいくと思います。jQueryの読み込みも必要なのでお願いします！
もしまたダメでしたら、コード全体を張っていただければ詳しくアドバイスできると思います！
jQuery.noConflict();
(function ($) {
"use strict";
// スピナーを動作させる関数
function showSpinner() {
// 要素作成等初期化処理
if ($('.kintone-spinner').length == 0) {
// スピナー設置用要素と背景要素の作成
var spin_div = $('<div id ="kintone-spin" class="kintone-spinner"></div>');
var spin_bg_div = $('<div id ="kintone-spin-bg" class="kintone-spinner"></div>');
// スピナー用要素をbodyにappend
$(document.body).append(spin_div, spin_bg_div);
// スピナー動作に伴うスタイル設定
$(spin_div).css({
'position': 'fixed',
'top': '50%',
'left': '50%',
'z-index': '510',
'background-color': '#fff',
'padding': '26px',
'-moz-border-radius': '4px',
'-webkit-border-radius': '4px',
'border-radius': '4px'
});
$(spin_bg_div).css({
'position': 'fixed',
'top': '0px',
'left': '0px',
'z-index': '500',
'width': '100%',
'height': '200%',
'background-color': '#000',
'opacity': '0.5',
'filter': 'alpha(opacity=50)',
'-ms-filter': "alpha(opacity=50)"
});
// スピナーに対するオプション設定
var opts = {
'color': '#000'
};
// スピナーを作動
new Spinner(opts).spin(document.getElementById('kintone-spin'));
}
// スピナー始動（表示）
$('.kintone-spinner').show();
}
// スピナーを停止させる関数
function hideSpinner() {
// スピナー停止（非表示）
$('.kintone-spinner').hide();
}
kintone.events.on("app.record.create.show", function(event) {
// スピナー始動
showSpinner();
/ ************************************ /
// ここでテーブルに値をセットする処理
/ ************************************ /
// セット終わったらスピナー止める
hideSpinner();
return event;
});
})(jQuery);
早速アドバイスいただきありがとうございます！
以下で試してみたのですが、やはりスピナーが止まらず行と値が追加されない状態です。（値はダミーです）
スピナーなしですと、10秒くらいで値がセットされるのですが。
コンソール画面にもエラーが出てこないので、どこが悪いのか自分ではわからず・・・
お助けいただけないでしょうか。
（前のコメントで出たエラーについては自己解決しました。お騒がせしました。）
ーーーーーーーーーーーーーーーー
jQuery.noConflict();
(function ($) {
“use strict”;
// スピナーを動作させる関数
function showSpinner() {
// 要素作成等初期化処理
if ($(‘.kintone-spinner’).length == 0) {
// スピナー設置用要素と背景要素の作成
var spin_div = $(‘<div id =“kintone-spin” class=“kintone-spinner”></div>’);
var spin_bg_div = $(‘<div id =“kintone-spin-bg” class=“kintone-spinner”></div>’);
// スピナー用要素をbodyにappend
$(document.body).append(spin_div, spin_bg_div);
// スピナー動作に伴うスタイル設定
$(spin_div).css({
‘position’: ‘fixed’,
‘top’: ‘50%’,
‘left’: ‘50%’,
‘z-index’: ‘510’,
‘background-color’: ‘#fff’,
‘padding’: ‘26px’,
‘-moz-border-radius’: ‘4px’,
‘-webkit-border-radius’: ‘4px’,
‘border-radius’: ‘4px’
});
$(spin_bg_div).css({
‘position’: ‘fixed’,
‘top’: ‘0px’,
‘left’: ‘0px’,
‘z-index’: ‘500’,
‘width’: ‘100%’,
‘height’: ‘200%’,
‘background-color’: ‘#000’,
‘opacity’: ‘0.5’,
‘filter’: ‘alpha(opacity=50)’,
‘-ms-filter’: “alpha(opacity=50)”
});
// スピナーに対するオプション設定
var opts = {
‘color’: ‘#000’
};
// スピナーを作動
new Spinner(opts).spin(document.getElementById(‘kintone-spin’));
}
// スピナー始動（表示）
$(‘.kintone-spinner’).show();
}
// スピナーを停止させる関数
function hideSpinner() {
// スピナー停止（非表示）
$(‘.kintone-spinner’).hide();
}
kintone.events.on(“app.record.create.show”, function(event) {
// スピナー始動
showSpinner();
/************************************/
// 行の作成
var newRow1 = createValue_(‘01’,‘02’,‘03’,‘ー’);
var newRow2 = createValue_(‘04’,‘05’,‘06’,‘ー’);
var newRow3 = createValue_(‘07’,‘08’,‘09’,‘ー’);
var newRow4 = createValue_(‘10’,‘11’,‘12’,‘ー’);
var newRow5 = createValue_(‘13’,‘14’,‘15’,‘ー’);
var newRow6 = createValue_(‘16’,‘17’,‘18’,‘ー’);
var newRow7 = createValue_(‘19’,‘20’,‘21’,‘ー’);
var newRow8 = createValue_(‘22’,‘23’,‘24’,‘ー’);
var newRow9 = createValue_(‘25’,‘26’,‘27’,‘ー’);
var newRow10 = createValue_(‘28’,‘29’,‘30’,‘ー’);
var newRow11 = createValue_(‘31’,‘32’,‘33’,‘ー’);
var newRow12 = createValue_(‘34’,‘35’,‘36’,‘ー’);
var newRow13 = createValue_(‘37’,‘38’,‘39’,‘ー’);
var newRow14 = createValue_(‘40’,‘41’,‘42’,‘ー’);
var newRow15 = createValue_(‘43’,‘44’,‘45’,‘ー’);
// tableGJ1 に初期値を定義する
event.record.tableGJ1.value = [
newRow1,
newRow2,
newRow3,
newRow4,
newRow5,
newRow6,
newRow7,
newRow8,
newRow9,
newRow10,
newRow11,
newRow12,
newRow13,
newRow14,
newRow15
];
return event;
});
function createValue_(text1,text2,text3,radio1) {
return {
‘value’: {
‘項目_GJ1’: {
‘type’: ‘SINGLE_LINE_TEXT’,
‘value’: text1
},
‘対象_GJ1’: {
‘type’: ‘SINGLE_LINE_TEXT’,
‘value’: text2
},
‘判定基準_GJ1’:{
‘type’: ‘SINGLE_LINE_TEXT’,
‘value’: text3
},
‘確認_GJ1’:{
‘type’:‘RADIO_BUTTON’,
‘value’: radio1
}
}
};
}
/************************************/
// セット終わったらスピナー止める
hideSpinner();
return event;
})(jQuery);
↓自環境で動作確認したので動くと思います。
CDNでjQueryとspin.js読み込む必要があります！
jQuery.noConflict();
(function ($) {
"use strict";
function showSpinner() {
// 要素作成等初期化処理
if ($('.kintone-spinner').length == 0) {
// スピナー設置用要素と背景要素の作成
var spin_div = $('<div id ="kintone-spin" class="kintone-spinner"></div>');
var spin_bg_div = $('<div id ="kintone-spin-bg" class="kintone-spinner"></div>');
// スピナー用要素をbodyにappend
$(document.body).append(spin_div, spin_bg_div);
// スピナー動作に伴うスタイル設定
$(spin_div).css({
'position': 'fixed',
'top': '50%',
'left': '50%',
'z-index': '510',
'background-color': '#fff',
'padding': '26px',
'-moz-border-radius': '4px',
'-webkit-border-radius': '4px',
'border-radius': '4px'
});
$(spin_bg_div).css({
'position': 'fixed',
'top': '0px',
'left': '0px',
'z-index': '500',
'width': '100%',
'height': '200%',
'background-color': '#000',
'opacity': '0.5',
'filter': 'alpha(opacity=50)',
'-ms-filter': "alpha(opacity=50)"
});
// スピナーに対するオプション設定
var opts = {
'color': '#000'
};
// スピナーを作動
new Spinner(opts).spin(document.getElementById('kintone-spin'));
}
// スピナー始動（表示）
$('.kintone-spinner').show();
}
// スピナーを停止させる関数
function hideSpinner() {
// スピナー停止（非表示）
$('.kintone-spinner').hide();
}
function createValue_(text1, text2, text3, radio1) {
return {
'value': {
'項目_GJ1': {
'type': 'SINGLE_LINE_TEXT',
'value': text1
},
'対象_GJ1': {
'type': 'SINGLE_LINE_TEXT',
'value': text2
},
'判定基準_GJ1': {
'type': 'SINGLE_LINE_TEXT',
'value': text3
},
'確認_GJ1': {
'type': 'RADIO_BUTTON',
'value': radio1
}
}
};
}
showSpinner();
kintone.events.on("app.record.create.show", function (event) {
// 行の作成
var newRow1 = createValue_('01', '02', '03', 'ー');
var newRow2 = createValue_('04', '05', '06', 'ー');
var newRow3 = createValue_('07', '08', '09', 'ー');
var newRow4 = createValue_('10', '11', '12', 'ー');
var newRow5 = createValue_('13', '14', '15', 'ー');
var newRow6 = createValue_('16', '17', '18', 'ー');
var newRow7 = createValue_('19', '20', '21', 'ー');
var newRow8 = createValue_('22', '23', '24', 'ー');
var newRow9 = createValue_('25', '26', '27', 'ー');
var newRow10 = createValue_('28', '29', '30', 'ー');
var newRow11 = createValue_('31', '32', '33', 'ー');
var newRow12 = createValue_('34', '35', '36', 'ー');
var newRow13 = createValue_('37', '38', '39', 'ー');
var newRow14 = createValue_('40', '41', '42', 'ー');
var newRow15 = createValue_('43', '44', '45', 'ー');
// tableGJ1 に初期値を定義する
event.record.tableGJ1.value = [
newRow1,
newRow2,
newRow3,
newRow4,
newRow5,
newRow6,
newRow7,
newRow8,
newRow9,
newRow10,
newRow11,
newRow12,
newRow13,
newRow14,
newRow15,
];
hideSpinner();
return event;
});
})(jQuery);
度々で申し訳ございません・・・。
いただいたコードで再度試してみたのですが、やはり上手くいかず・・・
何故か、一覧画面でスピナーし続けてしまうという状態になってしまいました。（ちゃんと"app.record.create.show"なのですが）
以下のような手順でやりました。
①JSedit で上記コードをコピペし、JSファイルを作成
②ライブラリはJSedit上でjqueryとspin.jsを選択
③テーブルは以下の通り
④ブラウザはchromeです
⑤コンソールにエラーは出ていません。
追記です。
一覧でスピンしている状態から、アドレスバーにeditを入れてレコードを追加してみると、ちゃんと動作してくれました。
すいません確認不足でした！
↓でアドレスにedit含まれるときのみスピナーが動きます
if(window.location.href.indexOf("/edit") !== -1) {
showSpinner();
}
うまく動きました。
ご丁寧に教えていただき、ありがとうございました！
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。