Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8833

HTMLで埋め込んだYellowfinのJSAPI3で効かせたフィルターを表示させない方法

$
0
0

どのような時に使われるか

主に、ログインした人によってあらかじめフィルターを絞った状態で表示させたいが、フィルターの内容は表示させたくないといった状況です。
その人の所属してる店舗の情報のみ表示したい・・など。こういったものはYellowfinの機能の一つであるアクセスフィルターを使って製品保証された状態で使うのが普通だと思うのですが、どうしてもという場合にこういう方法があるかなという提案です。(もちろん非公式です!)

まずフィルターであらかじめ絞った状態でダッシュボードを表示させる

image.png

htmlタブ.html
<html><head><metacharset="utf-8"/><style type="text/css"id="style0"></style></head><script type="text/javascript"src="http://localhost:8940/JsAPI/v3"></script><body><divid="dashboard"></div><script>window.yellowfin.init().then(()=>{window.yellowfin.loadDashboard({dashboardUUID:'82b33f61-7ce9-4e83-b26a-425520124d49',element:'div#dashboard',filterValues:[{filterId:'Region',valueList:['Asia']//人によってvalueの内容を変える}],showGlobalContentContainer:true,//左側のフィルター表示showFilters:false//上のバーのフィルターボタン表示}).then(dashboard=>{console.log(dashboard);window.dashboard=dashboard;letfilter=dashboard.filters.getFilter('Region');letuuid=filter.uuid;console.log("フィルターUUID : "+uuid);});});</script></body></html>

どうやってフィルターを非表示にするか

Yellowfinのフィルターは、ダッシュボードを更新するとUUIDが変わってしまうので注意が必要です。これに合わせて指定するフィルター部分のIDも変化するため、ダッシュボードを更新するたびにCSSタブも変更しないといけないです。

具体的にはこのように確認設定します。Yellowfinのダッシュボード編集画面で消したいフィルターのIdを確認します。
image.png

これをCSSタブで非表示にします。
image.png

これでYellowfin埋め込み時でも非表示にできます。

もう一度いいますが、基本はアクセスフィルターを使っ他方がいいと思います!フィルターのIDもダッシュボードを更新すると変わっちゃうので・・・
image.png


Viewing all articles
Browse latest Browse all 8833

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>