UI Action

UI Actionとは、NowPlatform上でのボタンやリンクのことです。
これをトリガーとして、WorkflowやTaskの状態遷移に映るので、実装上必須です。
今回は、UI Actionを着色します。

完成イメージ

これを

こうします！

実装

1.client scriptの作成

system definition > client script に移動する。
client script テーブルのNewをクリックする。

name:change button color
table:incident
type:onLoad
script:

changeButtonColor.js

function onLoad() {
     //resolve incidentボタンの色を変える
     changeButtonColor('resolve_incident', '#f0f8ff');
     //aaaaaaaaaボタンの色を変える
     changeButtonColor('aaa', '#ffffe0');
}
//第一引数:buttonID=>UI ActionでのAction nameの値,を指定
//第二引数:カラーコードを指定
//カラーコード:https://www.colordic.org/
function changeButtonColor(buttonID, backgroundColor) {
     try{
           //buttonIDからbuttonを特定して 背景色を変更
           $$('button[id=' + buttonID + ']').each(function(elmt) {
                 elmt.style.backgroundColor = backgroundColor;
                 elmt.style.color = '#ffffff'; //ボタンのテキスト色を変更
           });
     }catch(e){}
}

これで、クライアントスクリプトは実装OK

changeButtonColor()の第一引数である、UI ActionのAction nameは下記です！

2)client scriptのグローバル適用設定

クライアントスクリプトを書くだけでは実行されず、下記のinfo messageが表示されるため、もう一つ手順を踏む。

New client-scripts are run in strict mode, with direct DOM access disabled. Access to jQuery, prototype and the window object are likewise disabled. To disable this on a per-script basis, configure this form and add the "Isolate script" field. To disable this feature for all new globally-scoped client-side scripts set the system property "glide.script.block.client.globals" to false.

クライアントスクリプトの適用範囲をIsolate->Globalに変更してやる必要がある。
client script のリストレイアウトからIsolate scriptをtrue/falseで設定できるため、falseにする。

これで完成！下記のように！着色の仕方は応用が利くので様々な場面にてご利用ください。

参考文献

1)Community

"glide.script.block.client.globals" error
Change UI action button color

2)カラーコード:

原色大辞典