はじめに
「Kintone Portal Designer」を使ったポータルカスタマイズに関する記事の第2弾です!
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 ファイルをダウンロードして、解凍してください。
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」と表示されているはずです。
STEP5 優先する組織に指定されたレコードの内容が表示されるかを確認する
先ほど登録したアプリに新しく別のレコードを登録しましょう。
組織選択フィールドには、ご自身の優先する組織を入力しましょう。
リッチエディターには「My Team Portal」と入力し、レコードを保存してください。
ポータルに戻ってみましょう。「My Team Portal」と表示されているはずです。
コードの解説
ここからは、詳しくJavaScriptの内容について解説していきます。
今回使用したコードは大きく分けて「自分の優先する組織が含まれるレコードを取得」と「リッチエディターの内容をポータルに表示」の2つで構成されています。
1.自分の優先する組織が含まれるレコードを取得
kintone REST APIのレコードの一括取得(クエリで条件を指定)を使用しています。
APIを実行して、レコードが取得できた時は、取得したレコードのリッチエディターの内容を返します。
取得できたレコードが0件の時は、DEFAULT_RECORD_NUMBERに設定されたレコードを取得する処理を行います。
「'query': ORGANIZATION_CODE + ' in (PRIMARY_ORGANIZATION()) limit 1'」の部分で、組織選択フィールドに優先する組織(太文字部分)が含まれるレコードを一つだけ取得しています。
処理を実行するユーザーに「優先する組織」が設定されていない場合、「組織 in (PRIMARY_ORGANIZATION())」の条件は無視され、それ以外の絞り込み条件を満たすすべてのレコードが取得されます。
※詳しくは「query」パラメータで利用可能な演算子と関数の「関数」部分をご参照ください。
上記の処理で「取得できたレコードが0件」だった時に実行される処理はこちらです。
DEFAULT_RECORD_NUMBERに登録されているレコードのリッチエディターの内容を返します。
2.リッチエディターの内容をポータルに表示
以下の部分で、1で得られたリッチエディターの内容を表示する場所を取得しています。
今回はHTMLにIDを追加し、そのIDを使って、表示する場所を取得しています。
リッチエディターのvalueにはstyleが書かれたhtmlが格納されているので、そのhtmlをそのまま表示させています。
実行とエラー
最後の行で、今までのコードを実行しています。
どこかでエラーが出た時は、以下の処理が実行されます。
おわりに
今後も、kintoneのポータルのカスタマイズに関する記事を発信していく予定です。
ぜひ楽しみにお待ちください。
このTipsは、2019年10月版 kintoneで確認したものになります。
組織ごとにポータルを変えたいと思っています。とても役に立つ記事をありがとうございました。
この方法で出来たのですが、できれば「お知らせ」部分だけをカスタマイズして、もとの「スペース」や「アプリ」は元のまま右横に表示するようにしたいのですが、どうすればいいでしょうか?
元の「お知らせ」を表示しないようにチェックを外して設定を変えると、カスタマイズしたお知らせが前面の表示され、「スペース」や「アプリ」は全部下に表示されてしまいます。良い方法があれば、教えてください。
わたり 様
お世話になっております。cybozu developer network 運営でございます。
恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
記事から派生した技術的なご質問などはcybozu developer コミュニティをご活用ください。
お手数をおかけいたしますが、どうぞよろしくお願いいたします。