Garoonのポータルに表示優先度順でソートした行動予定表を設置したい。

実現したいこと

Garoonのポータルに表示優先度順でソートした行動予定表を設置したい。

前提

Garoon 開発 Tipsで公開されている

https://cybozudev.zendesk.com/hc/ja/articles/360021866411-%E3%81%96%E3%82%93%E3%81%AD%E3%82%93%E3%81%AA%E8%A1%8C%E5%8B%95%E4%BA%88%E5%AE%9A%E8%A1%A8%E3%82%92Garoon%E3%83%9D%E3%83%BC%E3%82%BF%E3%83%AB%E3%81%AB%E7%A7%BB%E8%A1%8C%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F

を使用し、メンバーを表示優先度順で取得し表示させたいです。
ド素人で恐縮ですが、解決法がわかれば幸いです。

該当のソースコード

javascript

1(function($) {2 'use strict';3 // moment の設定を日本にする4 moment.locale('ja');5 6 function makeXMLHeader(service, action) {7 var xmlns = 'soap="http://www.w3.org/2003/05/soap-envelope"';8 return (9 '<?xml version="1.0" encoding="UTF-8"?>' +10 '<SOAP-ENV:Envelope xmlns:SOAP-ENV="http://www.w3.org/2003/05/soap-envelope" ' +11 'xmlns:xsd="http://www.w3.org/2001/XMLSchema" ' +12 'xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ' +13 'xmlns:SOAP-ENC="http://schemas.xmlsoap.org/soap/encoding/" ' +14 'xmlns:' + xmlns + '>' +15 '<SOAP-ENV:Header>' +16 '<Action SOAP-ENV:mustUnderstand="1" ' +17 'xmlns="http://schemas.xmlsoap.org/ws/2003/03/addressing">' + action + '</Action>' +18 '<Timestamp SOAP-ENV:mustUnderstand="1" Id="id" ' +19 'xmlns="http://schemas.xmlsoap.org/ws/2002/07/utility">' +20 '<Created>2037-08-12T14:45:00Z</Created>' +21 '<Expires>2037-08-12T14:45:00Z</Expires>' +22 '</Timestamp>' +23 '<Locale>jp</Locale>' +24 '</SOAP-ENV:Header>'25 );26 }27 28 function runAjax(url, method, data, token) {29 var settings = {30 type: method,31 url: url,32 data: data,33 };34 35 settings.headers = {36 'Content-Type': 'text/xml; charset=UTF-8',37 'X-Cybozu-API-Token': 'XMLHttpRequest'38 };39 40 // Promiseでラップする41 return new garoon.Promise(function(resolve, reject) {42 $.ajax(settings)43 .done(resolve)44 .fail(reject);45 });46 }47 48 // SOAP API BaseGetUsersById を実行する49 function getBaseGetUsersById() {50 51 var xmlGetUsers = makeXMLHeader('base', 'BaseGetUsersById') +52 '<SOAP-ENV:Body>' +53 '<BaseGetUsersById>' +54 '<parameters>' +55 '<user_id>' + garoon.base.user.getLoginUser().garoonId + '</user_id>' +56 '</parameters>' +57 '</BaseGetUsersById>' +58 '</SOAP-ENV:Body></SOAP-ENV:Envelope>';59 60 // ユーザーの詳細情報を取得する61 return runAjax('/g/cbpapi/base/api.csp', 'POST', xmlGetUsers)62 .then(function(resUsers) {63 return resUsers;64 }).catch(function(err) {65 return err;66 });67 }68 69 // garoon.api() を使って、レコード検索を一括で行う70 // 途中でエラーが発生した場合でも処理は続行する71 function fetchDatas(aryobj, opt_datas, pidx) {72 var allDatas = opt_datas || [],73 idx = pidx || 0;74 return garoon.api(aryobj[idx], 'GET', {}).catch(function(err) {75 return err;76 }).then(function(resp) {77 allDatas = allDatas.concat(resp);78 idx += 1;79 if (aryobj.length !== idx) {80 return fetchDatas(aryobj, allDatas, idx);81 }82 return allDatas;83 });84 }85 86 // 日時から日付または時刻を返す87 function getDateOrTime(dt) {88 // dt が当日だったら、時刻を返す89 if (moment(dt).format('YYYYMMDD') === moment().format('YYYYMMDD')) {90 return moment(dt).format('HH:mm');91 }92 93 // dt が当日でなければ、日付を返す94 return moment(dt).format('MM/DD');95 }96 97 // 行動掲示板を作成する98 function makeOutBoard(users, psch) {99 var sch, starthhmm, endhhmm;100 101 $('.schtr').remove();102 // 画面更新時の日時を表示103 $('#currenttime').html(moment().format('YYYY年MM月DD日(ddd) HH:mm'));104 105 // テーブルの 1行の構成を定義する106 var comptr = _.template(107 '<tr class="schtr">' +108 '<td id="tdschuser<%- userid %>" class="nowrap_grn" scope="row"></td>' +109 '<td><ul id="uischevents<%- userid %>" class="schedule_board_item_grn">' +110 '</ul></td>' +111 '<td id="tdschreturn<%- userid %>"></td>' +112 '<td><ul id="uischcurrent<%- userid %>" ' +113 'class="schedule_board_item_grn schedule_board_item_current_grn">' +114 '</ul></td>' +115 '</tr>'116 );117 118 // 外出予定セルの構成を定義する119 var compsch = _.template(120 '<li><a href="/g/schedule/view.csp?event=<%- evid %>" target="_blank">' +121 '<span class="schedule_board_time_grn"><%- evtime %></span>' +122 '<span class="<%- evcolor %> schedule_board_event_grn"><%- evmenu %></span>' +123 '<span><%- evsubject %></span>' +124 '</a></li>'125 );126 127 // 一般的なセルの構成を定義する128 var comptext = _.template(129 '<div class="tddiv"><span><%- txtbody %></span></div>'130 );131 132 // スケジュール表示部分を定義する133 var complist = _.template(134 '<li><span><%- libody %></span></li>'135 );136 137 // スケジュールのメニューに対応する色を返す138 var eventcolor = function(pmenu) {139 if (pmenu === '出張') {140 return 'event_color3_grn';141 } else if (pmenu === '往訪') {142 return 'event_color5_grn';143 } else if (pmenu === '休み') {144 return 'event_color4_grn';145 }146 return 'event_color2_grn';147 };148 149 // テーブルにユーザーごとのスケジュールを記入する150 for (var i = 0; i < users.length; i += 1) {151 if (!psch[i].statusCode || psch[i].statusCode > 201) continue;152 sch = psch[i].data.events;153 154 // テーブルの要素を追加155 $('#schtbody').append(comptr({'userid': users[i].id}));156 157 // 名前の列に氏名を表示158 $('#tdschuser' + users[i].id).append(comptext({'txtbody': users[i].name}));159 160 // スケジュールの内容をテーブルに表示161 for (var j = 0; j < sch.length; j += 1) {162 // スケジュールの開始日時と終了日時163 // 日付が当日であれば時刻のみ、当日でなければ日時を取得する164 starthhmm = getDateOrTime(sch[j].start.dateTime);165 endhhmm = sch[j].end ? getDateOrTime(sch[j].end.dateTime) : '';166 167 // メニューが「往訪」「 出張」「 休み」 に該当する場合は、予定に表示168 if (sch[j].eventMenu === '往訪' ||169 sch[j].eventMenu === '出張' ||170 sch[j].eventMenu === '休み') {171 // 「外出予定」列に、日時、メニュー、題目を表示する172 $('#uischevents' + users[i].id).append(173 compsch({174 'evid': sch[j].id,175 'evtime': starthhmm + ' - ' + endhhmm,176 'evmenu': sch[j].eventMenu,177 178 'evsubject': sch[j].subject,179 'evcolor': eventcolor(sch[j].eventMenu)180 })181 );182 183 // スケジュールの日時が現在の時間に該当する場合は、「現在の予定」の列に表示184 if (moment(sch[j].start.dateTime) < moment() &&185 (!sch[j].end || moment() < moment(sch[j].end.dateTime))) {186 $('#uischcurrent' + users[i].id).append(187 complist({'libody': sch[j].subject})188 );189 }190 }191 192 // メニューが「帰社」に該当する場合は、「帰社時刻」の列に日時を表示193 if (sch[j].eventMenu === '帰社') {194 // 終了日時が入っていれば終了日時、なければ開始日時195 $('#tdschreturn' + users[i].id).append(196 comptext({'txtbody': endhhmm ? endhhmm : starthhmm})197 );198 }199 }200 }201 return null;202 }203 204 // グループのメンバーとスケジュールを取得する205 function getScheduleData(porgid) {206 var orgid = porgid ? porgid : $('#selorgs').val();207 var users;208 209 // 優先する組織に所属しているメンバーを取得する210 return garoon.api('/api/v1/base/organizations/' + orgid + '/users', 'GET', {}).then(function(res) {211 var aryquery = [],212 aryurl = [];213 users = res.data.users;214 215 if (users.length < 1) {216 return null;217 }218 219 // スケジュールのソート指定: 開始時刻の昇順220 aryquery.push('orderBy=start asc');221 // スケジュールを検索する日時の範囲：開始時間(現在の時刻)222 aryquery.push('rangeStart=' + moment().utc().format('YYYY-MM-DDTHH:mm:ss') + 'Z');223 // スケジュールを検索する日時の範囲：終了時間(東京時間で翌日朝5時)224 aryquery.push('rangeEnd=' + moment().format('YYYY-MM-DD') + 'T20:00:00Z');225 // スケジュールの検索対象：ユーザー226 aryquery.push('targetType=user');227 // スケジュールを検索するユーザーの id228 aryquery.push('target=');229 230 var queryhead = aryquery.join('&');231 232 // 所属メンバーのスケジュールを取得する233 for (var i = 0; i < users.length; i += 1) {234 aryurl.push('/api/v1/schedule/events?' + queryhead + users[i].id);235 }236 // 人数分のスケジュールを一括で取得する237 return fetchDatas(aryurl);238 }).then(function(resusers) {239 // 行動掲示板を作成する240 return makeOutBoard(users, resusers);241 });242 }243 244 // 処理開始245 function init() {246 $('#divbody').append('<div id="divschtop"><select id="selorgs"></select></div>');247 // 組織選択セレクトボックスの値が変わったら、選択した組織でスケジュールを表示248 $('#selorgs').change(function() {249 getScheduleData($('#selorgs').val());250 });251 // 更新ボタンがおされたら、スケジュールデータの再読み込みを行う252 $('.schedule_board_update_button_base_grn').click(function() {253 getScheduleData($('#selorgs').val());254 });255 // 組織情報を取得する256 return garoon.api('/api/v1/base/organizations', 'GET', {}).then(function(resorgs) {257 // 組織情報258 var orgs = resorgs.data.organizations;259 // 組織の登録がない場合260 if (!orgs || orgs.length === 0) {261 throw new Error('組織が登録されていません');262 }263 // 組織セレクトボックスのオプション264 var compopt = _.template('<option value="<%- orgid %>"><%- orgname %></option>');265 // 組織選択セレクトボックスに組織をセットする266 for (var i = 0; i < orgs.length; i += 1) {267 $('#selorgs').append(compopt({'orgid': orgs[i].id, 'orgname': orgs[i].name}));268 }269 270 // ログインユーザーの情報を取得する271 return getBaseGetUsersById();272 273 }).then(function(resUsers) {274 // 優先する組織の id を取得する275 // 優先する組織がない場合は、組織リストボックスの一番上の組織とする276 var porg = $(resUsers).find('user').attr('primary_organization') ||277 $('#selorgs option')[0].value;278 279 // 組織選択リストボックスを、表示する組織が選択された状態にする280 $('#selorgs').val(porg);281 282 // スケジュールデータを取得する283 return getScheduleData(porg);284 285 }).then(function(resresult) {286 287 // 処理がすべて終わってから、予定表を表示する288 $('.schedule_board_grn').css('display', 'block');289 290 }).catch(function(err) {291 292 alert(err);293 294 });295 }296 297 init();298 299})(jQuery.noConflict(true));

補足情報

https://cybozu.dev/ja/common/docs/user-api/overview/data-structure/
でsortOrderに表示優先度の数値が入っているようでしたので
order byで並べ替えできないかと思い色々と調べ試しましたが、
的外れなコードになっているようで動きません…。
知識が無く、どこにどのように組み合わせれば良いかわかないため、
記載箇所、コードを教えていただきたいです。