ServiceNowのSingleLineText変数を右寄せにする方法

ServiceNowのサービスカタログでSingleLineText変数を右寄せにしたい場合、単純にg_form.getControlで取得してstyleを変更するだけでは、変数が正しく取得できないことがあります。これは、ServiceNowの変数が内部でiframeや別のDOM構造としてレンダリングされることが原因です。本記事では、確実にSingleLineTextの入力欄を右寄せにする方法を解説します。

1. 変数IDと名前の確認

まず、変数のnameではなく、実際の変数IDを取得することが重要です。変数のnameが正しくても、DOM上でのinput要素のIDとは一致しない場合があります。

ServiceNowでは、変数のスクリプト名(script name)やg_form.getElement()で要素を取得するのが確実です。

2. onLoad Client Scriptでの右寄せ実装例

以下のように、g_form.getElementを使って変数のinput要素を取得し、textAlignを設定します。

function onLoad() {
  var variables = ["変数のスクリプト名1", "変数のスクリプト名2"];

  variables.forEach(function(varName) {
    var elem = g_form.getElement(varName);
    if (!elem) {
      console.log('[SKIP] Variable not found:', varName);
      return;
    }
    elem.style.textAlign = 'right';
  });
}

これにより、SingleLineTextの入力欄を右寄せにすることができます。

3. DOMロードタイミングの注意

変数のinput要素はカタログアイテムのロード後に生成されるため、onLoadで取得できない場合があります。その場合、setTimeoutやMutationObserverで要素が生成された後に右寄せ処理を行うことも有効です。

4. CSSを利用した方法

Client Scriptではなく、カタログアイテムのCSSで強制的に右寄せすることも可能です。例えば:

.catalog_variable input[type='text'] {
  text-align: right;
}

CSSを利用すると、全てのSingleLineText変数に適用可能で、JavaScript依存を減らせます。

まとめ

ServiceNowのSingleLineText変数を右寄せにするには、g_form.getElementで正しい要素を取得するか、CSSで強制的にtext-alignを指定する方法があります。変数名やDOM生成タイミングに注意することで、確実に右寄せを実現できます。