Demo
English User Guide

日本語ユーザーガイド

画面開発

(1) 必要な要件

  • OS: Windows
  • ブラウザー: Chrome (バージョン 90 またはそれ以上)
  • 画面解像度: 1920 X 1080

覚えておきたい規則

  • < > → ホバーまたは選択などの動作
  • [ Italic ]    → 入力する値
  •   → 各長方形タグの色は、ノートセクションのテキストの色に対応
  • Text : → 画像内のフィールド
  • ⌨ → キーボード入力
  • ☑ → チェックボックス
  • ➤    → マウスクリック
  • 🔎 → 検索

(2) タスク : 従業員リストスクリーンの作成

(3) 目的

SOVAプラットフォームで、既存のテーブルemployee_masterを使って、組織の従業員リストを様々な詳細とフィルターで表示する画面を作成します。SOVAでは、以下のような主なステップを踏むことで、ユーザーの要求を実現するために、UIやロジックをカスタマイズすることができます。

→ UIデザイン

→ Write Logic

→ ビルドとデプロイ

(4) ログイン

SOVAプラットフォームの入り口です。ユーザーは認証情報を入力してログインし、プラットフォームを利用してアプリケーションを作成します。

ログイン情報:

URL : <use given url>

ユーザーネーム : [<UserID>]

パスワード : [<XXXXXX>]

(5) ホーム スクリーン

オブジェクトデザイナーは、オブジェクトの作成と作成されたオブジェクトの表示に使用されます。（テーブル、ビュー、スクリーン、API、バッチ、ルール、ライブラリーなど）

また、オブジェクトデザイナーには、既に作成されたオブジェクトに対して、編集、削除、コピーなどのオプション機能があります。

ステップ : 

  • ➤ ホームボタンの隣にあるアイコンをクリックしてメインナビゲーションを開きます。
  • ➤ オブジェクトデザイナーをクリックしてオブジェクトデザイナースクリーンを開きます。

(6) オブジェクト デザイナー

スクリーンのテンプレートを選択して新しいスクリーンを作成します。

ステップ : 

  • 追加ボタン : 画面右下の「＋」アイコンにマウスオーバーします。< ホバー > – アイコンが表示されます。



(7) オブジェクト デザイナー

スクリーン作成画面を開きます。

ステップ:

  • スクリーンの作成 : ➤ スクリーン作成アイコンをクリックすると（上図赤でマークされた箇所）、スクリーン作成画面が表示されます。

(8) 製品 セレクター

製品セレクターダイアログに、プロダクト名とモジュール名を入力します。

 

ステップ:

  • プロダクト : ⌨[Test Project] – 一覧から [ TestProduct ] を選択します。
  • モジュール : ⌨[Test Module] – 一覧から [ TestModule ] を選択します。
  • OK : ➤ [OK] をクリックして、プロダクトを選択します。

 

(9) スクリーン作成

リリースバージョン、ファンクション名、説明を入力して、スクリーンフローのリストレイアウトを選択します。

ステップ:

  • リリースバージョン : ⌨[ 1.0.0 ]  一覧から [ 1.0.0  OPEN ] を選択します。
  • 機能名称 : ⌨[ Employee ]を入力。 このファンクション名がすでにシステム内に存在する場合は、別のファンクション名を入力してください。
  • 説明 : ⌨[ Creation of Employee List screen ]を入力。
  • スクリーンフロー :  ➤ スクリーンフローの下にある [+] をクリックして、スクリーンレイアウトダイアログを開きます。

(10) スクリーン レイアウト

リストのレイアウトを選択して保存します。

ステップ:

  • 一覧 : ➤  [一覧] をクリック – スクリーンレイアウトがスクリーンフローの下に追加されます。
  • 保存 : ➤  [保存] をクリック – 確認画面が表示されます。
  • ➤ 確認画面の [はい] をクリック – 変更リクエスト画面が表示されます。

用途:

リストのレイアウトを選択すると、デフォルトのレイアウトがUIに追加されます。

(11) 変更リクエスト ダイアログ

オブジェクトの作成や変更の際には、変更内容を記録するために変更リクエストが作成されます。

作成ボタンをクリックして、スクリーンの変更リクエストIDを作成します。

ステップ:

  • タイトル : ⌨[ <Append training id>_Employee List ]を入力。
  • 説明 : ⌨[ Creation of Employee List screen ]を入力。
  • 作成 : ➤ [作成] をクリック – スクリーンの変更リクエストIDを生成します。

(12) スクリーン作成

コンポーネントの属性やスタイルを追加してユーザーインターフェースを設計するためのUIデザイナーを開きます。

 

ステップ:

  • リスト レイアウト : ➤ スクリーンレイアウト上で右クリックし、コンテキストメニューリストを開きます。
  • UIデザイナーを開く : ➤ [UIデザイナーを開く] をクリック – UIデザイナーページを開きます。

(13) UI デザイナー

以下のコンポーネントは、デフォルトでリストレイアウトに表示されます。

  • サイドメニュー
  • ヘッダールーム
  • ヘッダー左エリア
  • ヘッダー中央エリア
  • ヘッダー右エリア
  • 行

(14) UI デザイナー

ファセットコンポーネントをサイドメニューにドラッグ＆ドロップします。

ステップ:

  • 検索 : 検索バーに ⌨[ Facet ] と入力- ファセットコンポーネントが表示されます。
  • < ドラッグ&ドロップ > : ファセットコンポーネントをサイドメニューにドラッグ&ドロップします。

(15) UI デザイナー

ファセットコンポーネントのダイアログの表示を開きます。

ステップ:

  • ファセットコンポーネント : ➤➤ サイドメニューにあるファセットコンポーネントをダブルクリックして、属性パネルにファセットプロパティを開きます。
  • ビュー/テーブル : ➤ 属性パネルの [ビュー/テーブル] をクリックして、ダイアログの表示ボックスを開きます。
  • ビュー/テーブル :ビュー/テーブルに ⌨[ employee_master ]を入力 – 一覧から [ employee_master ] を選択します。

用途:

ダイアログの表示は、ユーザーが複数のコンポーネントや複数の子要素コンポーネントをUIに挿入するのに役立ちます。

(16) ダイアログの表示

テーブルデータが表示され、リストから目的のコンポーネントを選択します。

今回の例では、従業員IDと呼称をチェックして、これらのフィールドをファセットで使用します。

ステップ:

  • 従業員 ID : 従業員 IDの横にあるチェックボックスを☑ 
  • 呼称 : 呼称の横にあるチェックボックスを☑ 
  • OK : ➤ [OK] をクリック- ファセットコンポーネントに選択したテーブルのデータを読み込みます。

(17) UI デザイナー

インボックスリストコンポーネントを行の中にドラッグ＆ドロップします。

ステップ:

  • 検索 : コンポーネントパネルの検索バーに ⌨[ Inbox List ]を入力 – インボックスリストコンポーネントが表示されます。
  • < ドラッグ&ドロップ > : インボックスリストコンポーネントを行コンポーネントにドラッグ＆ドロップします。

 

(18) ダイアログの表示

インボックスリストコンポーネントのダイアログの表示を開きます。

ステップ:

  • インボックスリスト : ➤➤ 行のインボックスコンポーネントをダブルクリックすると、属性パネルにインボックスリストのプロパティが表示されます。

  • ビュー/テーブル : ➤ プロパティの [ビュー/テーブル] をクリックすると、ダイアログの表示ボックスが表示されます。

  • ビュー/テーブル : ビュー/テーブルに ⌨[ employee_master ] を入力一覧から [ employee_master ] を選択します。

(19) ダイアログの表示

ダイアログの表示で必要なテーブルデータを選択します。

ステップ:

  • すべて選択 :  カラムのエイリアス名の横にあるチェックボックスを☑ して、チェックした列をインボックスリストコンポーネントに表示します。
  • OK :  ➤ [OK] をクリックすると変更内容が登録され、ダイアログの表示ボックスが閉じます。

(20) UI デザイナー

インボックスリスト列の幅を更新します。

 

ステップ:

  • 子要素の属性 : 属性パネル内で ➤ [子要素の属性] をクリックすると、子要素の属性タブが開きます。
  • 利用可能な子要素 : 利用可能な子要素のところで ➤ ドロップダウンリストの中から [ 従業員名 ] を選択します。
  • 検索               : 属性パネルの検索バーで、🔎[ width ] を検索 – Widthのフィールドが表示されます。
  • Widthのフィールド : Widthのところで ⌨[ 350 ] と入力 – 従業員名の列幅を更新します。

(21) UI デザイナー

スクリーンの最終的なデザインにしたがって、従業員の画像をリストに表示します。これは次のような操作で行います。

 

属性欄で「Manifest Name」を検索します。

 

ステップ:

  • 検索 : 属性パネルの検索バーで 🔎[ Manifest Name ] を検索 – Manifest Nameフィールドが表示されます。
  • Manifest Name : Manifest Name欄でドロップダウンリストの中から [ 画像レンダラー ] を➤ クリックして選択します。

 

用途:

従業員の画像をリストに表示します。

(22) UI デザイナー

スクリーンの最終的なデザインでは、リストのタグで従業員のアクティブステータスが表示されます。これは次のような操作で行います。

Manifest Nameを検索して、インボックスリストの列をタグレンダラーに設定します。

ステップ:

  • 利用可能な子要素 : 利用可能な子要素のところで [ アクティブステータス ] を➤ クリックして選択します。 – 利用可能な属性データとスタイルデータが表示されます。
  • 検索 : 検索バーで 🔎[ Manifest Name ] を検索 – Manifest Nameフィールドが表示されます。
  • Manifest Name : Manifest Name欄で [ タグレンダラー ] を➤ クリックして選択します。 – タグレンダラーの値がアクティブステータス列に設定されます。

用途:

リスト内のタグを持つ従業員のアクティブステータスを表示します。

(23) UI デザイナー

アクティブステータスの列を中央に配置します。

ステップ:

  • 検索 : 属性パネルの検索バーで 🔎[ Data Align ] を検索 – Data Alignフィールドが表示されます。
  • Data Align : Data Align欄で [ 中央 ] を➤ クリックして選択します。- アクティブステータス列が中央に配置されます。
  • ウィジェットアイコン : ➤ >>をクリックして、属性パネルを閉じます。

 

(24) UI デザイナー

作成したスクリーンを保存するには、［保存］ボタンをクリックします。スクリーンの左下に、変更が保存されたことを示すメッセージがポップアップ表示されます。

ステップ:

  • 保存 : ツールバーの中の［保存］ボタンを ➤ クリックします。 – UIデザイナーが保存されます。
  • ポップアップメッセージ : 「正常に保存されました」というポップアップメッセージが表示されます。

(25) UI デザイナー

ヘッダー左のエリアに「Close Button」をドラッグ＆ドロップします。

ステップ:

  • 検索 : コンポーネントパネルで 🔎[ close ] を検索 – Close Buttonが表示されます。
  • < ドラッグ&ドロップ > : アプリケーションキャンバスの左ヘッダーエリアにClose Buttonをドラッグ＆ドロップします。 – 左ヘッダーエリアに閉じるボタンが表示されます。

(26) UI デザイナー

「Status Label」を閉じるボタンの右側にドラッグ＆ドロップします。

ステップ:

  • 検索 : コンポーネントパネルで 🔎[ Stats Label ] を検索 –  Status Labelが表示されます。
  • < ドラッグ&ドロップ > : Status Labelをアプリケーションキャンバスの左ヘッダーエリア（閉じるボタンの右側）にドラッグ＆ドロップします。    – ステータスラベルコンポーネントが、左ヘッダーエリアに表示されます。

用途:

リストのアイテム数を表示します。

(27) UI デザイナー

中央ヘッダーエリアに「Search Text Input」コンポーネントをドラッグ＆ドロップします。

ステップ:

  • 検索 : コンポーネントパネルで 🔎[ Search Text Input ] を検索 – Search Text Inputコンポーネントが表示されます。 
  • < ドラッグ&ドロップ > : アプリケーションキャンバスの中央ヘッダーエリアにSearch Text Inputをドラッグ＆ドロップします。 – テキスト入力検索コンポーネントが、中央ヘッダーエリアに表示されます。

用途:

検索操作を行います。

(28) UI デザイナー

テキスト入力検索コンポーネントのテキスト例を設定します。

ステップ:

  • テキスト入力検索 : テキスト入力検索コンポーネントを➤➤ ダブルクリック – 右側に入力検索プロパティが表示されます。
  • 検索 : 属性パネルで 🔎[ Example Text ] を検索 – Example Textが表示されます。
  • Example Text : Example Textで ⌨[ 従業員ID、従業員名、呼称などで検索 ] – テキスト入力検索コンポーネントにテキスト例が更新されます。

(29) UI デザイナー

作成したスクリーンを保存するには、［保存］ボタンをクリックします。画面の左下に、変更が保存されたことを示すポップアップメッセージが表示されます。

ステップ:

  • 保存 : ツールバーの中の保存ボタンを ➤ クリックします。 – UIデザイナーが保存されます。
  • ポップアップメッセージ : 「正常に保存されました」というポップアップメッセージが表示されます。

(30) UI デザイナー

ロジックデザイナーページへ移動します。

ロジックデザイナー – デザインされたスクリーンにロジックを記述します。

ステップ:

  • ロジックデザイナー : ツールバーで [ロジックデザイナー ] を➤ クリックして選択します。– ロジックデザイナーページが開きます。

(31) ロジック デザイナー

従業員リストとして表示されるデータを保持するための変数を作成する必要があります。

そのためには、変数タブを開き、変数を作成します。

ステップ:

  • 変数 : 左パネルで ➤ 変数タブをクリックして、変数を作成します。
  • 追加ボタン :  [+] アイコンを ➤ クリックすると、変数の追加ダイアログボックスが開きます。

(32) ロジック デザイナー

データタイプと変数名を入力して変数を作成します。

ステップ:

  • データタイプ : データタイプのところに、 ⌨[ Integer ] を入力 – 一覧から [ Integer ] を選択する。
  • 変数名 : 変数名のところに、 ⌨[ Inboxlist0Offset ] を入力。
  • 保存して閉じる : [ Save and Close ] を➤ クリックし、変数を保存してダイアログボックスを閉じる。

用途:

オフセット値を格納するために、このオフセット値は、レイジーローディングを行う際に使用されます。

レイジーローディング : 最初に50個のアイテムをロードし、スクロールしてリストの最後に到達した後、50個のアイテムを追加します。

これにより、データを読み込む際のパフォーマンスが向上します。

(33) ロジック デザイナー

変数が正常に作成され、左パネルにメッセージがポップアップ表示されます。

(34) データベースからの従業員データの選択

このアプリケーションでは、以下の3つのケースに基づいて従業員リストのデータをリロードします。 

  1. スクリーンが読み込みされた場合 
  2. ファセットフィールドにいくつかの値が入力された場合
  3. 検索フィールドにいくつかの値が入力された場合

上記のいずれの場合も、検索条件に基づいてデータを選択し、スクリーンに一覧表示するという、バックグラウンドで行われる操作は同じです。

1つのサブルーチンを作成し、それを3つのケース全てで使うことができます。

それでは、サブルーチンを作成してみましょう。

(35) ロジック デザイナー

＋ボタンをクリックすると、サブルーチンを作成するためのサブルーチンダイアログボックスが表示されます。

ステップ:

  • サブルーチン : 左パネルでサブルーチンタブを ➤ クリックして、サブルーチンを作成します。 
  • 追加ボタン  : [+] アイコンを ➤ クリックして、サブルーチン作成ダイアログボックスを開きます。

(36) ロジック デザイナー

サブルーチン名を入力します。

ステップ:

  • サブルーチン名 : サブルーチン名に ⌨[ nnInboxList0Load ] を入力。
  • OK : [OK] を ➤ クリックして、サブルーチン名を保存します。

用途:

サブルーチンを作成することで、プログラムの中で特定のタスクを実行する必要がある場所で使用することができます。

(37) ロジック デザイナー

左パネルにサブルーチンが正常に作成されます。

(38) ロジック デザイナー

矢印の間をクリックすると、ブロックの説明が表示されます。

ステップ:

  • 矢印ボタン : 矢印の上で ➤ クリックし、ブロックを作成します。

用途:

新しいブロックを追加することで、ユーザーは異なるステートメントを入力することができます。

新しいステートメントを追加することで、ユーザーはさまざまな操作を行うことができます。

(39) ロジック デザイナー

入力キーワードの検索

ステップ:

  • 作成されたブロックの内側を➤➤ ダブルクリックすると、 一覧が表示されます。
  • 検索 : 🔎[ Input ] を検索 – 一覧から [ INPUT ] を選択します。

キーワード:

INPUT – サブルーチンの入力パラメータを取得します。

用途:

オフセット値に基づいて、選択キーワード からデータを取得します。

(40) ロジック デザイナー

パラメーター キーの値を入力します。

ステップ:

  • パラメーター キー : パラメーター キーのところに ⌨[ #InboxList0offset ] と入力。
  • OK : [OK] を➤ クリックすると、入力パラメータを取得し、Inputダイアログボックスを閉じます。

用途:

この値は、レイジーローディングの実行に使用されます。

(41) ロジック デザイナー

リスト変数を作成します。

ステップ:

  • 変数 : 左パネルの変数を ➤ クリックして、変数を作成します。
  • 追加ボタン : [+] アイコンを ➤ クリックすると、変数追加ダイアログボックスが表示されます。

(42) ロジック デザイナー

リスト値の変数を作成します。

ステップ:

  • データタイプ : データタイプに ⌨[ List ]と入力。一覧から [ Integer ] を選択します。
  • 変数名 : 変数名に ⌨[ Inboxlist0FacetList ]と入力。
  • 保存して閉じる :  [ 保存して閉じる ] を ➤ クリックすると、変数が保存され、ダイアログボックスが閉じます。

用途:

ファセットの変更に基づいてファセット条件を割り当てるために変数を作成します。

(43) ロジック デザイナー

新しい変数が追加され、メッセージがポップアップ表示されます。

(44) ロジック デザイナー

サブルーチンフローで新規ブロックを作成します。

ステップ:

  • サブルーチン : 左パネルのサブルーチンタブを ➤ クリックします。 – サブルーチンタブが表示されます。
  • nnInboxlistLoad0 : nnInboxlistLoad0 を ➤ クリックします。  – サブルーチンフローが表示されます。
  • 矢印 : ブロックの下の矢印を ➤ クリックします。  – 新しいブロックが作成されます。

(45) ロジック デザイナー

条件選択 キーワードを検索します。

ステップ:

  • 検索 : 新しく追加されたブロックをダブルクリックして、 ⌨[ select_condition ] と入力 – 一覧から [ SELECT_CONDITION ] を選択します。

(46) ロジック デザイナー

ファセット操作のためにデータをマッピングする条件を記述します。

出力変数に値を格納します。

ステップ:

  • 説明 : 説明のところで ⌨[ Mapping the data ] と入力。
  • 出力変数 : 出力変数で ⌨[ #Inboxlist0FacetList ] と入力 – 一覧から [ #Inboxlist0FacetList ] を選択します。
  • テーブル/ビュー : テーブル/ビューのところで ⌨[ employee_master ] と入力 – 一覧から [ employee_master ] を選択します。
  • 選択 : 削除操作を行うために、カラム名で [employee_name] を選択します。
  • 削除 : [Delete] を➤ クリックして、 [employee_name] 列を削除します。
  • 選択 : 削除操作のために、カラム名で [dob, salary, date_of_join, status] を選択します。
  • 削除 : [Delete] を ➤ クリックして、 [dob, salary, date_of_join, status] 列を削除します。
  • OK : [OK] を ➤ クリックします。- カラム名がファセットコンポーネントにマッピングされ、条件マッピングダイアログが閉じられます。

キーワード:

SELECT_CONDITION – ファセットに適用されたフィルターに基づいて、テーブル／ビューのデータをフィルタリングするために使用されます。

用途:

条件に基づいて、カウントを取得し、データを選択します。

(47) ロジック デザイナー

カウントキーワードを検索します。

ステップ:

  • 矢印ボタン : Select_Conditionの下の矢印を ➤ クリックします。 – ブロックが作成されます。
  • 検索 : 新たに作成したブロックを➤➤ダブルクリックして、 ⌨[ count ] と入力 – 一覧から [ COUNT ] を選択します。

キーワード:

COUNT – 指定された条件でデータベースからレコードの合計数を返します。

用途:

COUNTキーワードでレコードを取得し、合計レコードに割り当てます。

(48) ロジック デザイナー

「Count」キーワードを使用し、テーブル内のデータ数を取得します。

ステップ:

  • 説明 : 説明のところで、 ⌨[ Count list of data ] と入力。
  • テーブル名 : テーブル名で、 ⌨[ employee_master ] と入力  – 一覧から [ employee_master ] を <選択> します。
  • 出力変数 : [employee_master] をテーブル名に選択すると、出力変数に [ COUNTEmployeeMaster ] が自動的に表示されます。 
  • 条件の選択 : 条件の選択で、⌨[ #InboxList0FacetList ] と入力 – 一覧から [ #InboxList0FacetList ] を <選択> します。
  • 削 除: [x] を ➤ クリックして、不要な条件を削除します。

用途:

ファセットの条件に応じてカウントを取得します。

(49) ロジック デザイナー

データ検索に基づいてカウントを設定します。

ステップ:

  • データ検索 : データ検索タブを ➤ クリック – データ検索タブがフォーカスされて表示されます。
  • ターゲットカラム : ターゲットカラムを ➤ クリック – カラムのリストが表示されます。employee_id, employee_name, designation, dob, salary, status, dojの各カラムを選択し、検索操作を行います。
  • ソースの検索 : ソースの検索で、 ⌨[ $searchTextInput0 ] を入力-  一覧から [ $searchTextInput0 ] を <選択> します。
  • OK : [OK] を ➤ をクリック – データがカウントキーワードに保存され、キーワードダイアログが終了します。

用途:

検索条件に基づいてレコードをカウントします）。

(50) ロジック デザイナー

ブロック内にキーワードを追加します。

ステップ:

  • [ + ] : カウントブロックの中の [+] を ➤ クリックします。 – 新しいブロックが追加され、新しく作られたブロックにフォーカスが置かれます。

(51) ロジック デザイナー

「Assign」キーワードを検索します。

ステップ: 

  • 検索 :  🔎[ Assign ] を検索 – 一覧から [ Assign ] を選択します。

キーワード:

ASSIGN – 総記録へカウントデータを割り当てます。

(52) ロジック デザイナー

カウント結果をスタッツラベルに表示します。

ステップ:

  • 説明 : 説明に、 ⌨[ Assign Count to Total Records ] と入力。
  • 変数名 : 変数名に、 ⌨[ $総記録 ] と入力 – 一覧から[ $総記録 ] を <選択 > すると、変数名が設定されます。
  • [ #COUNTEmployeeMaster ] : 追加のところで、 ⌨[ #COUNTEmployeeMaster ] を入力 –  [ #COUNTEmployeeMaster ] を < 選択 > すると、カウントされた値がスタッツラベルに設定されます。
  • OK : [OK] を ➤ クリックします。- データはキーワードの割り当てに保存され、キーワードダイアログボックスは閉じられます。

用途:

カウントキーワードの出力変数を総記録コンポーネントに割り当てます。

(53) ロジック デザイナー

作成したスクリーンを保存するには、［保存］ボタンをクリックします。スクリーンの左下に、変更が保存されたことを示すポップアップメッセージが表示されます。

ステップ:

  • 保存 : ツールバーの中の保存ボタンを ➤ クリックします。 – ロジックデザイナーが保存されます。
  • ポップアップメッセージ : 「正常に保存されました」というポップアップメッセージが表示されます。

(54) ロジック デザイナー

「Select」キーワードの検索をします。

ステップ:

  • 矢印ボタン : Assignブロックの下の矢印を ➤ クリックします。- ブロックが作成されます。
  • 検索 : 作成されたブロックをダブルクリックし、 ⌨[ Select ] と入力 – 一覧から [ SELECT ] を選択します。

キーワード:

SELECT – データベースから様々なフィルターを使ってデータを選択するために使用します。

用途:

出力画面のリスト を読み込むためには、データベースからのデータが必要です。

SELECTキーワードを使って、データベースからデータを取得し、インボックスリストコンポーネントにデータを読み込むことができます。

(55) ロジック デザイナー

Selectキーワードを使ってテーブルからデータを取得し、出力変数に格納します。

ステップ:

  • テーブル名 : テーブル名に、 ⌨[ employee_master ] と入力 – 一覧から[ employee_master ] を <選択>します。
  • 出力変数 : 出力変数に [ SELECTEMPLOYEEMASTER ] が自動的に表示されます。
  • オフセット : オフセットに、 ⌨[ #InboxList0Offset ] と入力 – [ #InboxList0Offset ] を<選択> すると、オフセット値が設定されます。
  • チェックボックス : カラムを選択では、すべてのカラム名が自動的にチェックされます。

用途:

データベースからレコードを取得し、出力変数に格納します。

(56) ロジック デザイナー

選択条件に基づいてテーブルから出力を取得します。

ステップ:

  • 条件 : 条件タブを ➤ クリックします。 – 条件タブが表示されます。
  • 条件の選択 : 条件の選択に、 ⌨[ #InboxList0FacetList ] と入力 – [ #InboxList0FacetList ] を <選択> すると、選択条件の値が設定されます。

用途:

ファセットの条件に基づいてレコードを選択するための条件を追加します。

(57) ロジック デザイナー

アドバンスト条件タブでの検索オプションの設定を行います。

ステップ:

  • アドバンスト : アドバンスト条件タブを ➤ クリックします。 – アドバンスト条件タブがフォーカスされて表示されます。
  • ソースの検索 : ⌨[ $searchTextInput0 ] を入力 – 一覧から [ $searchTextInput0 ] を <選択> します。
  • ターゲットカラム : ターゲットカラムを ➤ クリックします。- カラムのリストが表示されます。検索操作を行うには、employee_id、employee_name、designation、dob、salary、status、dojの各カラムを選択します。
  • OK : [OK] を ➤ クリックします。 – Selectキーワードにデータが保存され、キーワードダイアログボックスが終了します。

用途:

フィルター操作を行うカラムを追加します。

(58) ロジック デザイナー

「Load」キーワードを検索します。

ステップ:

  • [ + ] : 選択ブロックの中の [+] を➤ クリックします。 – 新しいブロックが作成されます。
  • 検索 : 新しく作成されたブロックを➤➤ダブルクリックして、 ⌨[ Load_collection ] と入力 – 一覧の中から [ LOAD_COLLECTION ] を選択します。

キーワード:

Load – 選択したデータをインボックスコンポーネントに読み込みます。

用途:

選択されたレコードを、レンダラーに基づいてインボックスリストコンポーネントに読み込みます。

(59) ロジック デザイナー

インボックスリストコンポーネントにテーブルデータを読み込みます。

ステップ:

  • 説明 : 説明に、 ⌨[ Load data in Inbox List ] と入力します。 
  • ターゲットコンポーネント : ターゲットコンポーネントに、 ⌨[ $InboxList0 ] と入力 – 一覧から [ $InboxList0 ] を選択します。
  • データの強調表示 : データの強調表示に、 ⌨[ $SearchTextInput0 ] と入力 – 一覧から [ $SearchTextInput0 ] を選択します。
  • レンダラーアイコン : SELECTEmployeeMaster.employeeName の横のレンダラーアイコンを➤➤ ダブルクリックします。- レンダラーのプロパティが表示されます。

用途:

インボックスリストコンポーネントのSELECTキーワードの出力変数に基づいて、各カラムのデータを読み込みます。

(60) ロジック デザイナー

イメージレンダラーのプロパティを設定します。

ステップ:

  • Image Source : Image Sourceカラムの下を ➤➤ ダブルクリックして、 ⌨[ #SELECTEmployeeMaster.employeeName ] と入力 – 一覧から [ #SELECTEmployeeMaster.employeeName ] を選択します。

用途:

従業員の名前の頭文字を画像として表示します。

(61) ロジック デザイナー

イメージレンダラーのプロパティを設定します。

ステップ:

  • Round Type : Round Typeカラムの下を ➤➤ ダブルクリックします。- 一覧が表示されます。
  • Round Type : [ true ] – 一覧から [ true ] を選択します。
  • Data : Dataカラムの下を ➤➤ ダブルクリックします。 – 一覧が表示されます。
  • Data : ⌨[ #SELECTEmployeeMaster.employeeName ] を入力 – 一覧から [#SELECTEmployeeMaster.employeeName ] を選択します。 – Dataフィールドに値が設定されます。
  • OK : ➤ クリックします。 – レンダラーオプションが更新されます。

用途:

画像をラウンドタイプで表示し、従業員名カラムのレコードをインボックスリストコンポーネントに表示させます。

(62) ロジック デザイナー

タグレンダラーのプロパティを設定します。

ステップ:

  • レンダラーアイコン : 値/フィールドカラムの下の [ #SELECTEmployeeMaster.status ] へ行き、横にあるレンダラーアイコンを ➤➤ ダブルクリックします。 – レンダラーオプション画面が表示されます。

(63) ロジック デザイナー

アクティブステータスカラムのタグレンダラーを設定します。

ステップ:

  • 条件使用 : 条件使用を ➤ クリック – 条件カラムが表示されます。
  • 追加 : [ 追加 ]を ➤ クリックします。– 行が２つ追加されます。
  • Data : Dataカラムの下の１番目の行を ➤➤ ダブルクリックし、 ⌨ [ Active ] と入力します。
  • Data         : Dataカラムの下の２番目の行を ➤➤ ダブルクリックし、  ⌨ [ Inactive ]と入力します。
  • Condition : アクティブの隣のレンダラーアイコンを ➤ クリックします。- レンダラー条件ダイアログボックスが表示されます。

用途:

ブーリアン値に基づいてステータスを表示します。

(64) ロジック デザイナー

タグレンダラー条件の設定をします。

ステップ:

  • 追加 : 追加を ➤ クリック – ドロップダウンリストが表示されます。
  • [ Condition ] を選択します。- Conditionフィールドが表示されます。 
  • １番目のボックスに、 ⌨[ #SELECTEmployeeMaster.status ]と入力します。 – 一覧が表示されます。
  • [ #SELECTEmployeeMaster.status ] を選択します。 – 値が設定されます。
  • ２番目のボックスを ➤ クリックし、ドロップダウンリストから [ = ] (equal to operator) を選択します。- 値が選択されます。
  • ３番目のボックスに、 ⌨[ true ] と入力します。- 一覧が表示されます。
  • [ true ] を選択します。 – 値が選択されます。
  • OK : [OK] を ➤ クリックします。- タグレンダラー条件が設定されます。

用途:

ブーリアン値がtrueに設定されている場合、ステータスカラムはActiveとして表示されます。

(65) ロジック デザイナー

非アクティブデータのタグレンダラー条件を開きます。

ステップ:

  • レンダラーアイコン : Inactiveの隣のレンダラーアイコンを ➤ クリックします。 – レンダラー条件ダイアログボックスが表示されます。

(66) ロジック デザイナー

タグレンダラー条件の設定をします。

ステップ:

  • 追加 : ➤ クリックします。 – ドロップダウンリストが表示されます。
  • [ Condition ] を < 選択 > します。- Conditionフィールドが表示されます。
  • ⌨[ #SELECTEmployeeMaster.status ] を < 入力 > します。- 一覧が表示されます。
  • [ #SELECTEmployeeMaster.status ] を < 選択 > します。 – 値が設定されます。
  • ドロップダウン フィールドで、[ = ] (equal to operator)を ➤ クリックして選択します。- 値が設定されます。
  • ⌨[ false ] を< 入力 >します。- 一覧が表示されます。
  • 一覧から [ false ] を < 選択 > します。
  • OK : ➤ クリックします。 – タグレンダラー条件がセットされます。

用途:

ブーリアン値がfalseに設定されている場合、ステータスカラムはInactiveと表示されます。

(67) ロジック デザイナー

データに基づいて背景色と文字色を設定します。

ステップ:

  • Background Color : Activeデータフィールドで、Background colorフィールドを ➤➤ ダブルクリックします。- 一覧が表示されます。
  • Background Color : ⌨[ “#19be6b” ] と入力 – 一覧から [ “#19be6b” ] を選択します。
  • Background Color : InActiveデータフィールドで、Background colorフィールドを ➤➤ ダブルクリックします。- 一覧が表示されます。
  • Background Color : ⌨[ “#cccccc” ] と入力 – 一覧から [ “#cccccc” ] を選択します。
  • Text Color : Activeデータフィールドで、Text Colorフィールドを ➤➤ ダブルクリックします。- Text Colorフィールドにカーソルを表示させます。
  • Text Color : ⌨[ “#ffffff” ] と入力 – 一覧から [ “#ffffff” ] を選択します。
  • Text Color : Inactiveデータフィールドで、Text Colorフィールドを ➤➤ ダブルクリックします – Text Colorフィールドにカーソルを表示させます。
  • Text Color : ⌨[ “#000000” ] と入力 – 一覧から [ “#000000” ] を選択します。
  • OK : ➤ クリックします。 – Activeステータスカラムのレンダラーオプションを更新します。

用途:

ActiveとInactiveステータスの背景色を追加します。

(68) ロジック デザイナー

インボックスリストデータを保存します。

ステップ:

  • OK : ➤ クリックします。 – 更新されたデータはロードコンポーネントに保存され、ロードコンポーネントは終了します。

(69) ロジック デザイナー

作成したスクリーンを保存するには、［保存］ボタンをクリックします。スクリーンの左下に、変更が保存されたことを示すポップアップメッセージが表示されます。

ステップ:

  • 保存 : ツールバーの中の［保存］ボタンを ➤ クリックします。 – ロジックデザイナーが保存されます。
  • ポップアップメッセージ : 「正常に保存されました」というポップアップメッセージが表示されます。

(70) 適切な場所でのサブルーチンの呼び出し

以上の手順で、データの選択を行い、リストに表示するサブルーチンを作成しました。

次のスライドでは、以下のような場面でサブルーチンを呼び出して実行するロジックを書きます。

  1. 画面の読み込み時
  2. ファセットデータが変更された場合
  3. 検索データが入力された場合

(71) ロジック デザイナー

初期ロードをクリックして、「CALL_SUB」キーワードを検索します。

ステップ:

  • 初期ロード – ツールバーの中で、初期ロードを ➤ クリックします。 – 初期ロードフローが表示されます。
  • 矢印 ボタンを ➤ クリックします。 – ブロックが作成されます。
  • 検索 : ブロックを➤➤ ダブルクリックして、 ⌨[ call_sub ] と入力 – 一覧から [ CALL_SUB ] を選択します。

キーワード:

CALL_SUB – サブルーチンの呼び出しに使用します。

用途:

ページの読み込み中にサブルーチンが呼び出されます。

(72) ロジック デザイナー

作成したサブルーチンの名前をサブルーチン名フィールドに入力し、OKをクリックします。

ステップ:

  • 説明 : 説明のところに、 ⌨[ Call Subroutine nnInboxList0Load ]を入力します。
  • サブルーチン名 : サブルーチン名に、 ⌨[ nnInboxList0Load ] を入力します。- 一覧から [ nnInboxList0Load ] を選択します。
  • OK : [OK] を➤ クリックします。- コールロジックが作成され、コールロジックダイアログが閉じられます。

(73) ロジック デザイナー

スクリーンフィールドで、「facetNavigation0」を右クリックし、「Facet_Change」イベントをクリックして、フィルター操作を行います。

ステップ:

  • スクリーンフィールド : スクリーンフィールドタブを ➤ クリックします。- スクリーンフィールドタブがフォーカスされて表示されます。
  • facetNavigation0 : facetNavigation0 を ➤ 右クリックします。- ファセットコンポーネントイベント一覧が表示されます。
  • FACET_CHANGE : FACET_CHANGE を ➤ クリックします。 – ファセットコンポーネントにファセット変更イベントが追加され、空のフローが表示されます。

 

用途:

ファセットフィルターに変更があった場合、ファセット変更イベントが発生します。

(74) ロジック デザイナー

新ブロックでサブルーチンを呼び出します。

ステップ:

  • 矢印を ➤ クリックします。 – ブロックが作成されます。
  • 検索 : 作成されたブロックを➤➤ ダブルクリックして、 ⌨[ call_sub ] を入力 – 一覧から [ CALL_SUB ] を選択します。

 

用途:

ファセット変更イベントが発生すると、サブルーチンが呼び出されます。

(75) ロジック デザイナー

作成したサブルーチン名をサブルーチン名フィールドに入力し、OKをクリックします。

ステップ:

  • 説明 : 説明のところに、 ⌨[ Call Subroutine nnInboxList0Load ] と入力します。
  • サブルーチン名 : サブルーチン名のところに、 ⌨[ nnInboxList0Load ] と入力 – 一覧から [ nnInboxList0Load ] を選択します。
  • OK : [OK] を➤ クリックします。- コールロジックが作成され、コールロジックダイアログが閉じられます。

(76) ロジック デザイナー

スクリーンフィールドで、「InboxList0」を右クリックし、「TABLE_BEFORE_LOAD」イベントをクリックします。

ステップ:

  • InboxList0 : 左パネル内で、 InboxList0 を ➤ 右クリックします。 – インボックスリストコンポーネントのイベント一覧が表示されます。
  • TABLE_BEFORE_LOAD : TABLE_BEFORE_LOAD を ➤ クリックします。 – Table Before loadイベントが追加され、空のフローロジックが表示されます。

 

用途:

レイジーロードを実行するために、垂直スクロールがインボックスリストの最後に到達したときにTABLE_BEFORE_LOADイベントが発生します。 

(77) ロジック デザイナー

「GET_COMP_ATTRIBS」キーワードを検索します。

ステップ:

  • 矢印を ➤ クリックします。 – ブロックが作成されます。
  • 検索 : 作成されたブロックを➤➤ ダブルクリックして、 ⌨[ Get_comp ] と入力 – 一覧から [ GET_COMP_ATTRIBS ] を選択します。

 

キーワード:

GET_COMB_ATTRIBS – 特定のコンポーネントの属性値を取得します。

 

用途:

インボックスリストコンポーネントの現在のアイテム数を取得します。これは、次のアイテムのセットを取得するために使用されます。

(78) ロジック デザイナー

インボックスリストコンポーネントから現在のカウント値を取得します。

ステップ:

  • 出力変数 : 出力変数のところに、 ⌨[ #InboxList0offset ] と入力- 一覧から [ #InboxList0offset ] を選択します。
  • コンポーネント : コンポーネントのところに、 ⌨[ $inboxList0 ] と入力 – 一覧から [ $inboxList0 ] を選択します。
  • 属性 : 属性のところに、 ⌨[ currentCount ] と入力 – 一覧から [ currentCount ] を選択します。
  • OK : [OK] を➤ クリックします。 – 現在のカウントデータが出力変数に格納され、属性取得ダイアログが終了します。 

 

用途:

インボックスリストコンポーネントの現在のカウントを取得し、その値を出力変数に格納します。

(79) ロジック デザイナー

新ブロックでサブルーチンを呼び出します。

ステップ:

  • GET_COMP_ATTRIBS ブロックの下の矢印を ➤ クリックします。 – ブロックが作成されます。
  • 検索 : 作成されたブロックを➤➤ ダブルクリックして、 ⌨[ call_sub ] と入力 – 一覧から [ CALL_SUB ] を選択します。

 

用途:

リストアイテムをロードするサブルーチンを呼び出します。

(80) ロジック デザイナー

作成したサブルーチン名をサブルーチン名フィールドに入力し、OKをクリックします。

ステップ:

  • 説明 : 説明のところに、 ⌨[ Call Subroutine nnInboxList0Load ] と入力します。
  • サブルーチン名 : サブルーチン名のところに、 ⌨[ nnInboxList0Load ] と入力します。
  • 値 : 値カラムの下を➤➤ ダブルクリックして、 ⌨[ #Inboxlist0Offset ] と入力し、 [ #Inboxlist0Offset ] を選択します。 – 値が選択されます。
  • OK : [OK] を➤ クリックします。 – コールロジックが作成されます。

 

用途:

サブルーチンのパラメータでオフセット値を渡します。

(81) ロジック デザイナー

スクリーンフィールドで「SearchTextInput0」を右クリックし、「INPUT」イベントをクリックします。

ステップ:

  • SearchTextInput0 : 左パネル内で、SearchTextInput0 を ➤ 右クリックします。 – 検索テキストインプットコンポーネントのイベント一覧を表示します。
  • INPUT :  INPUTを ➤ クリックします。 – 検索テキストインプットコンポーネントにINPUTイベントが追加され、空のフローロジックが表示されます。 

 

用途:

検索テキストインプットに値を入力すると、INPUTイベントが発生します。

(82) ロジック デザイナー

新ブロックでサブルーチンを呼び出します。

 

ステップ:

  • 矢印を ➤ クリックします。  – ブロックが作成されます。
  • 検索 : 作成されたブロックを➤➤ ダブルクリックして、 ⌨[ call_sub ] と入力 – 一覧から [ CALL_SUB ] を選択します。

 

用途:

INPUTイベントが発生すると、サブルーチンが呼び出されます。

(83) ロジック デザイナー

作成したサブルーチン名をサブルーチン名フィールドに入力し、OKをクリックします。

 

ステップ:

  • 説明 : 説明のところで、 ⌨[ Call Subrotuine nnInboxList0Load ] と入力します。
  • サブルーチン名 : サブルーチン名に、 ⌨[ nnInboxList0Load ] と入力 – 一覧から [ nnInboxList0Load ] を選択します。
  • OK : [OK] を➤ クリックします。- コールロジックダイアログボックスが閉じられます。

(84) ロジック デザイナー

スクリーンフィールドで「SearchTextInput0」を右クリックし、「CLEARED」イベントをクリックします。

 

ステップ:

  • SearchTextInput0 : 左パネル内で、 SearchTextInput0 を ➤ 右クリックします。 – 検索入力コンポーネントのイベント一覧を表示します。
  • Cleared : Clearedを ➤ クリックします。- 検索テキスト入力コンポーネントにClearedイベントを追加すると、空のフローロジックが表示されます。

 

用途:

検索テキスト入力の値をクリアすると、CLEAREDイベントが発生します。

(85) ロジック デザイナー

新ブロックでサブルーチンを呼び出します。

 

ステップ:

  • 矢印を ➤ クリックします。- ブロックが作成されます。
  • 検索 : 作成されたブロックを➤➤ ダブルクリックして、 ⌨[ call_sub ] と入力 – 一覧から [ CALL_SUB ] を選択します。

 

用途:

Clearedイベントが発生すると、サブルーチンが呼び出されます。

(86) ロジック デザイナー

コールロジックを作成します。 

 

ステップ:

  • サブルーチン名 : サブルーチン名のところに、 ⌨[ nnInboxList0Load ] と入力 – 一覧から [ nnInboxList0Load ] を選択します。
  • OK : [OK] を➤ クリックします。- 作成したサブルーチンを呼び出します。

(87) ロジック デザイナー

UIデザイナーページへ移動します。

 

ステップ:

  • UI デザイナー : ツールバーの中の [ UI デザイナー ] を ➤ クリックして選択します。 – UI デザイナーページが開きます。 

(88) スクリーンの保存

［保存］ボタンを押すと、作成したスクリーンが保存され、メッセージがポップアップ表示されます。

 

ステップ:

  • 保存 : ツールバーの中の［保存］を ➤ クリックします。 – UI デザイナーとロジックデザイナーが保存されます。
  • ポップアップメッセージ : 「正常に保存されました。」というメッセージがポップアップ表示されます。

 

用途:

UIデザイナーとロジックデザイナーを保存します。

(89) ビルド & デプロイ

アクティベートボタンをクリックすると、ビルドおよびデプロイのプロセスが開始されます。

 

ステップ:

  • アクティベートボタン : アクティベートボタンを ➤ クリックすると、ビルドおよびデプロイが開始されます。

(90) ビルド & デプロイ

ビルドおよびデプロイのステータスを表示します。

 

ステップ:

  • インフォメーションボタン : ➤ インフォメーションボタンをクリックすると、ビルドおよびデプロイメントプロセスのステータスが表示されます。ステータスは、各ステップが実行されるたびに自動的に更新されます。

(91) ビルド＆デプロイの進捗状況

ビルドおよびデプロイのステータスを表示します。

 

ステップが実行されている間は、ステータスが In Progress と表示されます。完了すると、Completedと表示されます。

(92) ビルド＆デプロイの進捗状況

ビルドおよびデプロイのステータスを表示します。

 

ステップが実行されている間は、ステータスが In Progress と表示されます。完了すると、Completedと表示されます。

(93) ビルド＆デプロイの進捗状況

ビルドおよびデプロイのプロセスが完了したら、ローンチボタン（赤いマークで表示されている箇所）をクリックして、デプロイされたアプリケーションを開きます。

(94) デプロイ完了スクリーン

デプロイ完了スクリーン

Platform

Solutions

Partners

Information

S2K2 Holdings Pte. Ltd.

101 Upper Cross Street
#05-57 People’s Park Centre Singapore 058357

www.s2k2holdings.com

S2K2 Holdings Pte. Ltd.

101 Upper Cross Street
#05-57 People’s Park Centre
Singapore 058357

www.s2k2holdings.com
Copyright © 2023 SOVA Platform. All Rights Reserved.
Linkedin Twitter Youtube Facebook