これは🎄🎁🎅Oracle NetSuite Advent Calendar 2024🤶🎁🎄の10日目の投稿です。
1日目に投稿した、保存検索の続きのトピックです。
前回の記事では、検索結果のビューで文字列の書式や内容をHTMLタグやJavaScriptを使ってカスタマイズできることを解説しました。今回は実際にいろいろなHTMLタグやスクリプトを使って、何がどこまでできるのかを検証してみたいと思います。
あくまでも「やってみた」系の記事ですので、公式にサポートされている内容では必ずしもありません。ご了承ください。
ブラウザーはMicrosoft Edgeの最新版を利用しています。
ベースとなる「結果」ビュー
今回は顧客一覧を返す保存検索の結果の表示をカスタマイズします。既定の状態では以下のように見えています。
保存検索の条件の設定画面の「結果」サブタブの内容はこちら。
特定のフィールドの内容による条件式で行全体の背景色や文字の色・太さを変更したり、行の先頭に画像(アイコン)を表示するには「ハイライト」サブタブを使います。
実際の実行結果はこちら。
ステータス=「顧客-Closed Win」となっている行の先頭に⚠️が表示され、文字が赤く太字になり、背景がピンク色になっています。
しかし、今回はこれとは異なる方法で、特定のフィールド (=ステータス) の書式のみを変更 (つまり縦方向に変更) する方法を「結果」サブタブ内のカスタマイズで実現してみます。
HTMLタグの装飾でいろいろ試してみる
「結果」サブタブにて、書式変更のターゲットとなる「ステータス」フィールドを「計算式 (HTML)」に変更します。
同時に、「カスタム・ラベル」列には「ステータス」と入れて、「計算式」列にはダイアログボックスでフィールドのドロップダウンから「ステータス」を選択することで "{status}"という計算式を入力します。
こちらは入力支援のダイアログボックス。
この状態で保存検索を実行すると、既定の状態と同じ結果になります。
それでは、ここから「計算式」列の値をカスタマイズしていろいろ試してみましょう！
太字、下線、斜め、書体
「計算式」列に以下を入力します。
'<b><i><u>' || {status} || '</u></i></b>'
HTMLタグはシングルクオートで囲み、式の要素同士のつなぎは「||」を入れます。
結果はこちら。期待通り「ステータス」列の書式に「太字」「下線」「斜め」が反映されました。
文字色、フォント、背景色、枠線、余白、左右中央揃え
文字色、フォントには<font> タグを使います (非推奨ですが)。<span> タグを代わりに使うこともできます。
'<font color="green" face="HGS創英角ﾎﾟｯﾌﾟ体">' || {status} || '</font>'
以下の通り、動作します。
背景色、枠線、余白を変えてみましょう。
'<span style="padding: 5px 10px; background: yellow; border: 1px solid #333;">' || {status} || '</span>'
これも動作します。(文字列が改行しているので綺麗な見た目ではないですが)
文字の大きさ
文字の大きさの指定にも<font> タグか<span> タグを使います。
'<font size="7">' || {status} || '</font>'
または
'<span style="font-size:30px">' || {status} || '</span>'
<span>タグのほうがより大きさを自由に設定できます。300pxと指定してもそこまで拡大されて表示されます。あまり大きくすると全体のレイアウトが崩れてしまいますので使いどころはありません。
マーキー
<marquee> タグを使います。
'<marquee>' || {status} || '</marquee>'
<marquee> タグは非推奨ですが、最新版のMicrosoft Edgeでもまだ動作するようです。
ハイパーリンク、ボタン
Webアドレスフィールドの場合、<a>タグを使うとクリックできるリンクを設定できます。
'<a href="' || {url} || '" target="_blank">' || {url} || '</a>'
同じビュー内にある電子メールアドレスで使われているスタイルと違いますが、この辺はCSSの適用で同じにできそうです。
同じ要領でURLの代わりにボタンも使えます。
列幅の確保
「結果」サブタブの中には、列幅を設定するオプションがありませんが、HTMLで表を作って表幅を指定することで「つっかえ棒」として働かせることができます。
'<table width="300"><tr><td>' || {status} || '</td></tr></table>'
これにより「ステータス」列の改行がなくなり広い幅が確保されます。
以上、いろいろ試しましたが、結論としてはHTMLのテストのような形になりました。ブラウザーがサポートしている装飾は保存検索の結果ビューにはそのまま反映することが可能だということです。
SQL Expressionで試してみる
前の記事で少し触れたSQL Expressionを使っても色々試すことができます。
CASE WHEN {status} = '顧客-Closed Won' THEN '<font color="red">'||{status}||'</font>'ELSE {status} END
実行結果:
REGEXP_REPLACE({url},'*/www\.*','/<font color="red"><b>www</b></font>.')
実行結果:
スクリプトでいろいろ試してみる
「計算式」列の値には、HTMLタグだけではなく、<script> タグで囲んだ中にJavaScriptを書いて、値による条件分岐、正規表現によるマッチングや加工など、様々な処理を行わせることができます。
Hello, World! ダイアログボックスの表示
たとえば、以下の計算式を仕込むと、検索結果を一行表示するごとにモーダルダイアログボックスで「Hello World!」と出てきます。(たくさん出てきてしまうので、実際の実行はお勧めしません！)
{status} || '<script>alert("Hello World!");</script>'
でも、このようにスクリプトが動くということは、書式だけではなくいろいろなことができることを意味します。
文字列の追加
テキストの出力にはdocument.write()を使います。
{status} || '<br/><script>document.write("Hello, world!");</script>'
実行結果: 通常のステータスの内容の後に会議用して「Hello, world!」が出力されます。
結果ビュー外の任意要素の操作
また、スクリプトを使うと結果ビューの外側のページのHTML要素にもアクセスできてしまうので、究極、何でもできてしまいます。
{status} || '<script>document.getElementsByTagName("h1")[0].innerHTML="' || {companyname} || {now} ||'";</script>'
実行結果: 結果ビューの最後のレコードの会社名と現在日付が結果ページのタイトルに表示されます。
実際に業務への実装に使えそうな様々なパターンを研究している海外のドキュメントもあるので、少し古いですが掲示しておきます。参考にしてください！