Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Version History

« Previous Version 6 Next »

概要

以下の項目では、DashXML とYellowfinコンテンツを使用して開発されたダッシュボードコンテンツのサンプルについて説明しています。使用可能な各ウィジェットタイプ、XML内での設定方法、カスタムCSSを使用したスタイルの適用方法について、取り上げています。

注意：これはあくまで、独自のダッシュボード要求に対応するために、DashXMLフレームワークの使用方法を把握するガイドにすぎません。

主要なXMLウィジェットタイプは、以下の通りに構成されています。

<application-definition>
    <sourcefilter></sourcefilter>
    <dashboard>
        <text></text>
        <exportlist>
            <export><export>
        </exportlist>
        <filter>
            <options>
                <summary><summary>
            </options>
        </filter>
        <report>
            <modal>
                <subcontent></subcontent>
            </modal>
            <filterMap></filterMap>
        </report>
        <modal>
            <subcontent></subcontent>
        </modal>
        <customhtml>
            <replacements></replacements>
        </customhtml>
        <subtab>
            <options>
                <subcontent></subcontent>
                <summary></summary>
            </options>
        <subtab>
    </dashboard>
</application-definition>

すべてのXML構造は、ウィジェットXMLのページで説明されています。

ダッシュボードウィジェット

ダッシュボードウィジェットは、ダッシュボードを製作する際に、各ページのコンテンツを定義するために使用されます。ダッシュボードは、表示、呼び出し、ページ上で使用、の他のすべてのウィジェットを持っています。ダッシュボードには、独自のCSSクラスによってスタイルが適用されたレポートを、必要な数だけ含めることができ、ダッシュボード全体にそのスタイルを適用することもできます。

出力の例

要素の例

 ここをクリックして展開する

<dashboard>

子要素値説明
id1

XML内でタブを特定するために使用するユニークな数字です。この数字は、タブを特定するために、URL内でも使用します。例えば、idが1の場合、URLは以下のようになります。

http://localhost:7171/DashboardPortal/dashboard.jsp?id=1

filter

 タブ上で使用するフィルターの詳細が含まれます。このシナリオでは、ダッシュボードコンテンツを制御する日付フィルターです。より詳細な情報は、日付を参照してください。

exportlist

 ダッシュボード、または個別のレポート上で使用されるすべてのエクスポートボタンの詳細が含まれます。より詳細な情報は、エクスポートボタンウィジェットを参照してください。

report

 タブ上に表示する単一レポートに関する情報が含まれます。より詳細な情報は、グラフを参照してください。

XMLの例

 ここをクリックして展開する
<application-definition>
    <dashboard>
        <id>1</id>
         
        <!-- Year Filters -->
        <filter>
            <sync>true</sync>
            <datatype>DATE</datatype>
            <name>dateFilter</name>
            <operator>BETWEEN</operator>
            <styleClass>topFilter</styleClass>
            <options>
                <title>All Time</title>
                <value>1900-01-01\|2100-01-01</value>
                <defaultOption>true</defaultOption>
            </options>
            <options>
                <title>Year</title>
                <typeCode>PREDEF</typeCode>
                <value>YEARTODATE</value>
            </options>
            <options>
                <title>Month</title>
                <typeCode>PREDEF</typeCode>
                <value>MONTHTODATE</value>
            </options>
            <options>
                <title>Custom</title>
                <prompt>true</prompt>
            </options>
        </filter>    
         
        <!-- Export Buttons (Print, PDF, XLS) -->
        <exportlist>
            <export>
                <styleClass>printExport</styleClass>
                <exporttype>PRINT</exporttype>
            </export>
            <export>
                <styleClass>pdfExport</styleClass>
                <exporttype>PDF</exporttype>
            </export>
        </exportlist>    
             
        <!-- Canvas Chart -->
        <report>
            <display>CHART</display>
            <uuid>898e21f9-5acd-4b03-943c-25feca2c23c2</uuid>
            <styleClass>canvasChart</styleClass>
            <filterMap>
                <filterUUID>071367c9-9cad-46c6-94d8-f4821c61d90e</filterUUID>
                <mapToFilter>dateFilter</mapToFilter>
            </filterMap>
        </report>    
 
    </dashboard>
    <!-- End of the Example -->  
</application-definition>

 

サブタブウィジェット

サブタブウィジェットは、単一のダッシュボード定義内で、コンテンツの異なる項目間を行き来するために使用します。これは、標準的なYellowfinインターフェイス内でサブタブがどのように機能するのか、と同様です。ボタンやドロップダウンリストを使用してタブを切り替えることで、ユーザーはスクリーン上に異なるコンテンツを表示することができます。

出力の例

要素の例

 ここをクリックして展開する

<subtab>

子要素値説明

styleClass

 

コンポーネントにスタイリングを適用するために使用する、CSSクラス名が含まれます。

name

 XML内で参照するためのサブタブの名前です。

options

 サブタブ内で表示されるコンテンツやレポートを定義するためのノードが含まれます。<options> ノードの説明を参照してください。

 

<options>

サブタブ内で使用します。

子要素値説明

title

Booking Stats

サブタブを選択するためのテキストラベルです。（レポートのサブタブセット間を切り替えるために使用します）

description

Email, Phone, and Website

サブタブのサブタブタイトルの下部に表示される説明文です。

icon

<![CDATA[<div class="subtabBookingIcon"></div>]]>

サブタブボタン内のアイコンを含む参照先を含めます。例：

< ! [ CDATA [ < div class = "subtabBookingIcon" > < / div > ] ] >

 

XMLの例

 ここをクリックして展開する
<!-- Start of Sub Tabs -->
<subtab>
    <styleClass>subTabs</styleClass>
    <name>Ski Team</name>
     
    <!-- Booking Stats Tab -->
    <options>
        <prompt>false</prompt>
        <title>Booking Stats</title>
        <description>Email, Phone, and Website</description>
        <icon><![CDATA[<div class="subtabBookingIcon"></div>]]></icon>
        <subcontent>
            <styleClass>subTabOne</styleClass>
            <name>Booking Stats</name>
             
            <!-- Canvas Chart -->
            <report>
                <display>CHART</display>
                <uuid>898e21f9-5acd-4b03-943c-25feca2c23c2</uuid>
                <styleClass>canvasChart</styleClass>
                <filterMap>
                    <filterUUID>071367c9-9cad-46c6-94d8-f4821c61d90e</filterUUID>
                    <mapToFilter>dateFilter</mapToFilter>
                </filterMap>
            </report>    
            <!-- Line Chart -->
            <report>
                <display>CHART</display>
                <title>Athlete Bookings over Time</title>
                <uuid>d1f779fb-7dbf-42e2-8e6a-bc7dc84ae04f</uuid>
                <styleClass>fullWidthChart</styleClass>
                <filterMap>
                    <filterUUID>a0bfc7f6-1550-4f4d-a3c5-031b20c1a942</filterUUID>
                    <mapToFilter>dateFilter</mapToFilter>
                </filterMap>
            </report>                    
        </subcontent>
    </options>
     
    <!-- Athletes Tab -->
    <options>
        <prompt>false</prompt>
        <title>Athletes</title>
        <description>Demographic &amp; Sales</description>
        <icon><![CDATA[<div class="subtabAthletesIcon"></div>]]></icon>
        <subcontent>
            <!-- Content Removed For Simplification -->      
             
        </subcontent>
    </options>
     
    <!-- Ski Camps Tab -->
    <options>
        <prompt>false</prompt>
        <title>Ski Camps</title>
        <description>Stats for each Site</description>
        <icon><![CDATA[<div class="subtabSkiCampsIcon"></div>]]></icon>
        <subcontent>
        <!-- Content Removed For Simplification -->
             
        </subcontent>
    </options>
</subtab>

CSSの例

 ここをクリックして展開する
/* sub tabs */
.subTabs {
    clear: both;
}
/* Sub Tab Button Selectors */
.subTabSelection {
    width: 228px;
    display: table;
    border-collapse: separate;
    table-layout: fixed;
    overflow: hidden;
    position: fixed;
    left: 0px;
    top: 127px;
    border-spacing: 0px 1px;
    background-color: #CCCCCC;
}
.subTabSelection .subTabSelector {
    display: table-row;
    background: #F9F9F9;
    cursor: pointer;
    position: relative;
}
.subTabSelection .subTabMain {
    height: 55px;
    overflow: hidden;
    position: relative;
    padding: 20px 10px;
}
.subTabSelection  .selected {
    background: #FFFFFF;
}
.subTabSelection  .selected  div{
    color: #393737;
}
.subTabSelection .subTabTitle {
    color: #393737;
    font-size: 20px;
    font-family: sourceSansPro, sans-serif;
    padding-left: 55px;
    padding-top: 3px
}
.subTabSelection .subTabDesc{
    color: #393737;
    font-size: 13px;
    line-height: 22px;
    padding-left: 55px;
}
.subTabSelection .subTabSummary {
    color: #393737;
    font-size: 18px;
    font-weight: bold;
}
.subTabSelection .subTabIcon {
    position: absolute;
    top: 20px;
    left: 5px;
    width: 55px;
    text-align: center;
}
.subTabSelection .subtabBookingIcon{
    background-image: url("../images/booking.png");
    height: 55px;
    width: 55px;
}
 
.subTabSelection .subtabAthletesIcon{
    background-image: url("../images/athlete.png");
    height: 55px;
    width: 55px;
}
 
.subTabSelection .subtabSkiCampsIcon{
    background-image: url("../images/camp.png");
    height: 55px;
    width: 55px;
}
.subTabSelector.selected .subtabBookingIcon{
    background-image: url("../images/bookingSelected.png");
    height: 55px;
    width: 55px;
}
 
.subTabSelector.selected .subtabAthletesIcon{
    background-image: url("../images/athleteSelected.png");
    height: 55px;
    width: 55px;
}
 
.subTabSelector.selected .subtabSkiCampsIcon{
    background-image: url("../images/campSelected.png");
    height: 55px;
    width: 55px;
}

テキストウィジェット

ダッシュボードのタイトルは、<text> XMLウィジェットを使用して実装することができます。これを実行するためには単純に、タイトルとして表示するテキストを含める必要があり、このテキストのスタイリングに使用するためのCSSクラス名も必要です。

出力の例

要素の例

 ここをクリックして展開する

 <text>

子要素値説明

styleClass

dashboardTitle

コンポーネントにスタイリングを適用するために使用する、CSSクラス名を含めます。

text

Ski Team Dashboardタイトル、説明、または他の用途として、ダッシュボード上に表示するテキストを含めます。

XMLの例

 ここをクリックして展開する
<!-- Dashboard Title Text -->      
<text>
    <styleClass>dashboardTitle</styleClass>
    <text>Ski Team Dashboard</text>
</text>

CSSの例

 ここをクリックして展開する
.dashboardTitle {
    color: #393737;
    font-size: 40px;
    float: left;
}

エクスポートボタンウィジェット

エクスポートボタンは、<exportlist> XMLウィジェットを使用することで、ダッシュボードやレポートを様々な書式でエクスポートすることができます。ここでは、どのエクスポート書式を使用可能にし、どのレポートをエクスポートするのか定義をする必要があります（XLS形式を使用している場合）。

出力の例

要素の例

 ここをクリックして展開する

<exportlist>

子要素値説明

export

 

ダッシュボードタブ上に表示する、エクスポートボタンを定義するノードを含めます。この例では、印刷、PDF、XLSボタンを表示しています。<filterMap> ノード説明を参照してください。

 

<export> (Print)

子要素値説明

styleClass

printExport

コンポーネントにスタイリングを適用するために使用する、CSSクラス名を含めます。この例では、各ボタンが異なるアイコンを持っているため、エクスポートの種類ごとにユニークなクラス子要素を使用しています。

exporttype

PRINT

ブラウザの印刷機能が、ダッシュボード全体を印刷するために呼び出すように指定しています。

 

<export> (PDF)

子要素値説明

styleClass 

pdfExport

コンポーネントにスタイリングを適用するために使用する、CSSクラス名を含めます。この例では、各ボタンが異なるアイコンを持っているため、エクスポートの種類ごとにユニークなクラスを使用しています。

exporttype 

PDF現在のダッシュボードが、PDF形式でエクスポートするように指定しています。

 

<export> (XLS)

子要素値説明

styleClass 

xlsExport

コンポーネントにスタイリングを適用するために使用する、CSSクラス名を含めます。この例では、各ボタンが異なるアイコンを持っているため、エクスポートの種類ごとにユニークなクラスを使用しています。

exporttype 

XLS単一レポートを、XLS形式でエクスポートするように指定しています。

reportuuid

39f8f49f-124b-4b36-a7f6-2f1ed9724c53XLS形式でエクスポートするレポートのUUIDです。

XMLの例

 ここをクリックして展開する
<!-- Export Buttons (Print, PDF, XLS) -->
<exportlist>
    <export>
        <styleClass>printExport</styleClass>
        <exporttype>PRINT</exporttype>
    </export>
    <export>
        <styleClass>pdfExport</styleClass>
        <exporttype>PDF</exporttype>
    </export>
    <export>
        <styleClass>xlsExport</styleClass>
        <exporttype>XLS</exporttype>
        <reportuuid>39f8f49f-124b-4b36-a7f6-2f1ed9724c53</reportuuid
    </export>
</exportlist>

CSSの例

 ここをクリックして展開する
/* Export Buttons */
.exportList {
    display: table;
    padding: 0px 15px;
    margin: 20px 0px 20px 0px;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 18px;
    color: #364149;
}
.exportLink {
    padding-right: 10px;
    cursor: pointer;
    display: table-cell;
}
.printExport:before {
    content: "\f02f";
}
.pdfExport:before {
    content: "\f1c1";
}
.xlsExport:before {
    content: "\f1c3";
}

フィルターウィジェット

日付

これらは、 <filter> XMLウィジェットを使用して実装することができます。各フィルターウィジェットは、定義されるオプションが最低でも一つ必要であり、ユーザーが適用する値を選択することができます。ここでフィルターを指定する方法には、4つのオプションがあります。カスタム、年、月、すべての時間です。年、月、すべての時間フィルターは、事前に定義された日付範囲を使用して設定されており、一方カスタムオプションは、ユーザーがカスタム範囲を特定できるようにするために、ユーザープロンプトとして特定されています。

出力の例

要素の例

 ここをクリックして展開する

<filter>

子要素値説明

sync

true

この設定をtrueにすると、このフィルターの値を他のダッシュボードに渡すことを許可することになります。

datatype

DATE

フィルターオプションを適用するために、日付タイプを返す必要がある、ということを指定しています。

name

dateFilter

値を受け取るレポート上で使用する<filterMap> ノードを識別するために使用しているフィルターの名前を含めます。

operator

BETWEEN

フィルターの演算子を指定します。これは、フィルターの値を渡したいレポート内で使用されている演算子と互換性がなければなりません。

BETWEENは、2つの値が想定されています。このオプションは、「〜の間」や「〜の間でない」に限らず、レポートに定義された演算子を使用する必要があります。

styleClass

topFilter

コンポーネントにスタイリングを適用するために使用する、CSSクラス名を含めます。

options

 コンテンツの表示と、考え得る値を定義するためのノードを含めます。ユーザーに表示される各オプションは、独自の<option>ノードを持つ必要があります。この例では、年、月、カスタムオプションを使用しています。<options>ノードの説明を参照してください。

 

<options> (Custom)

子要素値説明

title

Custom

フィルターに表示するラベルです。表示するテキスト名に適用されます。

prompt

true

このオプションを指定することで、ユーザーが値を入力できるようにします。事前に定義された値は持ちません。この例では、プロンプトを使用しているので、<value> ノードのために値を提供する必要はありません。フィルターが日付として定義されているため、ユーザーには日付選択カレンダーが表示されます。（これには、CSSを使用してスタイルを適用することができます）

 

<options> (Year)

子要素値説明

title

Year

フィルターに表示するラベルです。表示するテキスト名に適用されます。

typecode

PREDEF 

このオプションには、定義された日付範囲で、あらかじめ定義された値をフィルターに使用することを定義します。それから、<value> ノード内で、どの定義を使用するのか特定する必要があります。

value

YEARTODATE 

YEARTODATEは、現在の年の最初の日付から、現在の日付、という事前に定義された日付範囲を使用します。

 

<options> (Month)

子要素値説明

title

Month

フィルターに表示するラベルです。表示するテキスト名に適用されます。

typecode

PREDEF 

このオプションには、定義された日付範囲で、あらかじめ定義された値をフィルターに使用することを定義します。それから、<value> ノード内で、どの定義を使用するのか特定する必要があります。

value

MONTHTODATEMONTHTODATEは、現在の月の最初の日付から、現在の日付という事前に定義された日付範囲を使用します。

 

<options> (All Time)

子要素値説明

title

All Time

フィルターに表示するラベルです。表示するテキスト名に適用されます。

value

1900-01-01\|2100-01-01 ここでは、データセット内のすべてのデータを効果的に包括するために、日付範囲の設定を1900年1月1日から2100年1月1日までにとして定義しています。

defaultOption

true

ダッシュボードのデフォルト選択のオプションを指定します。デフォルトととして設定することができるのは、ひとつの<option> ノードのみで、残りはfalseにするか、このノードを省略します。

 

XMLの例

 ここをクリックして展開する
<!-- Year Filters -->
<filter>
    <sync>true</sync>
    <datatype>DATE</datatype>
    <name>dateFilter</name>
    <operator>BETWEEN</operator>
    <styleClass>topFilter</styleClass>
    <options>
        <title>All Time</title>
        <value>1900-01-01\|2100-01-01</value>
        <defaultOption>true</defaultOption>
    </options>
    <options>
        <title>Year</title>
        <typeCode>PREDEF</typeCode>
        <value>YEARTODATE</value>
    </options>
    <options>
        <title>Month</title>
        <typeCode>PREDEF</typeCode>
        <value>MONTHTODATE</value>
    </options>
    <options>
        <title>Custom</title>
        <prompt>true</prompt>
    </options>
</filter>

CSSの例

 ここをクリックして展開する
* Date Filters */
.topFilter {
    height: 24px;
    line-height: 24px;
    padding-top: 14px;
}
 
.topFilter .filterOption {
    text-align: center;
    float: right;
    color: #393737;
    cursor: pointer;
    width: 70px;
    margin-left: 5px;
    font-weight: bold;
}
 
.topFilter .selected {
    background-color: #393737;
    color: #FFFFFF;
}
 
.topFilter .filterOption .customEntry {
    background-color : #393737;
    color: #FFFFFF;
    position: absolute;
    overflow: hidden;
    z-index: 100;
    margin-top: 5px;
    width: 115px;
}
 
.topFilter .filterOption .customEntry  input{
    background-color : #FFFFFF;
    border: 0px;
    font-family: sourceSansPro, sans-serif;
    font-size: 14px;
    color: #393737;
    height: 24px;
    width: 70px;
    line-height: 24px;
    margin: 12px 12px 0px 12px;
    padding: 0px 10px;
    text-align: center;
}
 
 
/* Date Entry */
.submitCustom {
    float: left;
    line-height: normal;
    margin: 10px 3px 10px 12px;
}
 
.cancelCustom {
    float: right;
    line-height: normal;
    margin: 10px 12px 10px 3px;
}
 
/* Date Picker */
.ui-datepicker {
    background-color : #FFFFFF;
    border: 1px solid #393737;
    color: #393737;
    font-family: sourceSansPro, sans-serif;
    font-size: 14px;
    margin-top: 5px;
}
 
.ui-datepicker a{
    color: #393737;
}
 
.ui-datepicker .ui-datepicker-prev {
    left: 10px;
    top: 6px;
}
 
.ui-datepicker .ui-datepicker-next {
    right: 10px;
    top: 6px;
}
 
.ui-datepicker .ui-datepicker-prev:before {
    content: "\f104";
    color: #393737;
    display: inline-flex;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 18px;
    cursor: pointer;
}
 
.ui-datepicker .ui-datepicker-next:before {
    content: "\f105";
    color: #393737;
    display: inline-flex;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 18px;
    cursor: pointer;
}
 
.ui-datepicker .ui-datepicker-prev-hover:before {
    content: "\f104";
    color: #393737;
    display: inline-flex;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 18px;
    cursor: pointer;
}
.ui-datepicker .ui-datepicker-next-hover:before {
    content: "\f105";
    color: #393737;
    display: inline-flex;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 18px;
    cursor: pointer;
    text-align: right;
}
 
.ui-datepicker .ui-datepicker-prev-hover {
    left: 10px;
    top: 6px;
}
 
.ui-datepicker .ui-datepicker-next {
    text-align: right;
}
 
.ui-datepicker .ui-datepicker-next-hover {
    right: 10px;
    top: 6px;
    text-align: right;
}

ボタン

フィルターウィジェットは、ユーザーが選択可能なフィルターの値を表示するために使用するオプションです。各オプションには、タイトル、説明、アイコン、集計値を表示することができ、タイトル以外の表示は任意です。

出力の例

要素の例

 ここをクリックして展開する

<report>

子要素値説明

display

HIDDEN

HIDDENを使用することで、レポートの結果を表形式ではなく、ページの他のコンポーネントとして使用することができます。この例では、レポートはフィルターオプションの一覧を返す二重のカラム（列）のレポートであり、集計値と一致します。

uuid

73f732e8-7961-4925-9319-740dc4991de8

レポートを呼び出すためのYellowfin UUIDを含めます。

name

skiTeamFilterList

この名前は、XMLの他の場所で使用するレポート名です。<summary>ノードでは、レポートをUUIDではなく、この名前で呼び出していますが、どちらでも機能します。

filterMap

 

ダッシュボードタブ上の他の場所から、レポートに渡す必要のあるすべてのフィルターを定義するノードを含めます。<filterMap> ノードの説明を参照してください。

 

<filterMap>

子要素値説明

filterUUID

73f732e8-7961-4925-9319-740dc4991de8

<mapToFilter> の値を受け取る非表示レポート内のフィルターのUUIDです。この例では、Position Improvementのレポートに適用される日付フィルターです。

mapToFilter

skiTeamFilter

ダッシュボードタブ上の他の場所に適用されるフィルターの名前です。この例では、skiTeamFilterのフィルターとリンクを作成しています。

 

<filter>

子要素値説明

sync

true

この設定をtrueにすると、このフィルターの値を他のダッシュボードに渡すことを許可することになります。

datatype

TEXT

フィルターオプションを適用するために、テキストタイプを返す必要がある、ということを指定しています。

name

skiTeamFilter

値を受け取るレポート上で使用する<filterMap> ノードを識別するために使用しているフィルターの名前を含めます。

operator

EQUAL

フィルターの演算子を指定します。フィルターの値を渡したいレポートで使用されている演算子と互換性がなければなりません。EQUALは、1つの値のみ想定されています。このオプションは、「等しい」や「より大きい」「より小さい」「を含む」「を含まない」などに限らず、レポートに定義された演算子を使用する必要があります。

styleClass

quickStatFilterコンポーネントにスタイリングを適用するために使用する、CSSクラス名を含めます。

options

 コンテンツの表示と、考え得る値を定義するためのノードを含めます。ユーザーに表示される各オプションは、独自の<option>ノードを持つ必要があります。この例では、予約統計情報、顧客、スキーツアーオプションを使用しています。<options> ノード説明を参照してください。

 

<options> (Booking Stats)

子要素値説明

title

Booking Stats

フィルターに表示するラベルです。表示するテキスト名に適用されます。

description

Email, Phone, and Website

フィルター上に表示する説明用のラベルです。この表示は、任意です。

summary

 フィルターボタン上に集計値として表示させるために、レポートから値を取得する方法を指定します。<summary> ノードの説明を参照してください。

icon

<![CDATA[<div class="filterIconBooking"></div>]]>フィルターボタン上に指定のアイコンを表示するために要求されるHTMLを含めます。

value

Booking

フィルターの値を指定します。

defaultOption

false

ダッシュボードのデフォルト選択のオプションを指定します。デフォルトととして設定することができるのは、ひとつの <option> ノードのみで、残りはfalseにするか、このノードを省略します。

 

<summary> (Booking Stats)

子要素値説明

reportId

skiTeamFilterList

取得した集計値を表示するために使用するレポートが、XMLのどこに含まれているかを指定します。この例では、レポートはフィルターオプションの一覧を返す二重のカラム（列）レポートであり、集計値と一致します。

matchColumn

0表形式のレポートの列の配置番号です。行を特定するために値を一致させる必要があります。ここでは、カラムに説明ラベルが含まれているカラムが、レポートの最初のカラムであるということと、ゼロからカウントしているので、0を指定しています。

matchValue

Booking

行を特定するために<matchColumn>カラムで検索する値を指定します。ここでは、Bookingを指定しています。

valueColumn

1<matchColumn> と<matchValue> ノードを使用して配置されている行から、データを取得したい列を指定します。この値は0から始まります。この例では、数値のカラムはレポート内で2番目になるので、1を使用します。

 

<options> (Athletes)

子要素値説明

title

Athletes

フィルター上に表示するラベルです。表示するテキスト名に適用されます。

description

Demographic & Sales

フィルター上に表示する説明用のラベルです。この表示は、任意です。

summary

 フィルターボタン上に集計値として表示させるために、レポートから値を取得する方法を指定します。<summary> ノードの説明を参照してください。

icon

<![CDATA[<div class="filterIconAthletes"></div>]]>フィルターボタン上に指定のアイコンを表示するために要求されるHTMLを含めます。

value

Athletes

フィルターの値を指定します。

defaultOption

False

ダッシュボードのデフォルト選択のオプションを指定します。デフォルトととして設定することができるのは、ひとつの <option> ノードのみで、残りはfalseにするか、このノードを省略します。

 

<summary> (Athletes)

子要素値説明

reportId

skiTeamFilterList

取得した集計値を表示するために使用するレポートが、XMLのどこに含まれているかを指定します。この例では、レポートはフィルターオプションの一覧を返す二重のカラム（列）レポートであり、集計値と一致します。

matchColumn

0表形式のレポートの列の配置番号です。行を特定するために値を一致させる必要があります。ここでは、カラムに説明ラベルが含まれているカラムが、レポートの最初のカラムであるということと、ゼロからカウントしているので、0を指定しています。

matchValue

Athletes

行を特定するために<matchColumn>カラムで検索する値を指定します。ここでは、Athletesを指定しています。

valueColumn

1<matchColumn> と<matchValue> ノードを使用して配置されている行から、データを取得したい列を指定します。この値は0から始まります。この例では、数値のカラムはレポート内で2番目になるので、1を使用します。

 

<options> (Ski Camps)

子要素値説明

title

Ski Camps

フィルター上に表示するラベルです。表示するテキスト名に適用されます。

description

Stats for each Site

フィルター上に表示する説明用のラベルです。この表示は、任意です。

summary

 フィルターボタン上に集計値として表示させるために、レポートから値を取得する方法を指定します。<summary> ノードの説明を参照してください。

icon

<![CDATA[<div class="filterIconCamps"></div>]]>フィルターボタン上に指定のアイコンを表示するために要求されるHTMLを含めます。

value

Camps

フィルターの値を指定します。

defaultOption

true

ダッシュボードのデフォルト選択のオプションを指定します。デフォルトととして設定することができるのは、ひとつの <option> ノードのみで、残りはfalseにするか、このノードを省略します。

 

<summary> (Camps)

子要素値説明

reportId

skiTeamFilterList

取得した集計値を表示するために使用するレポートが、XMLのどこに含まれているかを指定します。この例では、レポートはフィルターオプションの一覧を返す二重のカラム（列）レポートであり、集計値と一致します。

matchColumn

0表形式のレポートの列の配置番号です。行を特定するために値を一致させる必要があります。ここでは、カラムに説明ラベルが含まれているカラムが、レポートの最初のカラムであるということと、ゼロからカウントしているので、0を指定しています。

matchValue

Camps

行を特定するために<matchColumn>カラムで検索する値を指定します。ここでは、Campsを指定しています。

valueColumn

1<matchColumn> と<matchValue> ノードを使用して配置されている行から、データを取得したい列を指定します。この値は0から始まります。この例では、数値のカラムはレポート内で2番目になるので、1を使用します。

XMLの例

 ここをクリックして展開する
<!-- Ski Team Filter List Summary Report -->
<report>
    <display>HIDDEN</display>
    <uuid>73f732e8-7961-4925-9319-740dc4991de8</uuid>
    <name>skiTeamFilterList</name>
    <filterMap>
        <filterUUID>682f856b-09b8-49d8-bf33-6e9bba9d895a</filterUUID>
        <mapToFilter>skiTeamFilter</mapToFilter>
    </filterMap>
</report>
     
<!-- Ski Team Filters -->
<filter>
    <sync>true</sync>
    <datatype>TEXT</datatype>
    <name>skiTeamFilter</name>
    <operator>EQUAL</operator>
    <styleClass>quickStatFilter</styleClass>
    <options>
        <title>Booking Stats</title>
        <description>Email, Phone, and Website</description>
        <summary>
            <reportId>skiTeamFilterList</reportId>
            <matchColumn>0</matchColumn>
            <matchValue>Booking</matchValue>
            <valueColumn>1</valueColumn>
        </summary>
        <icon><![CDATA[<div class="filterIconBooking"></div>]]></icon>
        <value>Booking</value>
        <defaultOption>false</defaultOption>
    </options>
    <options>
        <title>Athletes</title>
        <description>Demographic & Sales</description>
        <summary>
            <reportId>skiTeamFilterList</reportId>
            <matchColumn>0</matchColumn>
            <matchValue>Athletes</matchValue>
            <valueColumn>1</valueColumn>           
        </summary>
        <icon><![CDATA[<div class="filterIconAthletes"></div>]]></icon>
        <value>Athletes</value>
        <defaultOption>false</defaultOption>
    </options>
    <options>
        <title>Ski Camps</title>
        <description>Stats for each Site</description>
        <summary>
            <reportId>skiTeamFilterList</reportId>
            <matchColumn>0</matchColumn>
            <matchValue>Camps</matchValue>
            <valueColumn>1</valueColumn>           
        </summary>
        <icon><![CDATA[<div class="filterIconCamps"></div>]]></icon>
        <value>Camps</value
        <defaultOption>true</defaultOption>
    </options>     
</filter>

CSSの例

 ここをクリックして展開する
.quickStatFilter {
    width: 100%;
    display: table;
    border-collapse: separate;
    border-spacing: 15px 0px;
    z-index: 1000;
}
.quickStatFilter .filterOption {
    display: table-cell;
    background: #EDECED;
    padding: 10px;
    text-align: left;
    cursor: pointer;
    table-layout: fixed;
    overflow: hidden;
}
.quickStatFilter .filterOptionMain {
    width: 100%;
    height: 80px;
    overflow: hidden;
    position: relative;
}
.quickStatFilter .filterTitle {
    color: #4C5965;
    font-size: 16px;
    z-index: 1000;
    font-weight: bold;
}
.quickStatFilter .filterDesc {
    color: #909FAC;
    font-size: 12px;
    margin-top: 2px;
}
.quickStatFilter .filterOptionSummary {
    color: #4C5965;
    font-size: 18px;
    position: absolute;
    font-weight: bold;
    margin-top: 15px;
}
.quickStatFilter .filterIcon {
    position: relative;
    float: right;
    bottom: 30px;
    color: #D3D1D3;
}
.quickStatFilter .filterIconBooking {
    background-image: url("../images/booking.png");
}
.quickStatFilter .filterIconAthletes {
    background-image: url("../images/athlete.png");
}
.quickStatFilter .filterIconCamps {
    background-image: url("../images/camp.png");
}
.quickStatFilter  .selected {
    background: #477DB3;
}
.quickStatFilter  .selected  div{
    color: #FFFFFF;
}
.selected .quickStatFilter .filterIconBooking {
    background-image: url("../images/booking.png");
}
.selected .quickStatFilter .filterIconAthletes {
    background-image: url("../images/athlete.png");
}
.selected .quickStatFilter .filterIconCamps {
    background-image: url("../images/camp.png");
}

 

レポートウィジェット

グラフ

レポートとビジュアライゼーションは、<report> XMLウィジェットを使用して表示することができます。これは、要求されるレポートを呼び出し、書式とスタイリングを指定し、すべてのフィルターに渡す必要があります。

出力の例

要素の例

 ここをクリックして展開する

<report>

子要素値説明

display

CHART

CHARTは、Yellowfin内で定義されたレポートの結果を、グラフとして表示することができます。この例は、線グラフのレポートです。

title

Athlete Bookings over Time

ダッシュボードタブ上のグラフ上部に表示される、レポートのタイトルです。
uuidd1f779fb-7dbf-42e2-8e6a-bc7dc84ae04fレポートを呼び出すためのYellowfin UUIDを含めます。

styleClass

fullWidthChart

コンポーネントにスタイリングを適用するために使用する、CSSクラス名を含めます。

filterMap

 ダッシュボードタブ上の他の場所から、レポートに渡す必要のあるすべてのフィルターを定義するノードを含めます。この例では、タブから主要な日付フィルターをレポートに渡しています（dateFilter）。<filterMap>ノードの説明を参照してください。

 

<filterMap>

子要素値説明

filterUUID

a0bfc7f6-1550-4f4d-a3c5-031b20c1a942<mapToFilter> 値を受け取る非表示レポートのフィルターのUUIDです。

mapToFilter

dateFilter

ダッシュボードタブ上の他の場所へ適用するフィルターの名前です。この例では、dateFilterとリンクを作成しています。

XMLの例

 ここをクリックして展開する
<!-- Line Chart -->
<report>
    <display>CHART</display>
    <title>Athlete Bookings over Time</title>
    <uuid>d1f779fb-7dbf-42e2-8e6a-bc7dc84ae04f</uuid>
    <styleClass>fullWidthChart</styleClass>
    <filterMap>
        <filterUUID>a0bfc7f6-1550-4f4d-a3c5-031b20c1a942</filterUUID>
        <mapToFilter>dateFilter</mapToFilter>
    </filterMap>
</report>

CSSの例

 ここをクリックして展開する
.reportDisplay {
    margin: 20px;
    position: relative;
    page-break-inside: avoid;
}
.reportHtml {
    height: 100%;
    padding: 0px 10px 10px 10px;
}
.reportTitle {
    padding: 10px 10px 0px 10px;
    color: #393737;
    font-size: 21px;
    text-align: center;
}
.fullWidthChart  .reportHolder, .twoThirdMap .reportHolder, .thirdTable.reportHolder{
    height: 360px;
}
.fullWidthChart {
    width: 100%;
    float: left;
    overflow: hidden;
}

 

表

表は、<report> XMLウィジェットを使用して表示することができます。これは、要求されたレポートを呼び出し、書式とスタイリングを指定し、必要なすべてのフィルターへ値を渡す必要があります。

出力の例

注意：上記に示されている、すべてのツアーを表示するリンクは、このウィジェットを通して呼び出されますが、コンテンツと表示形式は、モーダルウィジェットを通して定義されます。詳細な情報は、モーダルウィジェットの項目を参照してください。

要素の例

 ここをクリックして展開する

<report>

子要素値説明

display

TABLE

TABLEは、標準的なYellowfinのスタイリングを使用しない、表形式のレポートの結果を表示します。

title

Top 10 Rated Camps

ダッシュボードタブ上の表の上部に表示されるレポートのタイトルです。
uuidd2769b31-5938-4b80-9573-bfe5720440a0レポートを呼び出すために使用する、Yellowfin UUIDを含めます。

styleClass

fullTable

コンポーネントにスタイリングを適用するために使用する、CSS名を含めます。

filterMap

 ダッシュボードタブ上の他の場所から、レポートに渡す必要のあるすべてのフィルターを定義するノードが含まれています。

resultsPerPage

25各ページに表示するロウ（行）数を定義します。レポートがこの設定数を超過する場合は、<hidePagination>ノードが使用不可になっていない限り、ページ数が表示されます。

hidePagination

true

デフォルトで表示するように設定されているページ数を、非表示にすることができます。

modalName

CampRatingListModal

コンテンツをポップアップ表示するために、XML内の他の場所で定義されたモーダルウィジェットを呼び出します。

modalLinkText

See All Camps

モーダルを開くリンクに表示するテキストです。

 

<filterMap>

子要素値説明

filterUUID

d10848dc-b892-4890-9933-a463931b0828<mapToFilter> の値を受け取る非表示レポート内のフィルターのUUIDです。この例では、レポートに適用された日付フィルターです。

mapToFilter

dateFilter

ダッシュボードタブ上の他の場所に適用されたフィルターの名前です。この例では、dateFilterのフィルターとリンクを作成しています。

XMLの例

 ここをクリックして展開する
<!-- Top 10 Rated Camps -->
<report>
    <display>TABLE</display>
    <title>Top 10 Rated Camps</title>
    <uuid>d2769b31-5938-4b80-9573-bfe5720440a0</uuid>
    <styleClass>fullTable</styleClass>
    <filterMap>
        <filterUUID>d10848dc-b892-4890-9933-a463931b0828</filterUUID>
        <mapToFilter>dateFilter</mapToFilter>
    </filterMap>
    <hidePagination>true</hidePagination>
    <resultsPerPage>25</resultsPerPage>
    <modalName>CampRatingListModal</modalName>
    <modalLinkText>See All Camps</modalLinkText>
</report>

CSSの例

 ここをクリックして展開する
.reportDisplay {
    margin: 20px;
    position: relative;
    page-break-inside: avoid;
}
.reportHtml {
    height: 100%;
    padding: 0px 10px 10px 10px;
}
.reportTitle {
    padding: 10px 10px 0px 10px;
    color: #393737;
    font-size: 21px;
    text-align: center;
}
 
.fullTable {
    width: 100%;
    float: left;
    overflow: hidden;
}
.fullTable .reportTitle {
    padding-bottom: 15px;
}
.fullTable .reportHolder {
    height: 462px;
    overflow-y: auto;
}
.reportModalLink {
    position: relative;
    bottom: -4px;
    float: right;
    right: 10px;
    cursor: pointer;
    font-weight: bold;
}

 

モーダルウィンドウウィジェット

モーダルウィジェットは、<subcontent>要素内で定義されたコンテンツを、ポップアップウィンドウ内に表示します。モーダル自体は、<modal> 定義の外から呼び出されます。例えば、レポートの一部として、です。こちらのシナリオの目的は、形式のリンクをレポートの一部として定義することです。（上記で説明している表を参照してください）

出力の例

 

要素の例

 ここをクリックして展開する

<modal>

子要素値説明

title

Camp Rating List

モーダルウィンドウの上部に表示されるタイトルです。

name

CampRatingListModal

XML内で他のウィジェットにより呼び出されるモーダルの名前です。

subcontent

 モーダルウィンドウのコンテンツを定義します。<subcontent>ノード説明を参照してください。

 

<subcontent>

子要素値説明

report

 モーダルウィンドウに表示されるレポートです。<report> ノードの説明を参照してください。

 

<report>

子要素値説明

display

TABLE

TABLEは、標準的なYellowfinのスタイリングを使用しない、表形式のレポートの結果を表示します。
uuid0d16ddf3-749f-4fac-b86e-73cc5dcb1db6ダッシュボードタブ上の表の上部に表示されるレポートのタイトルです。

styleClass

fullTable

コンポーネントにスタイリングを適用するために使用する、CSSクラス名を含めます。

filterMap

 ダッシュボードタブ上の他の場所から、レポートに渡す必要のある、すべてのフィルターを定義するノードが含まれています。

resultsPerPage

100各ページに表示する行数を定義します。レポートがこの設定数を超過する場合は、<hidePagination>ノードが使用不可になっていない限り、ページ数が表示されます。

 

<filterMap>

子要素値説明

filterUUID

61ccfce6-6c1b-4221-a5ce-561e1e71feb2<mapToFilter> 値を受け取る非表示レポート内のフィルターのUUIDです。この例では、レポートに適用された日付フィルターを指定しています。

mapToFilter

dateFilter

ダッシュボードタブ上の他の場所に適用されたフィルターの名前です。この例では、dateFilterのフィルターとリンクを作成しています。

XMLの例

 ここをクリックして展開する
<!-- "See All Camps" link and popup for the report above -->
<modal>
    <title>Camp Rating List</title>
    <name>CampRatingListModal</name>
    <subcontent>
        <report> <!-- Report to be displayed in modal -->
            <display>TABLE</display>
            <uuid>0d16ddf3-749f-4fac-b86e-73cc5dcb1db6</uuid>
            <styleClass>fullTable</styleClass>
            <filterMap>
                <filterUUID>61ccfce6-6c1b-4221-a5ce-561e1e71feb2</filterUUID>
                <mapToFilter>dateFilter</mapToFilter>
            </filterMap>
            <resultsPerPage>100</resultsPerPage>   
        </report>
    </subcontent>
</modal>

CSSの例

 ここをクリックして展開する
/* Modal Styling */
.reportModalLink {
    position: relative;
    bottom: -4px;
    float: right;
    right: 10px;
    cursor: pointer;
    font-weight: bold;
}
.modal {
    display: block;
    height: 100%;
    width:calc(100% - 230px);
    position:fixed;
    top:0;
    left:230px;
}
.modalBackground {
    position: absolute;
}
.modalContent {
    position: absolute;
    background-color:#FFFFFF;
    box-shadow: 5px 5px 5px #CCCCCC;
    height: 700px;
    width: 700px;
}
.modalContent .modalTopBar {
     background-color: #393737;
     color: #FFFFFF;
     overflow:hidden;
     padding: 8px;
}
.modalContent .modalTitle {
    font-size: 21px;
    float: left;
    font-family: sourceSansPro, sans-serif;
}
.modalContent .modalClose {
    float: right;
    font-size: 20px;
    font-family: cursive;
    cursor: pointer;
}
.modalContent .modalMainContent {
    clear:both;
    height: 100%;
}
.modal .reportHolder {
    height: auto;
}
.modal .fullTable {
    height: 656px;
    overflow-y: auto;
    overflow-x: hidden;
}

カスタムHTMLウィジェット

テキストとレポートデータ

レポートからのデータを組み合わせて表示内容を生成するために、<customHTML> XMLウィジェット内で他の要素と共に使用することができます。このシナリオでは、ユーザーが選択したフィルターの日付範囲内で、レコードがある最初の日を表示しようとしています。これを実行するために、静的テキストとレポートの日付レコードを組み合わせています。ウィジェットは、静的テキストを表示するために、「ツアー開始日」のようなHTMLと、Yellowfinレポートの結果から動的な日付要素を含める必要があります。これを実行するために、非表示レポートとして日付を返すレポートも含める必要があります。

出力の例

要素の例

 ここをクリックして展開する

<report>

子要素値説明

display

HIDDEN

HIDDENを使用することで、レポートの結果を表形式ではなく、ページの他のコンポーネントとして使用することができます。この例は、ツアー開始日を返す単一ロウ（行）のレポートであり、タブ上の日付フィルターによってフィルターがかけられています。

uuid

b0ebacf2-c51d-41c6-8a3f-09cef22adb67

レポートを呼び出すために使用するYellowfin UUIDを含めます。

filterMap

 ダッシュボードタブ上の他の場所からレポートに渡す必要のある、すべてのフィルターを定義するノードを含めます。この例では、タブからの主要な日付フィルターをレポートに渡しています（dateFilter）。<filterMap>ノードの説明を参照してください。

 

<filterMap>

子要素値説明

filterUUID

ea41ba19-6362-4e97-b607-cc66d22cc5cb<mapToFilter> 値を受け取る非表示レポート内のフィルターのUUIDです。この例では、ツアー開始日レポートに適用された日付フィルターです。

mapToFilter

dateFilter

ダッシュボードタブ上の他の場所に適用するフィルターの名前です。この例では、この文書のフィルター項目で定義されたdateFilterのフィルターとリンクを作成しています。

 

<customhtml>

子要素値説明

styleClass

dashboardDates

コンポーネントにスタイリングを適用するために使用する、CSSクラス名を含めます。
html<![CDATA[<div>Your camp started on: <@- campStart @></div>]]>CDATAセクションの中にラップされた、コンポーネントとして使用するHTMLが含まれています。この例では、静的なテキストを含んだCDATAタグと、<@- campStart @> パラメーターを参照して、<replacements>ノードで定義されたcampStartと置き換えます。

replacements

 

必要であれば、カスタムHTMLでパラメーターを配置し、フィルターまたはレポートの値を置き換えることができます。パラメータを呼び出すためには、replaceName値を<@- ->の中に配置してください。<replacements> ノードの説明を参照してください。

 

<replacements>

子要素値説明

replaceName

campStart

<customhtml> ノード内でパラメーターに与えられる名前です。この例では、campStartの置き換えを呼び出しています。

reportName

b0ebacf2-c51d-41c6-8a3f-09cef22adb67

レポートのUUIDです。ダッシュボード上の他の場所でレポートを使用する場合、このノード内にレポート名を挿入することができます。この例では、カスタムHTMLに値を提供するためだけにレポートを使用しており、それ以外には使用していません。

valueColumn

0値が取得されるレポートのカラム（列）です。レポートに複数のカラム（列）やロウ（行）が含まれる場合は、<matchColumn> と<matchValue> ノードも必要ですが、この例では、レポートは単一のセルのみです。カラム（列）は0から数えます。

XMLの例

 ここをクリックして展開する
<!-- Report to return Camp Start Date -->
<report>
    <display>HIDDEN</display>
    <uuid>b0ebacf2-c51d-41c6-8a3f-09cef22adb67</uuid>
    <filterMap>
        <filterUUID>ea41ba19-6362-4e97-b607-cc66d22cc5cb</filterUUID>
        <mapToFilter>dateFilter</mapToFilter>
    </filterMap>
</report>      
  
<!-- Custom HTML to display Camp Start Date -->
<customhtml>
    <styleClass>dashboardDates</styleClass>
    <html><![CDATA[<div>Your camp started on: <@- campStart @></div>]]></html>
    <replacements>
        <replaceName>campStart</replaceName>
        <reportName>b0ebacf2-c51d-41c6-8a3f-09cef22adb67</reportName>
        <valueColumn>0</valueColumn>
    </replacements>
</customhtml>

CSSの例

 ここをクリックして展開する
.dashboardDates {
    color: #909FAC;
    font-size: 13px;
    margin: 2px 0px 0px 0px;
    padding: 0px 15px;
}
  • No labels