Go to Qiita Advent Calendar 2024 Top
LoginSignup
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@mucho243

[ServiceNow] Theme Builderを使ってみる (1) - 基本機能 -

Posted at

はじめに

2024年9月にServiceNow XanaduリリースがGAとなり，システム管理者として触れることの多い Next Experience もいくつかの機能がアップデートされました．
本記事では，その中でもハイライトされていた Theme Builderを実際にPDIで触りながら，まずは基本機能を確認してみます1．

本記事は執筆（2024年9月）時点の情報です．最新の情報は製品ドキュメントを参考にしてください．
Product Documentation | ServiceNow

本記事のまとめ

  • Theme BuilderはUtahリリースで発表されたテーマを作成するためのガイド付きローコードツールである
  • プラグインをインストールすることでPDIでも利用できる
  • 作成したテーマを公開することでNext Experienceに適用できる

Theme Builder とは

2023年5月のUtahリリースにて発表された2会社のブランドをエクスペリエンスに反映するテーマを作成するためのガイド付きのローコードツールです．
ServiceNow Storeで提供されるアプリケーション3だが，後述の通り，PDIからでもプラグインをインストールすることで利用できます．

PDIで実際に触ってみる

では早速，PDIに Theme Builder プラグインをインストールして，実際に新しいテーマを作成してみます．操作は以下の製品ドキュメントを参考にします．

テーマビルダーでの ネクストエクスペリエンス の構成

プラグインのインストール

まずはPDIにプラグインをインストールします．

PDIでの操作の場合は，ServiceNow Storeからのインストールは不要

  • フィルタナビゲーターから All > System Definition > Plugins でApplication Manager を開き，「Theme Builder」をインストール（本記事ではバージョン 4.0.1 を利用）
    image.png

テーマの作成

基本的には表示されるモーダルの指示に従ってテーマを作成できます．

  • プラグインのインストール完了後，フィルタナビゲーターから All > Now Experience Framework > Theme Builder を選択

  • 別のタブで Theme Builder が開くので，「Home」ページから 「Create a theme」ボタンを押下してテーマを作成
    image.png

  • 表示されたモーダルの内容を確認し，「Continue」ボタンを押下
    image.png

  • テーマ名称を入力して「Next」ボタンを押下
    image.png

  • プライマリカラーを選択して「Next」ボタンを押下（画像はデフォルトのカラー）
    image.png

  • セカンダリカラーを選択して「Next」ボタンを押下（画像はデフォルトのカラー）
    image.png

  • 中間色を選択して「Next」ボタンを押下（画像はデフォルトのカラー）
    image.png

  • 必要に応じて追加の色を選択して「Next」ボタンを押下
    image.png

  • ロゴを追加して「Next」ボタンを押下
    image.png

  • テキストのフォントを選択して「Next」ボタンを押下
    image.png

  • インターフェイス内のコンポーネント (ボタン、モーダル、ドロップダウン メニューなど) のコーナー形状を選択して「Next」ボタンを押下
    image.png

  • 選択内容を確認して「Create theme」ボタンを押下
    image.png

作成したテーマの確認

「Editor」ページにて，Workspaceや各種モジュール画面でのテーマの見え方を確認できます．

  • 「UI Styles Preview」を選択して，Workspaceでの各種UIの見え方を確認
    image.png
  • 「Experience preview」を選択して，各種モジュールでの見え方を確認（画像はApplication Managerのプレビュー）
    image.png

作成したテーマの公開

「Manager」ページにて，作成したテーマを公開し，テーマを反映することができます．

  • 公開したいテーマの右上の三点リーダーより，「Publish」を選択
    image.png

  • 「Publish the theme」ポップアップが表示されるので，「Publish」を押下
    image.png

  • 「Published」セクションに移動されたことを確認
    image.png

  • ウィンドウを再読み込みして，自動的にテーマが変更されたことを確認
    image.png

おわりに

本記事では Theme Builder の基本機能について取り上げてみました．

Theme Builder 自体は，既に1年半前にリリースされた機能ではありますが，自身はこれまでに触ったことが無く，情報だけを追っているような状態でした．想像よりも簡単にテーマを作成および反映することができたので，ServiceNowインスタンスをブランドカラーに統一したいニーズや，複数インスタンスが存在する場合にインスタンスを直感的に識別するためのテーマ変更への対応にも十分に活用できるレベルにある印象です．

次回の記事にて，Xanaduリリースの新機能について，まとめてみる予定です！

  1. Xanadu のすべての機能と製品のハイライト ↩

  2. ServiceNow Launches Major Platform Expansion with the Utah Release ↩

  3. Theme Builder ↩

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?