Help Center
Training
Knowledge Base
Community
Developers
Support

Beast Modeを使用してグラフィック、リンク、画像を表カードに追加する

Domo University
  • 更新
フォローする

はじめに

表はDomoで最も広く使用されるカードで、毎月1,000万件以上のインタラクションがあります。表は常に役に立ちますが、残念ながら、以下の一般的な例のように必ずしも迅速なインサイトにつながるわけではありません。

tablegraphics1.png

この記事では、以下の例のようにリンク、色、画像を含めて、簡単なインサイトを表に追加する方法を説明します。

tablegraphics2.png

この記事の内容はDomopalooza 2017のTips and Tricksセッションで紹介したものです。このセッションについての詳細は、「ヒントとコツ：パワーユーザーによるクイックレッスン」を参照してください。

表の作成についての詳細は、「テーブルチャート」を参照してください。

注記：iFrameがサポートされていないため、Domoカードを表カードのセル内にエンベッドすることはできません。サポートされているタグのリストについては、下の「HTML表タグ」を参照してください。    

リンクとアンカータグを表に追加する

リンクやアンカータグを追加すると、ソースシステムからIDを取得し、表からそのソースに戻るリンクを設定できます。

HTMLの基本と、Beast ModeでCONCATを使用する方法を知っていれば、表にリンクを追加できます。

表にリンクを追加するには：

  1. カードのスパナメニューで［カードを編集］を選択してAnalyzerを開きます。

  2. 新しいBeast Modeスクリプトを作成するには、［計算フィールドを追加］を選択します。

  3. スクリプトに名前を付けます。

  4. 表リンクやアンカーのHTML文字列を作成するには、CONCATを使用します。

    次は、JIRAソースシステムへのサンプルリンクです。

    CONCAT('

    ')


    "target=_blank"の追加はオプションであり、リンクをブラウザーの新しいタブで強制的に開きます。

  5. https://onjira.domo.com/browse.comは、使用するリンクに置き換えます。

  6. `Sales Rep`は、表に表示するリンクのテキストに置き換えます。  
     

    注記：列を参照するのではなく、独自のテキストを入力する場合は、構文エラーを避けるために、テキストを単一引用符でラップします。
    例：CONCAT('')

  7. スクリプトエディターで ［保存して閉じる］を選択します。

  8. 次に、この新しい計算フィールドをAnalyzerの［列］領域にドラッグします。

これで、素早くソースシステムのデータを確認できる便利なリンクが追加されました。

表の値に色を追加する

表の値に色を追加する場合も同じ原則が適用されます。

表の値に色を追加するには：

  1. カードのスパナメニューで［カードを編集］を選択してAnalyzerを開きます。

  2. 新しいBeast Modeスクリプトを作成するには、［計算フィールドを追加］を選択します。

  3. スクリプトに名前を付けます。

  4. 表リンクやアンカーのHTML文字列を作成するには、CONCATを使用します。

    色のHTML構文では、divコマンドで「style」を指定します。

    次は、色を赤に設定する例です。

    concat('

    ',`Sales`,'
    ')

    次は、値が負のときにテキストの色を赤に設定する例です。

    concat('

    ',`Sales`,'
    ')

    else

    concat(`Sales`,'')

    end

表に画像を追加する

最後に、HTMLでコマンドを使用すると、表に画像を追加できます。






表に画像を追加するには：

  1. カードのスパナメニューで［カードを編集］を選択してAnalyzerを開きます。

  2. 新しいBeast Modeスクリプトを作成するには、［計算フィールドを追加］を選択します。

  3. スクリプトに名前を付けます。

  4. 表リンクやアンカーのHTML文字列を作成するには、CONCATを使用します。

    画像を参照するためのHTML構文では、コマンドを使用します。

    次は、シンプルな下向き矢印の画像を追加する例です。

    CONCAT('

    DOWNhttp://www.clipartkid.com/images/27/download-public-domain-ihtHTQ-clipart.png">','
    ')

  5. http://www.clipartkid.com/images/27/download-public-domain-ihtHTQ-clipart.pngは、表示する画像のURLに置き換えます。

    次のステップはオプションです。

  6. style="text-align:center"は、画像に適用するカスタムのスタイルに置き換えることができます。この例では、画像は表セルの中央に配置されています。使用可能なスタイルタグについては、「HTML表タグ」を参照してください。

  7. alt="DOWN"は、ユーザーが何らかの理由で画像を表示できない場合に、その画像に関する代替情報を提供します。この場合、下向き矢印の画像の代わりにDOWNという単語が表示されます。

  8. 画像の元の高さを使用する場合は、height="20px"をすべて削除します。また、20pxを画像に適用する高さ（ピクセル単位）に置き換えることもできます。元の画像のサイズが表に対して非常に大きいため、20pxを使用しています。

表の1つの列に複数の画像を追加するには：

Beast Modeを使用して、CASEステートメント条件を作成します。利益の増減に合わせて、上矢印または下矢印が表示されます。

CASE WHEN `Profit` < 0 THEN
               
CONCAT('

DOWNhttp://www.clipartkid.com/images/27/download-public-domain-ihtHTQ-clipart.png">','
')

ELSE

CONCAT('
UPhttp://www.clipartkid.com/images/551/arrow-blue-up-clip-art-at-clker-com-vector-clip-art-online-royalty-Yl3Dn6-clipart.png">','
')

END

タグ内のソースを動的に更新するためのBeast Mode計算を作成することもできます。Beast Mode計算の作成には次のようなコードを使用します。

CASE WHEN `[your column` >=0 THEN

CONCAT('

','
')

ELSE

CONCAT('

','
')

END

HTML表タグ

セキュリティ上の理由から、Domoの表に使用できるのは特定のHTMLタグのみです。次の表は、許可されているすべてのタグのリストです。

タグ

属性

href="http://..."（下の注記1を参照）


 

  • style（下の注記2を参照）

  • align

  • width

  • title

  • style（下の注記2を参照）

  • color

  • size

  • style（下の注記2を参照）

  • alt

  • align

  • border

  • class

  • height

  • title

  • width

style（下の注記2を参照）

style（下の注記2を参照）

style（下の注記2を参照）

style（下の注記2を参照）

style（下の注記2を参照）

style（下の注記2を参照）

注記1：URLは、http、https、mailtoのいずれかで始める必要があります。部分パスや相対パスは使用できません。その他のhrefは削除されます。

注記2：使用できるstyle属性には、次のものがあります。

  • background-color

  • border

  • color

  • float

  • font-color

  • font-size

  • font-weight

  • height

  • left

  • margin

  • margin-left

  • margin-right

  • max-height

  • max-width

  • padding

  • position

  • text-align

  • top

  • vertical-align

  • white-space

  • width

  • word-wrap

  • z-index

関連記事

コメント

0件のコメント

サインインしてコメントを残してください。