皆さん、こんにちは!
業務ハックLabのよーよんです。
今回で第5回目。ついに今回で最終回!!
引き続き、IT機器棚卸用のアプリ作成方法について案内していきますよ~。
今回は連続棚卸を行うInventoryConsecutiveCheckScreen編です!
前回のページはこちら~
それでは行ってみましょう~
InventoryConsecutiveCheckScreen
長ったらしいスクリーン名ですね。
我ながらセンスがない・・・
今回作成する画面ですが連続棚卸画面です。
前回まで作成していた画面はQRコードを読み込んで一つずつ棚卸をする画面でしたが
今回は機器一覧を表示し画面上で一気に棚卸をできるようにしていきます。
新しい画面の追加~アプリタイトル部作成
- 「ホーム」タブか「挿入」タブから「新しい画面」をクリック
- 追加する画面の種類が表示されるので「空」をクリック
- 追加されたScreenの名称を「InventoryConsecutiveCheckScreen」に変更
-
「OnVisible」を下記の通り設定
- HomeScreenの「Titlebar_Home」「Title_L_Home」の二つを選択しコピー
- 「InventoryConsecutiveCheckScreen」に戻ってペースト
- 「Titlebar_Home_1」の名称を「Titlebar_ICC」、「Title_L_Home_1」の名称を「Title_L_ICC」に変更
「挿入」タブから「アイコン」をクリックし適当なアイコンをクリック
- アイコンの名称を「Icon1」から「ToHomeScreenICC」に変更
- 下記のように設定
プロパティ 設定値 補足 Icon Icon.Home アイコンの種類 Color RGBA(255, 255, 255, 1) フォント色 Width 70 コントロールの横幅 Height 70 コントロールの縦幅 X 560 キャンバス上の横の位置 Y 0 キャンバス上の縦の位置 -
「OnSelect」を下記の通り設定
ギャラリー部分の作成
InventoryCheckScreenでも使用したギャラリーを追加します。
- 「InventoryCheckScreen」で「InventoryGallery」を選択しコピーします。
- 「InventoryConsecutiveCheckScreen」に貼り付けをします。
- 名称を「InventoryCCGallery」に変更します。
- 「InventoryCCGallery」の中にある各アイテムの名称の「Inventory_1」を「InventoryCC」に変更します。
- 下記のように設定
プロパティ 設定値 補足 Width 640 コントロールの横幅 Height 1060 コントロールの縦幅 X 0 キャンバス上の横の位置 Y 70 キャンバス上の縦の位置 TemplateSize GalleryH テンプレートのサイズ Visible true アイテムの表示状態 ShowScrollbar false スクロールバーの表示状態 ShowNavigation true ナビゲーションの表示状態 -
「Items」を下記の通り設定
-
ギャラリー左上の鉛筆アイコンをクリックしテンプレートの編集に移ります。
- オーサリングメニューから「四角形」を選択します。
- 下記の通り設定
プロパティ 設定値 補足 Width InventoryCCGallery.Width コントロールの横幅 Height 1 コントロールの縦幅 X 0 キャンバス上の横の位置 Y GalleryH キャンバス上の縦の位置 - 「挿入」タブの「テキスト」から「テキスト入力」を選択
- 「TextInput1」を「FixContentCC_T」に名称変更
- 下記の通り設定
プロパティ 設定値 補足 Width InventoryCCGallery.Width コントロールの横幅 Height fixinfoH コントロールの縦幅 X 32 キャンバス上の横の位置 Y Location_InventoryCC.Y+
Location_InventoryCC.Height+15キャンバス上の縦の位置 Default "" 既定の入力内容 HintText "修正内容を入力してください" ヒントテキスト Mode TextMode.MultiLine テキスト入力のモード Visible fix2visible テキスト入力の表示状態 - 「fixF_B_InventoryCC」、「compF_B_InventoryCC」を選択
- 下記の通り設定
プロパティ 設定値 補足 Y FixContentCC_T.Y+
FixContentCC_T.Height+10キャンバス上の縦の位置 - 「fixF_B_InventoryCC」を選択
-
「OnSelect」を下記の通り設定
- 「compF_B_InventoryCC」を選択
-
「OnSelect」を下記の通り設定
はいこれで完成です!
最初の記事を公開してから足掛け4か月・・・
完成までにこんなに時間がかかってしまってすみません・・・
また今度Youtubeでも作り方の動画を作成する予定です!
そちらも公開されたら見て頂けると嬉しいです。
それでは皆さん、良い業務ハックライフを~
リンク