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

​

はじめに

注記： Beast Modeを使用してグラフィック、リンク、画像を表カードに追加するときは、次のことに注意してください。

• Mega表では、HTMLタグやHTMLのスタイル属性がサポートされていません。サポートされているのは画像とリンクのみです。
• HTML表では、HTMLタグおよびstyle=“background-color”などのスタイル属性がサポートされています。
• HTML表では、Beast Mode計算を使用してコンテンツをセルに追加する際のフィルター処理はサポートされていません。詳細については、「 フィルタービューを使用してページレベルのフィルターを適用する 」を参照してください。

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

• 表にリンクとアンカータグを追加する
• 表の値に色を追加する
• 表に画像を追加する
• HTML表タグ

​

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

1. カードの右上の ［設定］ > ［Analyzerで編集］ を選択します。
2. Analyzerの上部にあるツールバーから ［Beast Mode］ を選択します。
3. ［計算フィールド名］ フィールドにBeast Modeスクリプトの名前を入力します。
4. 表リンクやアンカーのHTML文字列を作成するには、concat()関数を使用します。次は、JIRAソースシステムへのサンプルリンクです。
   Copy

   Ask AI

    CONCAT('<div><a href="https://onjira.domo.com/browse.com"','"target="_blank">',`Sales Rep`,'</a></div>')
   
5. https://onjira.domo.com/browse.com は、使用するリンクに置き換えます。
6. `Sales Rep` は、表に表示するリンクのテキストに置き換えます。
   注記：

   • “target=_blank”は、リンクを強制的にブラウザーの新しいタブで開きます。これの追加はオプションです。
   • 列を参照する代わりに独自のテキストを入力する場合は、構文エラーを回避するために、テキストを単一引用符で囲みます。例：

   Copy

   Ask AI

   CONCAT('<div><a href="https://onjira.domo.com/browse.com"','"target="_blank">','Link Text','</a></div>')
   
7. 右上の ［計算フィールドを作成］ を選択し、スクリプトエディターを終了します。
8. この新しい計算フィールドをAnalyzerの 列 領域にドラッグします。

​

表の値に色を追加する

1. カードの右上の ［設定］ > ［Analyzerで編集］ を選択します。
2. Analyzerの上部にあるツールバーから ［Beast Mode］ を選択します。
3. ［計算フィールド名］ フィールドにBeast Modeスクリプトの名前を入力します。
4. concat()関数を使用して、色のHTML文字列を作成します。構文は、 div コマンド内の「style」です。次は、色を赤に設定する例です。
   Copy

   Ask AI

   concat('<div style="color: #f00">',`Sales`,'</div>')
   
   次は、値が負のときにテキストの色を赤に設定する例です。
   Copy

   Ask AI

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

​

表に画像を追加する

​

表に単一の画像を追加する

1. カードの右上の ［設定］ > ［Analyzerで編集］ を選択します。
2. Analyzerの上部にあるツールバーから ［Beast Mode］ を選択します。
3. ［計算フィールド名］ フィールドにBeast Modeスクリプトの名前を入力します。
4. concat()関数を使用して、画像のHTML文字列を作成します。構文は、 <img> コマンドです。次は、シンプルな下向き矢印の画像を追加する例です。
   Copy

   Ask AI

    CONCAT('<div style="text-align:center"><img alt="DOWN" height="20px" src="https://www.irasutoya.com/2013/01/blog-post_7794.html">','</div>';)
   
5. https://www.irasutoya.com/2013/01/blog-post_7794.html は、 表示する画像のURLに置き換えます。
   注記： 次のステップはオプションです。
6. style="text-align:center" は、画像に適用するカスタムのスタイルに置き換えることができます。この例では、画像は表セルの中央に配置されています。使用可能なスタイルタグについては、下の「 HTML表タグ 」セクションを参照してください。
7. alt="DOWN" は、ユーザーが何らかの理由で画像を表示できない場合に、代替情報を提供します。次の例では、下向き矢印の画像の代わりに「DOWN」という単語が表示されます。
8. 画像の元の高さを使用する場合は、 height="20px" をすべて削除します。また、 20px を画像に適用する高さ（ピクセル単位）に置き換えることもできます。

​

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

 CASE WHEN `Profit` < 0 THEN                 CONCAT('<div style="text-align:center"><img alt="DOWN" height="20px" src="https://4.bp.blogspot.com/-VtfK8e7-guk/UNgpNEi_IEI/AAAAAAAAJZI/PuIiQXbcfJY/s1600/mark_arrow_down.png">','</div>';) ELSE CONCAT('<div style="text-align:center"><img alt="UP" height="20px" src="https://3.bp.blogspot.com/-8vT29qQLkGY/UNgpRL7EsJI/AAAAAAAAJZs/ONyYGbuksDQ/s1600/mark_arrow_up.png">','</div>';) END

 CASE WHEN `[your column` >=0 THEN CONCAT('<div style="text-align:center"><img height="20px" src=',`[your column]`,'">','</div>') ELSE CONCAT('<div style="text-align:center"><img height="20px" src="[URL of the image to switch in">','</div>') END

​

HTML表タグ