始めて質問させていただきます。JavaScriptの超初心者です。目下、下記課題に取り組んでいます。
各顧客に対して複数の施策予定項目A1~Anがあり、
集計の種類は(1)指定した特定担当者のみの集計、(2)所属担当者全員の小計を
現状、チュートリアルなどを参考に見よう見まねで、(1)～(4)について、どの集計をするかの
次のステップとして、(1)~(4)の種別と、(1)の場合は集計対象の担当者名、(2)の場合は
http://phpjavascriptroom.com/?t=js&p=selectoption#a_pulldown
このサイトのソースを カスタマイズレコード一覧の表示形式のHTML設定部分に張り付つけても
できましたら、HTML設定部での設定内容と、formからの入力情報を取り出して
また、集計対象となる担当者別、顧客別の集計の対象データのイメージを下記の表1に示します。
やや強引な手法ですが、下記のように書けると思います。
＜方法＞
forms という変数に、JavaScriptのサンプルコードに該当する内容を設定します。
kintone のヘッダエリアに1.で作成した forms の内容を埋め込みます。
＜準備＞
kintoneのJavaScriptカスタマイズ設定で jQuery を有効にしてください。https://developer.cybozu.io/hc/ja/articles/204695384-%E7%AC%AC12%E5%9B%9E-jQuery%E3%82%92%E5%88%A9%E7%94%A8%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86
＜コード＞
jQuery.noConflict();
(function($) {
"use strict";
kintone.events.on("app.record.index.show", function(e) {
var forms = (function() {
/*
<form action="#">
<table>
<tr>
<td>
<select name="parentS" onchange="createChildOptions(this.form)" style="width:200px;">
<option value="">親ジャンルを選択して下さい</option>
<option value="1">Fruits</option>
<option value="2">Vegitables</option>
<option value="3">Driknks</option>
</select>
</td>
<td><!--表示位置--><div id="childS"></div></td>
</tr>
</table>
<input type="button" value="選択内容を確認" onclick="chkSelect(this.form);" />
</form>
<script type="text/javascript">
// 子ジャンル（selectC）用の配列
var item = new Array();
item[0] = new Array();
item[0][0]="---------------------";
// Fruits
item[1] = new Array();
item[1][0]="子ジャンルを選択して下さい";
item[1][1]="Apple";
item[1][2]="Banana";
item[1][3]="Melon";
item[1][4]="Grape";
// Vegitables
item[2]= new Array();
item[2][0]="子ジャンルを選択して下さい";
item[2][1]="Potato";
item[2][2]="Carrot";
item[2][3]="Tomato";
// Drinks
item[3] = new Array();
item[3][0]="子ジャンルを選択して下さい";
item[3][1] = "Splite";
item[3][2] = "Beer";
item[3][3] = "Cola";
item[3][4] = "Coffee";
item[3][5] = "Milk Tea";
// 子ジャンルのID名
var idName="childS";
// 親ジャンルが変更されたら、子ジャンルを生成
function createChildOptions(frmObj) {
// 親ジャンルを変数pObjに格納
var pObj=frmObj.elements["parentS"].options;
// 親ジャンルのoption数
var pObjLen=pObj.length;
var htm="<select name='childS' style='width:200px;'>";
for(i=0; i<pObjLen; i++ ) {
// 親ジャンルの選択値を取得
if(pObj[i].selected>0){
var itemLen=item[i].length;
for(j=0; j<itemLen; j++){
htm+="<option value='"+j+"'>"+item[i][j]+"<\/option>";
}
}
}
htm+="<\/select>";
// HTML出力
document.getElementById(idName).innerHTML=htm;
}
// 選択されている値をアラート表示
function chkSelect(frmObj) {
var s="";
var idxP=frmObj.elements['parentS'].selectedIndex;
var idxC=frmObj.elements['childS'].selectedIndex;
if(idxP>0){
s+="親ジャンルの選択肢："+frmObj.elements['parentS'][idxP].text+"";
if(idxC > 0){
s+="子ジャンルの選択肢："+frmObj.elements['childS'][idxC].text+"";
}else{
s+="子ジャンルが選択されていません";
}
}else{
s+="親ジャンルが選択されていません";
}
alert(s);
}
// onLoad時にプルダウンを初期化
function init(){
htm ="<select name='childS' style='width:200px;'>";
htm+="<option value=''>"+item[0][0]+"<\/option>";
htm+="<\/select>";
// HTML出力
document.getElementById("childS").innerHTML=htm;
}
// ページ読み込み完了時に、プルダウン初期化を実行
window.onload=init;
</script>
*/
}).toString().match(/\/\*([^]*)\*\//)[1];
$(kintone.app.getHeaderMenuSpaceElement()).append(forms);
return e;
});
})(jQuery);
安藤 光昭様より非常にありがたいreplyを頂きました。
その結果、(1)想定していたalert出力については入力値を正しく反映して
(4)また、きわめて基本的な質問ですが、私が何度かトライした
集計及び作表関数との結合を始めていきます。引き続き世話になるかと
> しかし、(2)Kintone一覧画面では添付画像のように2か所にプルダウンメニュ
これは、私の書いたコードの目的がヘッダ位置にプルダウンを表示するためのものだったからです。
> 教示頂いた方法では、HTML部分に<script>があり、
私の書いたコードでは、Elementとして <script> タグを含むHTMLをヘッダ部分に挿入しているためHTML内に埋め込まれています。
var forms = (function() {
/*
(HTML)
*/
}).toString().match(/\/\*([^]*)\*\//)[1];
上記の処理は、formsという変数に (HTML) の部分に記載したHTMLをElementとして格納します。
その後、
$(kintone.app.getHeaderMenuSpaceElement()).append(forms);
としているため、getHeaderMenuSpaceElement() で取得したHTML要素の中に、前述の処理で作成した froms を埋め込んでいます。
＊＊＊ ですが ＊＊＊
目的が、Scriptタグの中身を動作させたいだけであれば、jsファイルに<script>タグの中身を書くだけで良いと思います。
jQuery.noConflict();
(function($) {
"use strict";
kintone.events.on("app.record.index.show", function(e) {
//サンプルソースの
varitem =newArray();
//から
window.onload=init;
//まで
return e;
});
})(jQuery);
をカスタマイズソースとして、PC用のJavaScript設定部でソースとして設定する方法で良いかもしれません。
安藤様
(A) ご指導いただいたとおりの実行
◎実行結果：上記設定の後「アプリの更新」をして、chromeのデバッガーを立ち上げてから
(B)関数 createChildOptions と 関数 chkSelect とを HTMLに移動http://www.openspc2.org/JavaScript/study/script.html
◎結果はAと同様で下記のエラーでした。
<script>タグ内に、関数を定義してあっても、Kintoneで実行すると関数未定義となります。HTML設定部分のどこが間違っているのでしょうか?
カスタマイズレコード一覧のHTMLと、JavaScriptカスタマイズは直接参照ができないようになっています。
今回のパターンで言うと、JavaScriptに書かれている createChildOptions は、カスタマイズレコード一覧のHTML内に存在する下記のタグからは参照ができません。
<select name="parentS" onchange="createChildOptions(this.form)" style="width:200px;">
ではどうするかと言うと、次の2段階の手順になります。
(1) カスタマイズレコード一覧で、JavaScript を呼び出したいタグと form タグに id を設定しイベントハンドラは削除する
<form id="customForm"action="#">
//省略
<select id="parentSelect" name="parentS" style="width:200px;">
//省略
\<input id="resultButton" type="button" value="選択内容を確認" /\>
(2) 設定した id にイベントハンドラを設定し、呼び出す関数を少し変更する
jQuery.noConflict();
(function($) {
// "use strict"; はコメントにする
kintone.events.on("app.record.index.show",function(e) {
//イベントハンドラの追加
＄（’#parentSelect').on('change', createChildOptions);
＄（’#resultButton').on('click', chkSelect);
//サンプルソース開始
varitem =newArray();
//省略
// 親ジャンルが変更されたら、子ジャンルを生成 (関数の最初の2行を変更)
function createChildOptions() {
var frmObj =document.getElementById("customForm");
//省略
}
// 選択されている値をアラート表示 (関数の最初の2行を変更)
function chkSelect() {
var frmObj =document.getElementById("customForm");
//省略
}
//省略
window.onload=init;
//サンブルソース終了
returne;
});
})(jQuery);
これで多分動くんじゃないかと思います。
※注意
色々とJavaScriptのコードとしてはイマイチな部分があります。
”とりあえず”動くと思われるコードを書いてます。
安藤様
・Uncaught ReferenceError: createChildOptions is not defined
の二つのエラーが発生していました。
関数 myDisplayCustomizedViewの引数に メニューで取得した集計対象を
alert(s) の代わりに、メニューの値を使いたいという意味ですかね？
function chkSelect() {
var frmObj = document.getElementById("customForm");
//sをオブジェクト型に変更
var s={parent: '', child: ''};
var idxP=frmObj.elements['parentS'].selectedIndex;
var idxC=frmObj.elements['childS'].selectedIndex;
if(idxP>0){
s.parent = frmObj.elements['parentS'][idxP].text;
if(idxC > 0){
s.child = frmObj.elements['childS'][idxC].text;
}
}
myDisplayCustomizedView(records, s);
}
function myDisplayCustomizedView(records, s) {
console.log('親: ' + s.parent);
console.log('子: ' + s.child);
}
みたいに書いたらどうでしょうか？
藤様
重ね重ねの対応ありがとうございます。
(A)ご指導通りの実行結果
ご指導いただいた通り、sを配列にしてparent及びchild の値をこのsに代入し、
(B) UserSelection (名前空間のl変数) を利用した方法
(① parent及びchildの選択値を格納する名前空間の変数 var UserSelection={};を用意し、
このケースの結果は、myDisplayCustomizedView内で出させている alertが起動し、
ここから先は関数の実行順序を制御するために、コールバック関数が必要なのかと考えています。
ボタンを押した時に、2段階選択の内容を使ってデータを再検索する、という仕様でしょうか？
であれば、ボタンクリックのイベントハンドラの中で検索処理を実行する必要があります。
functionchkSelect() {
varfrmObj =document.getElementById("customForm");
//sオブジェクトに値を格納
vars={parent:'',child:''};
varidxP=frmObj.elements['parentS'].selectedIndex;
varidxC=frmObj.elements['childS'].selectedIndex;
if(idxP>0){
s.parent = frmObj.elements['parentS'][idxP].text;
if(idxC >0){
s.child = frmObj.elements['childS'][idxC].text;
}
}
kintone.api(kintone.api.url('/k/v1/records', true), 'GET', param, function(resp) {
if (resp.records.length > 0) {
myDisplayCustomizedView(resp.records, s);
}
});
}
functionmyDisplayCustomizedView(records, s) {
console.log(records);
console.log('親: '+ s.parent);
console.log('子: '+ s.child);
}
> コールバック関数の呼び方が等がよく理解できていない
コールバック関数は、元の関数の処理が終わった時に呼び出される、という風に考えるとわかりやすいかもしれません。
上記の kintone.api() を例にすると、この関数の構造は kintone.api(P1, P2, P3, P4) となっています。
P1: 呼び出すAPIのURL = kintone.api.url(‘/k/v1/records’, true)
P2: 呼び出しの時のメソッド = ‘GET’
P3: APIに送るパラメータ = param
P4: コールバック関数 = 下記
function(resp) {
if(resp.records.length >0)
myDisplayCustomizedView(resp.records, s);
}
}
処理の流れは、P1〜P3を使ってAPIを実行し、成功したらP4のコールバック関数を呼び出すという風になってます。
似たようなのに、イベントハンドラというのがあって、これはイベントが発生した時に関数を呼び出すというものです。
kintone.events.on(P1, P2)の場合
P1: イベントの種類を記載 = “app.record.index.show”
P2: イベントハンドラ = 下記
function(e) {
// "app.record.index.show"イベントが発生した時に実行する処理
console.log(e);
return e;
}
少し前に私が書いた下記の処理は、ボタンにイベントハンドラを追加しています。
＄（’#resultButton').on('click', chkSelect);
＄（’#resultButton ’).on(P1, P2);
P1 = イベントの種類 = ‘click’ イベント
P2 = イベントハンドラ = chkSelect関数
安藤様
土日にもかかわらず、対応いただきまして誠にありがとうございます。
結果は、
そこで、ご指導頂いた構成において 関数 myDisplayCustomizedView を呼びだしている
最後の行でプルダウンメニューを実行させ、それが終了したらコールバックを介して、myDisplayCustomizedView を実行させようさせました。
この実行結果は、プルダウンメニューの入力は親及び子もできますが、選択確認ボタンを押した後
よろしくご指導を願いします。
> ご指導いただいたように、kintone.events 処理の中に、Kintone apiを取り込み
いいえ、そうではないです。
プルダウンの処理が終わった時 ＝ 選択内容を確認ボタンを押した時 ＝ chkSelect関数の中
に検索処理を書いてください。
＜考え方＞
いつ、どのタイミングで、選択内容に合わせた検索するのですか？
=> そのタイミングの時に発生するイベントハンドラに検索処理を書きます。
＜今の状態＞
“app.record.index.show” イベントのイベントハンドラに設定されている
=> 一覧画面が表示された時に検索されている
=> 一覧画面が表示された時は、誰も選択内容を選んでないので、選択リストの内容は定義されない
ところで・・・
> そこで、ご指導頂いた構成において 関数 myDisplayCustomizedView を呼びだしている
上記の文章は、何のcallBack関数にされているのか、コードを見ても理解できませんでした。
おそらく、callBack関数のご理解が間違っていると思います。
安藤様
訂正して実行させてみたら、プルダウンの入力情報を正しくalertで表示した後、
大変ありがとうございます。これでやりたがったことの見通しがつきました。
安藤様
連絡遅くなりました。全体を通しで実行するのに少し手間取りました。
追伸:
system
2025 年 4 月 9 日午前 12:18
19
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。