Kintone Portal Designer を使ったポータルカスタマイズに関する記事の第 2 弾です！

ポータルの背景画像を kintone のアプリで管理しよう！ ~kintone のポータルカスタマイズ紹介 #1~ は、すでにお読みになりましたか？
まだの方は、ぜひ読んでいただけるとうれしいです。

今回の記事では、優先する組織を判別して、ポータルの内容を出し分けるカスタマイズを紹介したいと思います。
アプリに登録されたリッチエディターの内容をポータルのお知らせ欄に表示します。

こちらの記事は Kintone Portal Designer を使う前提でお話します。
「kintone Portal Designer」の使い方については、 Kintone Portal Designer を使ってポータルをデザインしよう を参照してください。

本カスタマイズを利用する場合、カスタマイズを適用するユーザーに「優先する組織」を設定してください。
「優先する組織」が設定されていない場合、ポータルへ表示する内容を管理するアプリに登録された、いずれかのポータルの内容が表示されます。

まずは、kintone でアプリを作りましょう。
新しくアプリを作成して、以下のフィールドを設置してください。

あとで必要になるので、以下の内容をメモしておきましょう

• 組織選択フィールド
• リッチエディター

次に、1 つレコードを登録しておきましょう。
組織選択フィールドには何も登録せず、リッチエディターに「Hello kintone」と書いて保存しましょう。

あとで必要になるので、以下の内容をメモしておきましょう

• アプリのアプリ ID
• 作成したレコードのレコード番号

URL を見ることでアプリ ID とレコード番号を確認できます。
例：https://{subdomain}.cybozu.com/k/{ アプリID }/show#record={ レコード番号 }

アプリの使い方

• 組織選択フィールド

  組織選択フィールドには、レコードの内容を表示させたい組織を入力します。
  入力された組織が優先する組織に該当する人のみに表示されます。

• リッチエディター

  リッチエディターには、お知らせ欄に表示させたい内容を入力します。
  リッチエディターの内容がそのままお知らせ欄に表示されます。

  

以下の zip ファイルをダウンロードして、解凍してください。

OrganizationSwitcher.zip

解凍した zip ファイルの中にある「OrganizationSwitcher.json」を「kintone Portal Designer」にインポートしましょう。

インポートの方法がわからない場合は、 Kintone Portal Designer を使ってポータルをデザインしよう を参照してください。
ここからは、「kintone Portal Designer」を使いながら、メモした内容に合わせて、JavaScript の内容を変更します。

アプリ ID を指定

以下の部分の「12345」をメモしたアプリ ID に変更しましょう。

1
2

// 管理アプリの指定
const MASTER_APPID = 12345;

優先する組織が含まれるレコードがなかったときに表示するレコードの指定

以下の部分の「1」をメモしたレコード番号に変更しましょう。

1
2

// 優先される組織が含まれるレコードがなかったときに表示するレコードの指定
const DEFAULT_RECORD_NUMBER = 1;

フィールドコードの指定

先ほどメモした、リッチエディターのフィールドコードと、組織選択フィールドのフィールドコードを指定しましょう。

1
2
3
4
5

// お知らせ欄に表示されるリッチエディターのフィールドコード
const RICH_TEXT_EDITOR_CODE = 'リッチエディター';

// 表示させたい組織の入力
const ORGANIZATION_CODE = '組織選択';

ここまで変更できたら「Save」を押して、ポータルに戻ってみましょう。
「Hello kintone」と表示されているはずです。

先ほど登録したアプリに新しく別のレコードを登録しましょう。
組織選択フィールドには、ご自身の優先する組織を入力しましょう。
リッチエディターには「My Team Portal」と入力し、レコードを保存してください。

ポータルに戻ってみましょう。「My Team Portal」と表示されているはずです。

ここからは、詳しく JavaScript の内容について解説していきます。
今回使用したコードは大きく分けて「自分の優先する組織が含まれるレコードを取得」と「リッチエディターの内容をポータルに表示」の 2 つで構成されています。

kintone REST API の 複数のレコードを取得する を使用しています。

API を実行して、レコードが取得できた時は、取得したレコードのリッチエディターの内容を返します。
取得できたレコードが 0 件のときは、DEFAULT_RECORD_NUMBER に設定されたレコードを取得する処理を行います。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

const fetchNoti = function() {
  const params = {
    'app': MASTER_APPID,
    'query': ORGANIZATION_CODE + ' in (PRIMARY_ORGANIZATION()) limit 1',
    'fields': [RICH_TEXT_EDITOR_CODE]
  };

  return kintone.api(kintone.api.url('/k/v1/records', true), 'GET', params).then(function(resp) {
    if (resp.records.length === 0) {
      return fetchDefaultNoti();
    }
    return resp.records[0][RICH_TEXT_EDITOR_CODE].value;
  });
};

'query': ORGANIZATION_CODE + ' in (PRIMARY_ORGANIZATION()) limit 1' の部分を確認してください。
ここでは、組織選択フィールドに優先する組織 PRIMARY_ORGANIZATION() が含まれるレコードをひとつだけ取得しています。

処理を実行するユーザーに「優先する組織」が設定されていない場合、組織 in（PRIMARY_ORGANIZATION（）） の条件は無視され、それ以外の絞り込み条件を満たすすべてのレコードが取得されます。
詳しくは クエリの書き方 の「関数」部分を参照してください。

上記の処理で「取得できたレコードが 0 件」だった時に実行される処理はこちらです。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

const fetchDefaultNoti = function() {
  const defaultParams = {
    'app': MASTER_APPID,
    'id': DEFAULT_RECORD_NUMBER
  };

  return kintone.api(kintone.api.url('/k/v1/record', true), 'GET', defaultParams).then(function(resp) {
    return resp.record[RICH_TEXT_EDITOR_CODE].value;
  });
};

DEFAULT_RECORD_NUMBER に登録されているレコードのリッチエディターの内容を返します。

以下の部分で、1 で得られたリッチエディターの内容を表示する場所を取得しています。
今回は HTML に ID を追加し、その ID を使って、表示する場所を取得しています。

1
2
3
4

// 表示される場所のIDを指定
const NOTI_AREA_ID = 'noti_area';

const notiElArea = document.getElementById(NOTI_AREA_ID);

リッチエディターの value には style が書かれた html が格納されているので、その html をそのまま表示させています。

1
2
3

const renderNotiContent = function(content) {
  notiElArea.innerHTML = content;
};

最後の行で、今までのコードを実行しています。

1

fetchNoti().then(renderNotiContent).catch(errorMessage);

どこかでエラーが出た時は、以下の処理が実行されます。

1
2
3
4

const errorMessage = function(error) {
  const notiDate = error.message;
  alert('ポータルでの処理でエラーが発生しました。\nポータルの管理者にお問い合わせください。\n\nエラーの内容\n' + notiDate);
};

今後も、kintone のポータルのカスタマイズに関する記事を発信していく予定です。
ぜひ楽しみにお待ちください。

この Tips は、2019 年 10 月版 kintone で動作を確認しています。