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

5962 ワード
CSS JavaScript yellowfin CSS テキストリンク

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

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

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

htmlタブ.html
<html>

<head>
    <meta charset="utf-8" />
    <style type="text/css" id="style0"></style>
</head>
<script type="text/javascript" src="http://localhost:8940/JsAPI/v3"></script>

<body>
    <div id="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;
                let filter = dashboard.filters.getFilter('Region');
                let uuid = filter.uuid;
                console.log("フィルターUUID : " + uuid);

            });
        });
    </script>
</body>
</html>

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

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

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

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

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

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