1
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?

@4444aki3tow

ServiceNowエンジニアがOutSystemsを触ってみる～レイアウト編～

1
Last updated at Posted at 2026-02-28

はじめに

Hello, World!編で何となく操作を理解したので、カスタムテーブルなどを作成していこうと思います。

Hello, World!編までは極力双子さんに質問しながらやっていきましたが、直感的にできそうなのでまずはやってみて、わからないことが出た時だけ聞くようにします。

筆者はOutSystemsについて体系的な学習は一切しておらず完全に独学となります。
生成AIに質問しつつアプリを作成しています（公式ドキュメントも一切見ていないです）記事の内容には正しくない情報が、含まれる可能性があります。ご了承ください。

前回までの記事

ServiceNowエンジニアがOutSystemsを触ってみる～Hello, World!編～

やってみよう

カスタムテーブル作成

  • テーブル作成
    image.png
    Data > Database 右クリック > Add Entity を選択
    これでテーブルができたはずです
    image.png

  • カラム作成
    image.png
    Database > テーブル選択（ここではIncident）し右クリック >Add Entity Attribute を選択
    カラム名を入力
    image.png

詳細な設定はこのあたりからできそうです
image.png

ひとまずカスタムテーブルができたようです
次はこれを表示するUIを作成します

カスタムテーブルUI作成＆実行

  • リスト＆フォーム作成

さすがに初見ではよくわからないので双子さんに聞きます
image.png
テーブルのことは、Entityというのがこの世界では一般的なようですね

image.png
image.png

なんか箱ができました

image.png

これは古い情報のようです。一回で二つの箱ができました
image.png

  • 動かしてみる
    image.png

リストができました！
右上の Add Incidentボタンで新規レコードが作成できます
image.png

ServiceNowでいうところのフォーム画面はEditという画面になってました
image.png

ひとまず、リスト＆フォームはできました。

2列表示にしてみよう

Column2を選択します
image.png

右側のInterface > Widgets Treeで設定する方が直接Widgetを選択して動かすより簡単でした
image.png

2列になりました
image.png

入れ子の順番に注意してください
今回はMainContent > Form > Columns2 Widget > 各Column > それぞれの Containerとなっています

メニューを作ってみよう

ServiceNowでいうところのNavigationメニューを作ってみます

デフォルトでは画面上部にメニューが表示されています
image.png

このメニューを左側に表示するには

Interface タブのLayouts フォルダを選択します
ここに上部表示のLayoutTopMenuと左表示のLayoutSideMenuがあります
image.png

レイアウトを変更したい画面をダブルクリックで開きます
デザイン画面の何もないあたりをクリックします
image.png

プロパティをLayoutSideMenuに変更します（デフォルトはLayoutTopMenu）

image.png

これで左側にメニューが表示されます
image.png

これは各画面ごとに設定が必要となります
今回はIncidentのリストのみに設定したため、フォームでは上部になります
image.png

メニューのサイズ変更は基本的にできません

結論から言うと、OutSystemsの標準機能（Propertiesの設定だけ）では**「動的なリサイズ」はサポートされていません。** OutSystemsのレイアウトは、基本的にレスポンシブ（画面幅に応じて固定または自動切り替え）を前提としているからです。

メニューにセクションを設定する

こんな感じのセクションを設定します
image.png

Submenuというウィジェットを使うことで親子関係を持つセクションを作成できます

InterfaceのCommon > Menu をダブルクリックします
image.png

こんなのが開きます
image.png

左のツールバーからSubmenuを選びます（検索で絞り込むと便利です）
image.png
これをドラッグ＆ドロップしていきます

Widgets Treeを利用した方が楽だと思います
image.png

Widgets Treeを利用した場合、一番上にSubmenuを持っていき、Itemsの下に、子供となるナビゲーション（Link）を配置します
image.png

Linkでクリックされた際の動きを設定しています
image.png

これでセクションが完成です
image.png
ラベル名はMenuから設定
image.png

リスト画面の項目変更

image.png

このリスト画面に表示するカラム、順番を設定していきます
さすがにわからなかったので双子さんに聞きました
image.png

image.png

  • 列追加
    image.png
    Dataからのドラッグ＆ドロップで簡単に追加されました

-　並び替え
image.png

Widgets Treeのドラッグ＆ドロップで簡単に並び替えられました
image.png

と、思ったら・・・・
ヘッダーだけ並び替えされていて中のデータは並び替えされていませんでした
image.png

双子さんに聞いたところ
image.png

Widgets Treeを見てみると確かにHeader Rowは順番が変わっていますが、Rowは元のままでした
image.png

順番を合わせてみました
image.png

ヘッダとデータがそろいました！
image.png

ひとまず完成

リスト
image.png

フォーム
image.png

所感

結構時間がかかりました・・・
image.png
そもそも設計思想が違うのでしかたないかなと思います。
ただ、インシデント管理の画面はできたと思います。

操作に慣れてくるとある程度直感的に開発できるかと思います。ServiceNowに慣れていると設定箇所が多く結構戸惑います。

あと、こまったらWidgets Treeを使うと良さそうです。

次回

よく使いそうなカラムタイプとかまとめようかと思います

1
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
1
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?