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

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

■設定方法

全般タブ

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

アクセス制御タブ

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

表示内容

サイトのアイコン

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

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

レイアウト

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

レイアウト	内容
縦方向	サイトを縦に並べて表示します。パーツ自体の高さを狭くすると縦スクロールバーが表示します。
横方向	サイトを横に並べて表示します。パーツ自体の幅を狭くすると折り返して表示します。

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

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

項目名

説明

サイトIDを指定

Icon

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

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

Css

CSSのクラス名を設定

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

設定例

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

＜jsonデータ＞

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

＜CSS＞

.bgcolorPink {
      background-color: pink;
}

＜表示結果＞

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

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

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