ポータルに表示する内容を組織によって出し分けよう！~ kintoneのポータルカスタマイズ紹介#2 ~ – cybozu developer network

はじめに

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

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

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

見る人の所属組織によってポータルの内容を出しわける

使い方

こちらの記事は「Kintone Portal Designer」を使う前提でお話しいたします。
「Kintone Portal Designer」の使い方については、 Kintone Portal Designerの使い方を解説した記事を参照してください。

STEP1 ポータルに表示する内容を管理するアプリの作成

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

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

※あとで必要になるので、各フィールドのフィールドコードをメモしておきましょう。

次に、1つレコードを登録しておきましょう。

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

※レコードが登録されていないとエラーになります。

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

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

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

アプリの使い方

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

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

STEP2 カスタマイズに必要なファイルのダウンロード

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

OrganizationSwitcher.zip

STEP3 カスタマイズの変更

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

インポートの方法がわからない場合は、 Kintone Portal Designerの使い方を解説した記事を参照してください。
ここからは、「Kintone Portal Designer」を使いながら、メモした内容に合わせて、JavaScriptの内容を変更します。

1. アプリIDを指定

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

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

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

3. フィールドコードの指定

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

STEP4 表示の確認

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

お知らせというウィジェットの中に「Hello kintone」と表示されている

STEP5 優先する組織に指定されたレコードの内容が表示されるかを確認する

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

お知らせというウィジェットの中が「Hello kintone」から「My Team Portal」に変わっている

コードの解説

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

1.自分の優先する組織が含まれるレコードを取得

kintone REST APIのレコードの一括取得（クエリで条件を指定）を使用しています。

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

「'query': ORGANIZATION_CODE + ' in (PRIMARY_ORGANIZATION()) limit 1'」の部分で、組織選択フィールドに優先する組織（太文字部分）が含まれるレコードを一つだけ取得しています。

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

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

2.リッチエディターの内容をポータルに表示

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

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

実行とエラー

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

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

おわりに

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

このTipsは、2019年10月版 kintoneで確認したものになります。