お手元のデータで実際の動きを確認したい場合は、無料評価版をお試しください。

概要

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

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

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


アクションボタンクリックイベント

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

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

  • URLへ移動:指定されたURLを使用して、外部リンク、またはページへ移動します。リンク先を新しいタブやウィンドウ、または現在のウィンドウに開くことができます。

より詳細な情報は、アクションボタンプロパティを参照してください。




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

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


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



  3. 必要なデザインをキャンバスにドラッグします(さらなるカスタマイズを適用できます)。
  4. ボタンウィジェットのプロパティパネルで、「アクション」項目を展開し、こちらのボタンに適用するクリックイベントを選択します。Yellowfinは、ボタンのクリックをトリガーに様々なタイプのイベントを提供しますが、ユーザーはコードモードを使用することで、カスタムイベントを定義することもできます。
  5. 必要に応じて、選択したイベントにさらなる情報を提供します。例えば、「レポートへ移動」を選択した場合は、移動先のレポートのUUIDを入力します。



  6. ボタンに表示するテキストを変更するには、「ボタンのテキスト」項目を展開して、テキストを更新します。ユーザーに実行してほしいアクションを反映する名前をつけてください。



  7. ユーザーがボタンにマウスオーバーした場合の異なるスタイルの表現など、ボタンをさらにカスタマイズすることもできます。すべてのカスタマイズプロパティの説明は、ボタンのプロパティ項目を参照してください。
  8. ボタンの機能をテストする場合は、プレビューモードに移動して、アクションボタンを使用します。




アクションボタンプロパティ


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

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

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

高さ

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

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

角の丸み

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

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

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

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

ウィジェットを固定こちらのトグルを有効にして、ボタンの位置を固定します。これにより、移動やサイズの変更はできなくなります。これは、キャンバス上で複数のウィジェットを選択する場合にも適用されます。固定されたボタンは、引き続きカスタマイズできることに注意してください。
アクション
クリックイベント

選択したウィジェットがクリックされたときに、トリガーになるイベントを選択します。イベントの選択肢は、次の通りです。

  • なし:ウィジェットをイベントのトリガーにしない場合は、こちらを使用します。
  • 次のサブタブ:同じダッシュボード内で次のタブへ移動します。
  • 前のサブタブ:同じダッシュボード内で前のタブへ移動します。
  • フィルターのリセット:フィルター選択をクリア、またはデフォルト値が設定されている場合は、フィルターをデフォルト値にリセットします。
  • ダッシュボードのリセット:ユーザーが実行したすべてのインタラクションのクリアや、適用されたすべてのフィルターを削除することで、ダッシュボードを更新します。
  • レポートへ移動:指定したレポートへ移動します。移動先のレポートは、レポートUUIDを提供することで、指定できます。
  • サブタブへ移動:同じダッシュボード内で、順序が指定された任意のサブタブへ移動します。例えば、四番目のサブタブへ移動するには「サブタブ#」項目に4と入力します。サブタブの順序は、1から始まる点に注意してください。
  • URLへ移動:指定されたURLを使用して、外部リンク、またはページへ移動します。リンク先を新しいタブやウィンドウ、または現在のウィンドウに開くことができます。(より詳細な情報は、以下URLおよびターゲット設定項目を参照してください。)
レポートIDレポートへ移動」クリックイベントを使用してレポートへ移動する場合は、移動先レポートのUUIDを提供します。
サブタブ#サブタブへ移動」クリックイベントを使用してサブタブへ移動する場合は、サブタブの順序を入力します。
URLURLへ移動」クリックイベントを使用して外部ページへ移動する場合は、ページの完全URLを提供します。
ターゲット

URLへ移動」クリックイベントを使用して外部ページへ移動する場合は、ページターゲットを指定します。選択肢は、次の通りです。

  • 新規タブ/ウィンドウ:使用しているブラウザ設定に応じて、URLページを新しいタブ、またはウィンドウに開きます。注意:大部分のブラウザのデフォルトはウィンドウですが、コンピューターのショートカットを使用して、新規タブに開くこともできます(Windowsの場合はCtrl、Macの場合はCmd)。
  • 現在のウィンドウ:現在のウィンドウにページを開きます。
  • 親フレーム:YellowfinがiFrameとして組み込まれている場合、新規ページは親フレーム内で開きます(つまり、そのコンテンツが表示されます)。親フレームとは、Yellowfinフレームが組み込まれいてるフレームです。
  • 現在のフレーム:YellowfinがiFrameとして組み込まれている場合、URLページのコンテンツは現在のフレームに開きます。現在のフレームとは、Yellowfinを組み込んでいるフレームです。
ボタンのテキスト
ボタンのテキストボタンに表示するテキストを提供します。これは、ボタンが実行する機能を反映させるのが望ましいです。
テキスト位置ボタン内のテキストの位置を揃えます。左揃え、右揃え、中央揃えを使用できます。

Active - Hoverトグル

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

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

不透明度現在選択された状態でのボタンの不透明度を指定します。
フォントボタンのフォントタイプとサイズを指定します(両方の状態で一貫します)。
現在選択された状態でのボタンのテキストの色を選択します。
スタイルボタンのテキストに太字や斜体、下線など、書式スタイルを適用します(両方の状態で一貫します)。
塗りつぶし
現在選択された状態のボタンを塗りつぶす色を指定します。

境界線

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




  • No labels