業務ハックLab -とある情シスの備忘録-

とある情シスの備忘録的なものです。

【スポンサーリンク】

IT機器棚卸アプリを作ってみよう(InventoryConsecutiveCheckScreen編)

皆さん、こんにちは!
業務ハックLabのよーよんです。

今回で第5回目。ついに今回で最終回!!
引き続き、IT機器棚卸用のアプリ作成方法について案内していきますよ~。
今回は連続棚卸を行うInventoryConsecutiveCheckScreen編です!
前回のページはこちら~

yo-yon.hatenablog.com

それでは行ってみましょう~

InventoryConsecutiveCheckScreen

長ったらしいスクリーン名ですね。
我ながらセンスがない・・・
今回作成する画面ですが連続棚卸画面です。
前回まで作成していた画面はQRコードを読み込んで一つずつ棚卸をする画面でしたが
今回は機器一覧を表示し画面上で一気に棚卸をできるようにしていきます。

新しい画面の追加~アプリタイトル部作成

  1. 「ホーム」タブか「挿入」タブから「新しい画面」をクリック

    f:id:yo-yon:20211001192024p:plain

  2. 追加する画面の種類が表示されるので「空」をクリック

    f:id:yo-yon:20211001192038p:plain

  3. 追加されたScreenの名称を「InventoryConsecutiveCheckScreen」に変更

    f:id:yo-yon:20220128164448p:plain

  4. 「OnVisible」を下記の通り設定

  5. HomeScreenの「Titlebar_Home」「Title_L_Home」の二つを選択しコピーf:id:yo-yon:20211001192123p:plain
  6. 「InventoryConsecutiveCheckScreen」に戻ってペースト

    f:id:yo-yon:20220128164941p:plain

  7. 「Titlebar_Home_1」の名称を「Titlebar_ICC」、「Title_L_Home_1」の名称を「Title_L_ICC」に変更

    f:id:yo-yon:20220128165016p:plain

    「挿入」タブから「アイコン」をクリックし適当なアイコンをクリック

    f:id:yo-yon:20211001192355p:plain

  8. アイコンの名称を「Icon1」から「ToHomeScreenICC」に変更

    f:id:yo-yon:20220128165234p:plain

  9. 下記のように設定
    プロパティ 設定値 補足
    Icon Icon.Home アイコンの種類
    Color RGBA(255, 255, 255, 1) フォント色
    Width 70 コントロールの横幅
    Height 70 コントロールの縦幅
    X 560 キャンバス上の横の位置
    Y 0 キャンバス上の縦の位置
  10. 「OnSelect」を下記の通り設定

ギャラリー部分の作成

InventoryCheckScreenでも使用したギャラリーを追加します。

  1. 「InventoryCheckScreen」で「InventoryGallery」を選択しコピーします。

    f:id:yo-yon:20220128204611p:plain

  2. 「InventoryConsecutiveCheckScreen」に貼り付けをします。

    f:id:yo-yon:20220128204718p:plain

  3. 名称を「InventoryCCGallery」に変更します。

    f:id:yo-yon:20220128205000p:plain

  4. 「InventoryCCGallery」の中にある各アイテムの名称の「Inventory_1」を「InventoryCC」に変更します。

    f:id:yo-yon:20220128205649p:plain

  5. 下記のように設定
    プロパティ 設定値 補足
    Width 640 コントロールの横幅
    Height 1060 コントロールの縦幅
    X 0 キャンバス上の横の位置
    Y 70 キャンバス上の縦の位置
    TemplateSize GalleryH テンプレートのサイズ
    Visible true アイテムの表示状態
    ShowScrollbar false スクロールバーの表示状態
    ShowNavigation true ナビゲーションの表示状態
  6. 「Items」を下記の通り設定

  7. ギャラリー左上の鉛筆アイコンをクリックしテンプレートの編集に移ります。

    f:id:yo-yon:20220129132601p:plain

  8. オーサリングメニューから「四角形」を選択します。

    f:id:yo-yon:20220129135247p:plain

  9. 下記の通り設定
    プロパティ 設定値 補足
    Width InventoryCCGallery.Width コントロールの横幅
    Height 1 コントロールの縦幅
    X 0 キャンバス上の横の位置
    Y GalleryH キャンバス上の縦の位置
  10. 「挿入」タブの「テキスト」から「テキスト入力」を選択

    f:id:yo-yon:20211026154557p:plain
    f:id:yo-yon:20211026160212p:plain

  11. 「TextInput1」を「FixContentCC_T」に名称変更

    f:id:yo-yon:20220129152416p:plain

  12. 下記の通り設定
    プロパティ 設定値 補足
    Width InventoryCCGallery.Width コントロールの横幅
    Height fixinfoH コントロールの縦幅
    X 32 キャンバス上の横の位置
    Y Location_InventoryCC.Y+
    Location_InventoryCC.Height+15
    キャンバス上の縦の位置
    Default "" 既定の入力内容
    HintText "修正内容を入力してください" ヒントテキスト
    Mode TextMode.MultiLine テキスト入力のモード
    Visible fix2visible テキスト入力の表示状態
  13. 「fixF_B_InventoryCC」、「compF_B_InventoryCC」を選択

    f:id:yo-yon:20220129151723p:plain

  14. 下記の通り設定
    プロパティ 設定値 補足
    Y FixContentCC_T.Y+
    FixContentCC_T.Height+10
    キャンバス上の縦の位置
  15. 「fixF_B_InventoryCC」を選択

    f:id:yo-yon:20220129144202p:plain

  16. 「OnSelect」を下記の通り設定

  17. 「compF_B_InventoryCC」を選択

    f:id:yo-yon:20220129160635p:plain

  18. 「OnSelect」を下記の通り設定

はいこれで完成です!
最初の記事を公開してから足掛け4か月・・・
完成までにこんなに時間がかかってしまってすみません・・・
また今度Youtubeでも作り方の動画を作成する予定です!
そちらも公開されたら見て頂けると嬉しいです。
それでは皆さん、良い業務ハックライフを~


    免責事項