LoginSignup
4
0
@taka_junkstoryin株式会社メディアテック

【OutSystems】基礎編：エンティティと画面を作成する

Last updated at Posted at 2024-06-03

対象

  • OutSystems を初めて触る方

目的

  • OutSystemsの認定試験である「Associate Reactive Developer (OutSystems 11)」の受験にあたり、基礎的な画面作成手順を復習する

※ なお、OutSystems はオンライントレーニングが充実しているのでオススメ。

使用するツール類

  • OutSystems Service Studio 11
  • Excel for the web (Microsoft 365 無料版) ※通常のExcelでも可

完成後イメージ

image.png
image.png

手順

1. Service Studio で新しいアプリケーションを作成

(ボタンを押していくだけなのでスクリーンショットのみ)
image.png
image.png
image.png
image.png
image.png

空のアプリケーションが作成された状態
image.png

2. Entity とデータの作成

Excel でデータを作成する。
image.png

Dataタブ > Entities > Database を右クリックし、 Import New Entities from Excel をクリックする。
image.png

Excel のシート名(ここでは「Employee」)が Entity 名になる。
image.png

Import ボタンを押すと Entity が作成される。
image.png

型や桁数は OutSystems によって自動で選択される。
image.png

Publish を行うと、データが表示される。
image.png

補足 (Excel 上のデータを変更したいとき)

Excel を読み込んだ際、データを登録するための Timer、Server Action、Structure も同時に作成される。
Server Action を確認すると、データが存在しない場合のみ Excel から登録していることがわかる。
image.png

  • データを変更したいとき
    データをすべて消してから、 Change Resource を行う。
    image.png
    image.png

  • 列を追加したいとき
    Excel 上で列を追加する。(ここでは「DepartmentCode」)
    image.png
    「Add Entity Attribute」で「DepartmentCode」列を追加する。(新しいファイルで Change Resource するだけでは列が追加されないので、手動で追加する。)
    image.png
    Resources にあるデータファイルを削除する。
    image.png
    Update Action to Bootstrap Data from Excel で、列を追加した新しい Excel ファイルを選択する。
    image.png
    DepartmentCode が登録されていることが確認できる。
    image.png

3. 画面の作成

Interface タブを選択し、 MainFlow を選択する。
image.png

Dataタブにある Employee をドラッグ＆ドロップする。
image.png

一覧画面と詳細画面が自動で作成される。
image.png

今回の目的を達成するにあたりログインは不要のため、一覧画面と詳細画面の Roles > Anonymous にチェックをつける。
image.png

ブラウザで表示して確認する。
基本的なメンテナンス機能は自動で実装されている。
image.png
image.png

4. 日本語化

画面上のラベルを変更することでも対応できるが、ここではリソースファイルを使用した多言語Webアプリケーションを想定する。
Export > Language Resouces To Excel でリソースファイルをダウンロードする。
image.png

ダウンロードした Excel ファイルに ja-JP 列を新しく追加し、日本語の内容を記載する。
image.png

Multilingual Locales を右クリックし、 Import Language Resouces でリソースファイルを読み込む。
image.png

ロケールの設定を日本語にするため、 Employees 画面の On Initialize アクションを作成する。
image.png

On Initialize アクションで、 SetCurrentLocale アクションを呼び出し、引数に "ja-JP" を指定する。
image.png
image.png

ブラウザで画面を表示し、日本語化されたことを確認する。
image.png
image.png

4
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
4
0