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

【Oracle APEX】アイテムレイアウトのあれこれ

Last updated at Posted at 2025-02-28

はじめに

ご覧いただいた方は、Oracle APEXを用いて画面開発を行っており、開発に苦労されている方かと思います。

本記事では、設定によって作成したアイテムを様々なレイアウトで表示する方法について記述したいと思います。

※本記事は全て日本語表記で翻訳されている名称を用いています。

目次

1.ラジオボタンの並び方
2.アイテムのラベル表示場所
3.テキスト・フィールドアイテムの入力制限

ラジオボタンの並び方について

ラジオボタンのアイテムを設定すると以下のような表示の仕方が存在します。
例1)
image.png

基本的に設定する箇所は赤色の枠線の「列の数」にて決定されます。
image.png

・「列の数」を「1」とした場合、例1)ラジオボタン1のように表示されます。

・「列の数」をラジオボタンの数と同数とした場合、例1)ラジオボタン2のように表示されます。

・特定の数で折り返して改行した状態で表示したい場合は、「列の数」を折り返したい数で設定となり、例1)ラジオボタン3のように表示されます。

アイテムのラベル表示場所について

一部抜粋となりますが、アイテムに付与出来るラベルの位置を調整することが可能となります。
例2)
image.png

・「テキストの中」に、ラベルを設定したい場合は、「外観」-「テンプレート」を「Optional - Floating」と設定してください。
image.png

・「テキストの上」に、ラベルを設定したい場合は、「外観」-「テンプレート」を「Optional - Above」と設定してください。
image.png

・「テキストの横」に、ラベルを設定したい場合は、「外観」-「テンプレート」を「Optional」と設定してください。
※なお、「Optional」とした場合は、緑色の枠線で記載されている「ラベル列スパン」を「1」以上に設定する必要があるため、注意してください。
image.png

テキスト・フィールドアイテムの入力制限について

「テキスト・フィールド」のアイテムとは、画面上で入力を行い、その値を使用して内部処理を実行することが出来るアイテムとなります。

また、OracleAPEXには「表示のみ」(読み取り専用)のアイテムも存在しているのに、なぜ「テキスト・フィールド」の入力を制限する設定を記述することに疑問を持たれる方もいらっしゃると思います。

私が開発を経験した中で、「表示のみ」アイテムに値を挿入する処理が存在しておりました。もし該当処理を実行しようとすると該当のアイテムへの加工を行う場合、APEXの画面上に値が登録されていても内部的なデータとして保管がされない為、エラーを引き起こす可能性があります。

それでは、実際の設定方法について記述したいと思います。

・読み取り専用としたいアイテムを作成後、「動的アクション」を1つ用意します。
 作成した動的アクションに「JavaScriptコードの実行」を指定した上で、「設定」-「コード」に以下のプログラムを記載します。
image.png

記述例
$('#アイテム名').prop('readonly', true);

上記設定を行うことで、画面が起動したタイミングに設定したアイテムが入力制限がかかる状態となります。

おわりに

本記事では、OracleAPEXの作成したアイテムを様々なレイアウトで表示する方法について記述させていただきました。
本記事が、どなたかの役に立てたのであれば幸いです。
本記事をご覧頂き、ありがとうございました。

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