メインコンテンツまでスキップ
waffle.svg
Domo Knowledge Base

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

Version 6

 

はじめに

毎月1,000万件以上のインタラクションがあるなど、表はDomoで最も広く使用されるカードです。表は常に利用できますが、残念ながら次の一般的な例のように、いつでもインサイトを素早く入手できるわけではありません。



この記事では、次の例のように、リンク、色、画像を使用することによって、より迅速にインサイトを表に追加する方法を説明します。

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

表の作成についての詳細は、「」を参照してください。

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

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

インサイトをより迅速に表に組み込むための方法として、リンクやアンカータグを追加する方法があります。これにより、ソースシステムからIDを取得し、表からそのソースに戻るリンクを設定できます。

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

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

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

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

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

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

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

    CONCAT('<div><a href="https://onjira.domo.com/browse.com"','"target="_blank">',`Sales Rep`,'</a></div>')


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

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

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

    注記:列を参照するのではなく、独自のテキストを入力する場合は、構文エラーを避けるために、テキストを単一引用符でラップします。
    例:CONCAT('<div><a href="https://onjira.domo.com/browse.com"','"target="_blank">','Link Text','</a></div>')
  7. スクリプトエディタから [保存して閉じる] を選択します。

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

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

表値に色を追加する

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

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

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

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

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

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

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

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

    concat('<div style="color: #f00">',`Sales`,'</div>')

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

    concat('<div style="color: #f00">',`Sales`,'</div>')

    else

    concat(`Sales`,'')

    end

表に画像を追加する

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






表に画像を追加するには

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

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

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

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

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

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

    CONCAT('<div style="text-align:center"><img alt="DOWN" height="20px" src="http://www.clipartkid.com/images/27/download-public-domain-ihtHTQ-clipart.png">','</div>')

  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('<div style="text-align:center"><img alt="DOWN" height="20px" src="http://www.clipartkid.com/images/27/download-public-domain-ihtHTQ-clipart.png">','</div>')

ELSE

CONCAT('<div style="text-align:center"><img alt="UP" height="20px" src="http://www.clipartkid.com/images/551/arrow-blue-up-clip-art-at-clker-com-vector-clip-art-online-royalty-Yl3Dn6-clipart.png">','</div>')

END

HTML表タグ

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

タグ

属性

<a>

href="http://..."(下の注記1を参照)

<br>

 

<div>

  • style(下の注記2を参照)

  • align

  • width

  • title

<font>

  • style(下の注記2を参照)

  • color

  • size

<img>

  • style(下の注記2を参照)

  • alt

  • align

  • border

  • class

  • height

  • title

  • width

<span>

style(下の注記2を参照)

<p>

style(下の注記2を参照)

<h1>

style(下の注記2を参照)

<h2>

style(下の注記2を参照)

<h3>

style(下の注記2を参照)

<h4>

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