ヘルプで見つからない情報は、サポートにお問い合わせください。お問い合わせ

ダッシュボードの管理：パーツの追加：クイックアクセス

Avatar
サポートセンター

「ダッシュボード」にクイックアクセスを追加します。設定したサイト（「フォルダ」、「テーブル」、「Wiki」、「ダッシュボード」）へのリンクを一覧表示します。

 

■設定方法

全般タブ

show.png

 

項目名 説明
タイトル パーツの名称
タイトルを表示する タイトルを表示させる場合にチェック
サイトID

表示したいサイトID、サイト名、サイトグループ名をカンマ区切りで入力
※入力した順番でダッシュボードに表示します。Shelterのトップ画面を追加する場合は0を入力してください。JSON形式での入力も可能です。
レイアウト クイックアクセスパーツのレイアウトを選択
非同期読み込みしない 非同期読み込みの設定に関わらず非同期読み込みを行わない場合にチェック
非同期読み込みの設定については「ダッシュボードの管理：パーツの追加」を参照してください。
CSS

クイックアクセスパネルの要素にCSSを適用する場合に使用
CSSクラス名を指定することで、各項目に任意のクラス名を指定し、「スタイル」を適用することができます。

 

アクセス制御タブ

show.png 
クイックアクセスに対する参照権限を設定します。 参照権限のないユーザがダッシュボードを開いた場合、このパーツは非表示となります。

 

表示内容

サイトのアイコン

サイトIDで指定したサイトの種類に応じてサイト名の前に自動的にアイコンが表示されます。
後述する「JSON形式によるサイトIDの指定」でアイコンの変更も可能です。

サイト種別 アイコン
フォルダ image
期限付きテーブル image
記録テーブル image
Wiki image
ダッシュボード image

 

レイアウト

レイアウトは縦方向、横方向のいずれかを選択します。

レイアウト 内容
縦方向

サイトを縦に並べて表示します。
パーツ自体の高さを狭くすると縦スクロールバーが表示します。
show.png
横方向

サイトを横に並べて表示します。
パーツ自体の幅を狭くすると折り返して表示します。
show.png

 

JSON形式によるサイトID指定

JSON形式でサイトIDを指定することで、表示サイト毎にアイコンの変更やサイトごとにCSSを指定することができます。

項目名 説明
Id

サイトIDを指定

Urlが設定されていない場合は必須です。Urlが設定されている場合は無視されます。
Url

任意のリンク先をURLで指定

Idが設定されていない場合は必須です。
Icon

サイト名の前に表示するアイコンを設定

指定文字はMaterial Symbols(※1)を参照してください。Iconは省略可能です。省略時は「サイトのアイコン」の内容で表示します。
Css

CSSのクラス名を設定

あらかじめ「CSS」タブにて指定したクラスに対してスタイルを設定してください。Cssは省略可能です。
Title

ボタンのキャプションとして表示する文字列を設定

Titleは省略可能です。省略時はサイトIDを指定した場合はサイト名、Urlを指定した場合はUrlが表示されます。
ViewMode

表示するサイトのViewModeを指定

ViewModeは省略可能です。詳細は下記ViewModeの項目を参照してください。
OpenInNewTab

リンク先を新しいタブで開く場合にtrueを設定

OpenInNewTabは省略可能です。省略時はfalseとなります。

 

ViewMode

ViewModeに指定可能な値は下記のとおりです。

表示 ViewMode
一覧 Index
カレンダー Calendar
クロス集計 Crosstab
ガントチャート Gantt
バーンダウンチャート Burndown
時系列チャート Timeseries
分析チャート Analy
カンバン Kamban
画像ライブラリ Imagelib

 

設定例

・１つのサイトに対しカンバンで開くボタンと、カレンダーで開くボタンを追加する例です。
また、どちらも「新しいタブで開く」設定としています。

＜jsonデータ＞

[
    {
        "Id": 123,
        "Title": "WBS(カンバン)",
        "ViewMode": "Kamban",
        "OpenInNewTab": true
    },
    {
        "Id": 123,
        "Title": "WBS(カレンダー)",
        "ViewMode": "Calendar",
        "OpenInNewTab": true
    }
]

＜表示結果＞
show.png


・サイトIDおよびCSSを以下のように設定した場合の表示結果は下記のとおりです。

＜jsonデータ＞

[
    {
        "Id": 123,
        "Icon": "check_circle",
        "Css": "bgcolorPink"
    },
    {
        "Id": 456,
        "Icon": "check_circle"
    }
    {
        "Id": 789,
        "Css": "bgcolorPink"
    }
]

＜CSS＞

.bgcolorPink {
      background-color: pink;
}

＜表示結果＞

image

 

※1 Material Symbolsからの指定文字検索方法

JSON形式によるサイトIDの指定においてIconに設定する文字は以下手順で確認してください。

  1. Material Symbolsのページを開く （外部リンクに遷移します）image
  2. 利用したいアイコンをクリックする image
  3. 画面右に表示する「Inserting the icon」欄のspanタグに囲まれた文字列をIconに設定する。 image

 

  • はじめてご利用になる方へ
Powered by Zendesk