30日間の無料評価版をお試しいただけます。

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migration of unmigrated content due to installation of a new plugin

Anchor
top
top

Table of Contents
classcontents

概要

Styleclass
ClasstopLink

ページトップ

ダッシュボードにアクションボタンを追加することで、クリック時に内部および外部イベントのトリガーにしたり、(エンタープライズアプリケーションに対して)データを送信、および取得したり、カスタムワークフローを実行することができます。例えば、そのまま使用できるYellowfin アクションにより、ダッシュボード上の次のサブタブに移動するボタンを追加したり、Salesforceへリードレコードを送信することができます。

こちらのウィジェットは、アクションボタンに使用される複数のデザインを提供しますが、プロパティパネルを使用してルックアンドフィールをカスタマイズしたり、編集したりすることができます。開発者は、コードモードを通して、アクションボタンにカスタムコードを追加し、ダッシュボードへのシームレスなワークフローの統合を可能にします。

注意:実際の動きを確認するには、ダッシュボードをプレビューする必要があります。


アクションボタンの機能

Yellowfinは、ボタンに割り当てることのできる、そのまま使用できる様々なアクションを提供します。選択肢は、以下の通りです。

  • 次のサブタブ:この機能は、同じダッシュボード内で次のタブへと移動します。
  • 前のサブタブ:この機能は、同じダッシュボード内で前のタブへと移動します。
  • フィルターのリセット:この機能はフィルター選択をクリア、またはデフォルト値が設定されている場合は、フィルターをデフォルト値にリセットします。
  • ダッシュボードのリセット:この機能は、ユーザーが実行したすべてのインタラクションのクリアや、適用されたすべてのフィルターを削除することで、ダッシュボードを更新します。
  • レポートへ移動:この機能は、指定したレポートへと移動します。このレポートは、レポートUUIDを提供することで、指定することができます。




アクションボタンの使用方法

こちらの機能はキャンバスレイアウトでのみ機能することに注意してください。


  1. 画面左側にある「ウィジェット」ボタンをクリックします。
  2. 表示された一覧で、「ボタン」項目を展開します。事前にデザインされたボタンが表示されます。



  3. 必要なデザインをキャンバスにドラッグします(さらなるカスタマイズを適用できます)。
  4. ボタンウィジェットのプロパティパネルで、「ボタンのテキスト」項目を展開します。
  5. ボタンに表示するテキストを入力します。ユーザーに実行してほしいアクションを反映する名前をつけてください。



  6. 次に、ボタンの機能を選択します。Yellowfinは、ボタンが実行できる様々なタイプのアクションを提供しますが、コードモードからカスタム機能を定義することもできます。



  7. 選択した機能に必要な追加情報を提供します。例えば、レポートへ移動アクションを選択した場合は、移動先となるレポートのUUIDを入力します。
  8. ユーザーがボタンにマウスオーバーした場合の異なるスタイルの表現など、ボタンをさらにカスタマイズすることもできます。すべてのカスタマイズプロパティの説明は、ボタンのプロパティ項目を参照してください。
  9. ボタンの機能をテストする場合は、プレビューモードに移動して、アクションボタンを使用します。




アクションボタンの使用方法

Section


Column
width40%


Column
width60%


プロパティの名前説明
名前このボタンウィジェットの名前を更新します。これはボタン自体に表示されるテキストではないことに注意してください。
サイズと位置
Xダッシュボードキャンバスに正確に配置するために、ボタンウィジェットの左上隅のX座標を指定します。
Yダッシュボードキャンバスに正確に配置するために、ボタンウィジェットの左上隅のY座標を指定します。

ボタンウィジェットの幅をピクセル単位で指定することで、正確にサイズを変更します。

ボタン上のテキストがこちらで指定したサイズを超える場合、ボタンサイズは拡張することに注意してください。

高さ

ボタンウィジェットの高さをピクセル単位で指定することで、正確にサイズを変更します。

ボタン上のテキストがこちらで指定したサイズを超える場合、円形ボタンのサイズは拡張することに注意してください。

角の丸み

こちらのオプションは、選択したボタンの角の丸みを定義します。ヒント:角の丸みを最大にするには、ボタンの高さの半分の値を設定します。例えば、高さが130ピクセルの場合、角の値を65ピクセルに設定します。さらに、角の値を65より大きくしたとしても、今回の例ではこれ以上の効果はありません。

回転選択したボタンウィジェットを回転する角度を指定します。正の角度はウィジェットを右回りに回転し、負の値は左回りに回転します。
アスペクト比

こちらのトグルを有効にして、アスペクト比を維持します。これにより、ボタンのサイズを拡大したり、縮小したりしても、その形状が維持されます。(幅と高さの関係)

こちらが無効の場合、ボタンは横、または縦方向に引き伸ばされます。

ウィジェットを固定こちらのトグルを有効にして、ボタンの位置を固定します。これにより、移動やサイズの変更はできなくなります。これは、キャンバス上で複数のウィジェットを選択する場合にも適用されます。固定されたボタンは、引き続きカスタマイズできることに注意してください。
ボタンのテキスト
ボタンのテキストボタンに表示するテキストを提供します。これは、ボタンが実行する機能を反映させるのが望ましいです。
テキスト位置ボタン内のテキストの位置を揃えます。左揃え、右揃え、中央揃えを使用できます。
アクティブ - マウスオーバートグル

こちらのトグルは、ボタンの状態を指定します。「アクティブ」は、一般的なボタンの状態(マウスオーバーや、クリックしないとき)を表し、「マウスオーバー」はマウスオーバーした際のボタンの状態を表します。

選択した状態は、残りのボタンプロパティの一部に影響するため、異なる状態ごとにボタンのスタイルを変更することができます。

不透明度現在選択された状態でのボタンの不透明度を指定します。
フォントボタンのフォントタイプとサイズを指定します(両方の状態で一貫します)。
現在選択された状態でのボタンのテキストの色を選択します。
スタイルボタンのテキストに太字や斜体、下線など、書式スタイルを適用します(両方の状態で一貫します)。
ボタンの機能ボタンがクリックされた際に実行される機能を指定します。各機能の詳細については、アクションボタンの機能項目を確認してください。
塗りつぶし
現在選択された状態のボタンを塗りつぶす色を指定します。

境界線

ボタンの境界線の幅を指定します。境界線を設定しない場合は、スライダーを0に設定します(両方の状態で一貫します)。
現在選択された状態でのボタンの境界線の色を指定します。
スタイル現在選択された状態でのボタンの境界線のスタイルを指定します。
影のX方向の位置サイズをピクセル単位で定義することで、ボタンのX方向に影を投影します。
影のY方向の位置サイズをピクセル単位で定義することで、ボタンのY方向に影を投影します。
影のぼかしボタンの影の鮮明さを定義します。値が小さくなるにつれて、鮮明さが増し、影が濃くなります。影をぼかす場合は、大きな値を定義します。
影の色影に色を設定します。影を表示するためには、必ずこちらを指定する必要があります。





horizontalrule

Styleclass
ClasstopLink

ページトップ