Home Page UI and App Variables

The Home page is used to receive inputs from user and store them in device in the form of records. In this use-case, each record is called a Log.

The End-User can perform the following actions in the Home page:

• Select a Date from Calendar layout
• Select a Plant from a dropdown list
• Select a Sloc from a dropdown list
• Scan a barcode or type a barcode and click Enter. This action will automatically store the data in the device.
• View the total number of records added in the active batch
• View the barcode of the last added record

The UI in the Home page with the above input fields for each record is designed as shown in the screenshot below:

I-4:Home page in App Designer of EdgeReady Platform image

The developer must always define App variables based on the UI layout of the app. For instance, in this Offline App, the Home page receives the input from End-user, validates it and insert them as one record. Therefore all variables used in the Home page are primitive datatypes. These variables are mapped to the Data property of the input fields used in this Home page.

Table 1-1: App variables in Home page

The data source of Plant is Plant Master. Refer the mapping in the screenshot below: 

I-5:Plant Master-Data mapping

Table 1-2: Additional variables in Home page

The PlantMaster is populated in the Initial Download.

The data source of Sloc is Sloc Master. Sloc Master should be filtered based on Plant value. For details on 'How to use Filter property for the Select component', refer the App Designer - Filter section. To see how Sloc value is mapped and filtered, refer the screenshot below:

I-6:Sloc Master - Data Mapping

I-7:Sloc Master - Data Filter

                                                     Table 1-3: Additional variables in Home page

The SlocMaster is populated in the Initial Download. 

The current App implementation stores the input values entered in the Home page to the device data automatically when the End-User scans or types a barcode and clicks Enter in the Log Tag field. 

A table variable should be used to store this data for the following reasons: 

• The variable should store a list of records.
• The list of records should not be lost when the End-User exits the app or when the session expires. 

According to this use-case, one batch will have the same BatchName, Date and Plant. The Date and Plant fields are disabled for change once the user starts adding records to the active session. Therefore, the input values received in this page are segregated into two table variables: ‘Header’ and ‘Logs’. These two table variables are connected through the common computed value ‘BatchName’. The ‘BatchName’ is the Primary Key in both these tables. 

                                                       Table 1-4: Additional variables in Home page

Home Page Scripts

After storing user preference in the Settings page; for every future login, the End-User is taken to the Home page.

Home->onPageShow event

In the onPageShow event, the session variables are computed and initialized. The following flowchart depicts the logic used:

I-8:Home page - onPageShow event 

For sample Home Page onPageShow events, refer screenshots below. (Screenshots are captioned with the events in the above flowchart.)

I-9:Home - onPageShow - Is length of settings = 0 

I-10:Home - onPageShow - Is BatchName empty?

I-11:Home - onPageShow - Calculate record count in BatchName

I-12: Home - onPageShow - Is BatchName current? If yes, is record count = 0?

I-13:Home - onPageShow - BatchName NOT empty and NOT current

Functions written in Home Page onPageShow event

I-14:Home - onPageShow - Function: readSettings 

I-15:Home - onPageShow - Function: initialize

Variables used in Function: initialize are listed in the following table:

Component	App Variables	Data Type	Purpose
-NA-	BatchName_current	String	To keep track of batch created in current session
Text (for display purposes only)	BatchName	String	To keep track of active batch
Home page ->textinput_date	boolEnable_textinput_date	String	To disable Date field in Home page after the first record added to current batch or when adding more records to an old batch
Home page -> select_plant	boolEnable_select_plant	String	To disable Plant field in Home page after the first record added to current batch or when adding more records to an old batch

Table 1-5: Variables used in Function: initialize

The feedback functions success_feedback and error_feedback are declared and defined as Global functions in Home Page onPageShow event.

I-16: Home - onPageShow - Global function: success_feedback

I-17: Home - onPageShow - Global function: error_feedback

There are two business function variables used in this business function to Show/Hide the feedback dialog box through App Behavior script as observed in the above Global function snippets.

App Variables	Data Type
boolShow_dialog_feedback	String (True/False)
feedback_message	String

Table 1-6: Show/Hide variables

A feedback dialog box is implemented in every page of this business function with the following design:

I-18: dialog_feedback UI

I-19: dialog_feedback Properties

Home page -> select_plant -> onChange event

Similar to "select_plant change event in Settings page" Sloc Master has to be reset on select_plant change event in the Home page.

I-20: Home page - Plant Change event 

Note

Do no forget to populate SlocMaster_copy in the Initial Download BOS.

Home -> textinput_logtag -> onKeyUp event 

OnKeyUp event in Log Tag field, the input fields are validated and stored in device. The variables ‘Header’ and ‘Logs’ are used. Validations include: Field empty, LogTag not alphanumeric, LogTag length greater than 10, Previous LogTag scanned again, Duplicate LogTag scanned.

I-21:Home page - Log Tag KeyUp event: Validate input fields and add record to device data

I-22: Home page - Log Tag KeyUp event: Function: ValidateAndAdd

I-23: Home page - Log Tag KeyUp event: Function: addLog