カテゴリー内の他の記事

Garoon ポータルテンプレート:kintone グラフ表示(HTML)

Index

はじめに

このページでは、ポータルテンプレートをご利用環境に合わせて、文言や表示する kintone のグラフを変更する方法を説明します。
その他のテンプレートは、HTML ポータルテンプレートギャラリーをご覧ください。

テンプレートを使ってポータルを追加する手順は、Garoon ヘルプサイトをご確認ください。

動作環境と注意事項

  • テンプレートを使ってポータルを追加する機能は、クラウド版 Garoon の環境が必要です。
  • HTML を編集するときの注意点は、Garoon ヘルプサイトをご覧ください。
  • カスタマイズに関する技術的なサポート等は行っておりません。また、カスタマイズを行ったポートレットについては、その動作を保証するものではありません。

カスタマイズ

変更できる箇所

このテンプレートでは、Garoon のポータルに表示する kintone のグラフ、kintone アプリがリンク先となるアプリの名前、グラフの概要を変更できます。

cap01.png

操作手順

  1. ポータルの一覧画面から、テンプレートから追加したポータルを表示します。
  2. ポータルに設置されたポートレットの歯車マークから「HTMLポートレットの編集」をクリックします。HTMLポートレットの変更画面が表示されます。
  3. 「ポートレットの内容」を編集します。編集する箇所については、書き換えポイントをご参照ください。
  4. 編集が終わったら、[変更する]ボタンをクリックします。

書き換えポイント

表示する kintone のグラフを変更する

  1. kintone にアクセスし、表示したい kintone グラフの URL から、kintone のアプリ ID とグラフのレポート ID を確認します。
    cap02.png
  2. Garoon にアクセスし、「ポートレットの内容」からdisplayKintoneChart.appIddisplayKintoneChart.reportIdを探します。
  3. displayKintoneChart.appIdの値を、手順1で確認したアプリ ID に差し替えます。値は「"(ダブルクォーテーション)」で囲みます。
  4. displayKintoneChart.reportIdの値を、手順1で確認したレポート ID に差し替えます。値は「"(ダブルクォーテーション)」で囲みます。

kintone のアプリの名前を変更する

  1. 「ポートレットの内容」からdisplayKintoneChart.appNameを探します。
  2. displayKintoneChart.appNameの値を、表示したい名前に差し替えます。値は「"(ダブルクォーテーション)」で囲みます。

※kintone に設定したアプリの名前と異なる名前を設定することも可能です。

グラフの概要を変更する

  1. 「ポートレットの内容」からdisplayKintoneChart.summaryを探します。
  2. displayKintoneChart.summaryの値を、表示したい概要の文言に差し替えます。値は「"(ダブルクォーテーション)」で囲みます。

おわりに

cybozu developer network では、他にも JavaScript を使って HTML ポートレットをカスタマイズする方法も紹介しています。

このTipsは、2021年9月版 Garoonで確認したものになります。

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

サインインしてコメントを残してください。