Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Sv translation
languageen

This example takes advantage of the Report API. It is used in a dashlet which contains list of reports with specific tag.

Prerequisites

To be able to use this examle, you need to have access to any number of reports with specific tag. See Report Tags for more information. You also need to have a dashboard or need to create a new one.

Steps

  1. Add new Custom content dashlet to your dashboard.
  2. Click on Settings.
  3. Switch to source mode (not rich text mode)! Otherwise the code will break.
  4. Add this code:

    Code Block
    languagejs
    linenumberstrue
     <style type="text/css">
    .dashletNote{
    display:none !important;
    }
    
    /* Change this - id and colors */
         #menuCustom li a:hover,
         #menuCustom li .current {
            color: #0099E9;
            border-left: 3px solid #0099E9;
        }
    
        .dashletMenuContainer {
            position: relative !important;
            top: 0px !important;
        }
        
        .dashletMenuList {
            margin: 0 !important;
            padding: 0 !important;
            list-style-type: none !important;
            font-size: 18px;
        }
        
        .dashletMenuList li {
            margin-bottom: 0px !important;
        }
        
        .dashletMenuList li a {
            text-decoration: none;
            color: grey;
            display: block;
            border-left: 3px solid white;
            padding-left: 10px;
            padding-bottom: 9px;
            padding-top: 9px;
        }
        
        .dashletMenuList li a:visited {
            color: grey;
        }
        
        .dashletMenuList li a:hover,
        .dashletMenuList li .current {
            background-color: #F6F6F6;
        }      
    </style>
    <script>
        $('.dashletMenuContent').parent('div').parent('div').addClass('dashletMenuContainer');
        // change the id (menuCustom)
        $('#menuCustom').empty();
    
        $.ajax({
            // change the name of the tag
            url: "/bi/report/api:list/tags:nameoftag",
            success: function(reply) {
                var sortedReply = reply;
                sortedReply.sort(function(a, b) {
                    var nameA = a.name.toLowerCase(),
                        nameB = b.name.toLowerCase()
                    if (nameA < nameB) //sort string ascending
                        return -1
                    if (nameA > nameB)
                        return 1
                    return 0 //default return value (no sorting)
                });
                $.each(sortedReply, function(index) {
               // change the id (menuCustom)
                    $('#menuCustom').append('<li><a href=' + sortedReply[index].link + '>' + sortedReply[index].name + '</a></li>');
                });
            }
        });
    </script>
    <div class="dashletMenuContent">
    <!--change the id (menuCustom)-->
        <ul class="dashletMenuList" id="menuCustom"></ul>
    </div>
  5. Change the name of tag on line 55 (url: "/bi/report/api:list/tags:nameoftag",).
  6. Optionally you can change colors or the ID menuCustom (all occurrences).
  7. Save the custom content. The result should look like this:
Sv translation
languageja

この例では、レポートのAPIを利用している。これは、特定のタグを使用したレポートのリストが含まれているダッシュレットで使用されている。この例では、Report APIを利用しています。 特定のタグを持つレポートのリストを含むダッシュレットで使用されます。

前提条件

この例を使用できるように、特定のタグを使用したレポートの任意の数にアクセスする必要がある。詳細については、この例を使用するには、特定のタグを持つ任意の数のレポートにアクセスする必要があります。 詳細については、「レポートタグを参照してください。また、ダッシュボードを持つまたは新しいものを作成する必要がある。」を参照してください。 また、ダッシュボードを作成するか、新しいものを作成する必要があります。

ステップ

  1. ダッシュボードに新しいカスタムコンテンツのダッシュレットを追加する。ダッシュボードに新しいカスタムコンテンツのダッシュレットを追加します。

  2. 「設定」をクリックします。「Settings.」をクリックする。
  3. ソースモード(豊富なテキストモードではない)に切り替え!そうしないとコードが破損する。(豊富なテキストモードではない)に切り替え!そうしないとコードが破損します。

  4. このコードを追加するこのコードを追加します

    Code Block
    languagejs
    linenumberstrue
     <style type="text/css">
    .dashletNote{
    display:none !important;
    }
    
    /* Change this - id and colors */
         #menuCustom li a:hover,
         #menuCustom li .current {
            color: #0099E9;
            border-left: 3px solid #0099E9;
        }
    
        .dashletMenuContainer {
            position: relative !important;
            top: 0px !important;
        }
        
        .dashletMenuList {
            margin: 0 !important;
            padding: 0 !important;
            list-style-type: none !important;
            font-size: 18px;
        }
        
        .dashletMenuList li {
            margin-bottom: 0px !important;
        }
        
        .dashletMenuList li a {
            text-decoration: none;
            color: grey;
            display: block;
            border-left: 3px solid white;
            padding-left: 10px;
            padding-bottom: 9px;
            padding-top: 9px;
        }
        
        .dashletMenuList li a:visited {
            color: grey;
        }
        
        .dashletMenuList li a:hover,
        .dashletMenuList li .current {
            background-color: #F6F6F6;
        }      
    </style>
    <script>
        $('.dashletMenuContent').parent('div').parent('div').addClass('dashletMenuContainer');
        // change the id (menuCustom)
        $('#menuCustom').empty();
    
        $.ajax({
            // change the name of the tag
            url: "/bi/report/api:list/tags:nameoftag",
            success: function(reply) {
                var sortedReply = reply;
                sortedReply.sort(function(a, b) {
                    var nameA = a.name.toLowerCase(),
                        nameB = b.name.toLowerCase()
                    if (nameA < nameB) //sort string ascending
                        return -1
                    if (nameA > nameB)
                        return 1
                    return 0 //default return value (no sorting)
                });
                $.each(sortedReply, function(index) {
               // change the id (menuCustom)
                    $('#menuCustom').append('<li><a href=' + sortedReply[index].link + '>' + sortedReply[index].name + '</a></li>');
                });
            }
        });
    </script>
    <div class="dashletMenuContent">
    <!--change the id (menuCustom)-->
        <ul class="dashletMenuList" id="menuCustom"></ul>
    </div>
  5. 55ラインにタグの名前を変更する。55ラインにタグの名前を変更します。(url: "/bi/report/api:list/tags:nameoftag",)

  6. オプションで、色やID menuCustom(すべてのオカレンス)を変更できる。(すべてのオカレンス)を変更できます。

  7. カスタムコンテンツを保存します。結果は次のようになります。カスタムコンテンツを保存する。結果は次のようになる。