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

はじめに

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



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

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

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

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

インサイトをより迅速に表に組み込むための方法として、リンクやアンカータグを追加する方法があります。これにより、ソースシステムから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タグのみです。次の表は、許可されているすべてのタグのリストです。

注記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