【ServiceNow】NextExperienceモードにおけるテーマの設定について
従来のServiceNowでは「システムの設定」からテーマで色合い等を選択できるのだが
NextExperienceでは標準状態だとテーマの設定自体が選択できなくなってしまう。
※そもそもNext Experienceって？
バージョンケベックから新しく導入された、効率と生産性を高めるために作られた新たなServiceNowのUIの形とのことです。
詳細は以下のページに記載
ServiceNow Next Experience
で、このNext Experienceでは従来のようにテーマを変更することができるのか？
答えはイエス。ただし、デフォルトで用意されたものでなく、自分の方でカラーバリエーションを定義する必要がある。
ということで、下記にそのやり方を記載していく。
具体的な手順
-
【前提】NextExperienceモードへの変更
- フィルタナビゲータで「sys_properties.list」と入力し、sys_propertiesの中身を表示
- 「glide.ui.polaris.experience」の設定をTrueにする。
⇒以上の設定でNext Experienceモードになります。
-
ダークモードの追加
NextExperienceに標準でテーマとしてされているダークモードを表示させるようにする- フィルタナビゲータで「sys_properties.list」と入力し、sys_propertiesの中身を表示。
- 「glide.ui.polaris.dark_themes_enabled」の設定をTrueにする。
⇒以上の設定でダークモードの設定を選択できるようになります。
この状態で設定をみるとテーマの項目が出現し、デフォルトモードかダークモードかを選択できるようになる。
-
オリジナルのテーマ色を追加
手順2でテーマの設定ができる状態になったので、ここからはテーマの定義を作成する。- フィルタナビゲータで「Theme」(日本語の場合は「テーマ」)と入力しNow Experienceのテーマを選択。
- UX ThemeでPolarisを選択。
- UX Theme SyleでDarkを選択。
- 「Insert and Stay」を選択し、適当な名前を入力し保存(以降はこちらのUX Styleを編集することになります)
※この際sn-themesアプリケーション内にあるのでGlobal状態だと編集できないと忠告メッセージが出ますが、「Insert and Stay」を行いコピー先のUX Theme Styleを編集することでGlobalでも編集できるようになります。 - UX Theme Style選択画面に戻りColorsを選択し、Styleの中身をコピー
- 新しく作成したTheme StyleのStyleをColorsでコピーしたもの1に上書き貼付し、保存。
- baseで定義されている各色の箇所を任意の色に設定する。
色のメインとされている部分は大体以下であり、色の定義はRGB表記でそれぞれ0～255で設定できる。
"--now-color_chrome--brand"
"--now-color_brand--secondary"
"--now-color--primary"
"--now-color--secondary"
"--now-color_selection--secondary"
"--now-color--interactive"
"--now-color_surface--brand"
"--now-color_brand--primary"
例を挙げると従来のローズのようなテーマにしたい場合はbaseの上記の定義を「205,87,98」で設定してすると似たようなテーマを作成できる
色の定義を保存することで再度設定画面からテーマを確認すると、今回新たに追加したテーマを設定することができる。
感想
Next Experienceにしたことでシンプルな機能以外は全部そぎ落とした感じ？
やはりテーマはNEでもデフォルトでいくつか用意してほしかった
(開発で環境ごとにテーマの見た目を分けてすぐ分かるようにしてたというのもあって)
-
Styleの中身はJSon形式になっており以下の定義がされている
base…色の定義を行っている(RGB形式)
property…各パーツ部分をbaseで設定した定義(primary,secondary,neutral)に割り当てている ↩