小技シリーズ第3弾 アイコンの活用

小技 アイコンの活用

このシリーズでは、Yellowfinのレポートやダッシュボードをより魅力的なものに作成するための小技集を紹介したいと思います。第3回はアイコンの活用です。

ダッシュボードにグラフや表を配置する際、注目して欲しい部分や操作方法などを併記したいこともありますよね。そんな時に便利な小技を紹介します。

1.新規ダッシュボードの作成

空白のキャンバスレイアウトを選択し、ダッシュボード名「アイコンの有効活用」としてダッシュボードを新規作成します。
          

2.ダッシュボードの編集

画面左の[レポート]メニューから、ダッシュボードに任意のレポートを配置します。
下の例では、前回「小技シリーズ第２弾 リンクURLの有効活用」で作成した都道府県一覧表を配置しています。表上の都道府県コードを選択すると、選択した都道府県に関する外部サイトの情報を閲覧する仕組みになっているのですが、説明文が併記されていないと、利用方法に気が付かない人もいるかと思います。

画面左の [グラフィックス] > [アイコン] の検索ボックスに「info」と入力し改行キーを押下します。

  検索結果から「info-circle」をダッシュボード上に配置します。

アイコンのプロパティ画面から、下記の設定を変更します。
    名前：info
    色：黄色(任意)

画面左の [テキスト] > [段落] をアイコンの右隣に配置します。

配置したテキストボックスに、例えば以下のような文章を入力します。
“該当する都道府県の都道府県コードを選択してください。外部サイトが開き、各都道府県の地域ランキング情報を閲覧することができます。”

テキストボックスのプロパティから、以下の項目を変更します。
    名前：tips
    背景色：白
    内側の余白詳細設定：有効
    内側の余白(上/右/下/左)：10
    影のぼかし：10
    影の色：灰色

3.コードモードの活用

画面上部から、設定モードを[コード]モードに切り替えます。コードモードを使用するためには、コードモードが有効化されており、コードモードを利用するための適切なロールが割り当てられている必要があります。詳細は下記をご確認ください。
https://wiki.yellowfin.co.jp/pages/viewpage.action?pageId=3801108

CSSエディタを開き、下記を追加します。ダッシュボードにアクセスした際、tipsテキストボックスを非表示とし、infoアイコン上にマウスをホバーするとマウスの形状がポインターに変わるように定義しています。

css

[name='tips'] {
Display:none;
}
[name='info']:hover {
cursor:pointer;
}

JS(JavaScript)エディタを開き、1行目以降に以下のコードを入力します。
マウスをinfoアイコンにホバーするとtipsテキストボックスが表示され、アイコンから外れると非表示になるように定義しています。

js

$("[name='info']").hover(function(){
$("[name='tips']").show();
}, function(){
$("[name='tips']").hide();
})

4.公開

ダッシュボードを「公開」します。マウスをアイコン上にホバーすると、テキストボックスが表示されることが確認できます。

簡単なコードと定義を追加することで、動きのある画面を作成できました。
是非参考にしてみてください。
Keep posting handy tips to bring you better yellowfin experiences!