オーバーレイとは、背後に直前の画面を表示させながら次の情報を上に重ねて表示できる画面のことを言います。
例えば項目を設定する場面で、設定元の画面を背後に見せながら選択肢を表示する場合に使いやすい画面デザインとなります。
構築方法
①Magic側
オーバーレイ画面で表示させる場合、Magic側では以下の設定を行います。
オーバーレイ画面とは別のプログラム上にて、ボタンをクリックすることで開く画面として作成します。
- オーバーレイで表示させたいプログラムを用意する(既存or新規)
※サブタスクとして用意することも可能 - 該当のプログラムから「フォーム」画面を開く
- 画面右カラムにある「プロパティ」の中から「ウィンドウタイプ」を探し「オーバーレイ」を選択する
- ①で用意したプログラムとは別のプログラム上に①を開くためのボタンを配置する
- 「ロジック」画面でボタンへの動作を記述する
- イベント＞内部＞クリック
- コール＞プログラムorサブタスク(用意したプログラムによる)＞該当のプログラムをコール
- 「フォーム」にて呼び出すボタンを配置する
- 保存してプログラム一覧画面へ戻り、SmartUXを開く
SmartUX側
SmartUXへ書き出した時点ではオーバーレイ画面の幅と高さが固定されています。
ブラウザの画面サイズに合わせて表示幅が可変できるように「％」単位で設定します。
該当のコンポーネントを追加(新規作成の場合のみ)
コンポーネントの追加方法は以下のリンク先をご覧ください
新規プログラムを追加する方法（②SmartUX側 ）
オーバーレイ画面の表示サイズを変更する
「すべてのファイル」メニューの中から該当するプログラム名フォルダを探す
プログラム名フォルダの中から「プログラム名.component.ts」ファイルを開く
幅の設定「private static readonly width: string = “300px”;」と
高さの設定「private static readonly height: string = “300px”;」を探す
「“300px”」が幅のサイズなので「“95%”」と書き換える
※ %の数字は内容によって変更します。100%ではオーバーレイが全画面表示になり、数字が小さくなるほどオーバーレイ部分が狭くなります。
見た目の整え方
広げてみた際に上部や左右の余裕がなく、右上にある「戻る」ボタンと被ってしまっている場合は余白のクラスを追加します。
クラス追加によるデザインの変更方法について詳しくは以下のリンクをご覧ください。
コメント
0件のコメント
サインインしてコメントを残してください。