Details Page UI and App Variables
  • 10 Jan 2023
  • 5 Minutes to read
  • Contributors
  • Dark
    Light
  • PDF

Details Page UI and App Variables

  • Dark
    Light
  • PDF

Article summary

The Details page is used to display records under one batch. The End-User can perform the following actions in the Details page:

  • View the Batch Name and the Date and Plant data in the selected batch
  • View the Count of records in the selected batch
  • View the list of records in the selected batch. List of records in this use-case has the following data: 
    • Log Tag 
    • Sloc
  • Add more records to the batch
  • Edit a record in the batch 
  • Delete a record in the batch
  • Undo one of the above two actions edit or delete a record 
  • Delete the entire batch. In this case, the deleted batch data should be automatically sent to server for audit purposes. 

The following image shows the UI design in Details page:

8 Page 3_4 Details page in App Designer of EdgeReady PlatformI-35: Details page in App Designer of EdgeReady Platform

The Details page displays data specific to the selected batch. The details specific to the selected batch includes the following:
FunctionalityComponentApp VariablesData Type
View Batch NameTextHeader.BatchNameString
View DateTextHeader.DateString
View PlantTextHeader.PlantString
View Count of records in the batchTextLogs.$count-NA-
View list of records in the batchList ViewLogsString
View Log Tag of each recordTextLogs.LogTagString
View Sloc of each recordTextLogs.SlocString
Add more records to the batchButton-NA-
Edit a recordButton-NA-
Delete a recordButton-NA-

Undo one recent action (Edit OR Delete a record)

Button-NA-
Delete the entire batchButton-NA-
Go back to Review pageButton-NA-

                                                        Table 3-1: App variables in Details page

How do I see the details from the selected batch?

In the Details page of the App designer, the platform automatically displays the record that has been clicked by the developer in the previous page. The developer has to just use the same table variable and desired column to display the details in the selected batch. 

In the following image, no additional logic is written to display the details:

9 Image 3-1 List View - Data (List Header)I-36: List View - Data(List Header)

How do I see only the records in the selected batch?

In App Designer, the Filter property can be used to filter Logs data that matches with the BatchName of the selected batch. To use the filter option, do the following: 

1. Select the List View component in Details page and click the Filter button in the right pane.

10 Image 3-2 List View - Data (List Item)I-37: List View - Data(List Item)

2. In the pop-up window, choose BatchName EQUAL Header.BatchName and click Save.11 Image 3-3 List View - Data FilterI-38:List View - Data Filter

Why did I use Logs.$count instead of Header.Count? 

The Header.Count is a computed field in Review page. In Details page, this count may vary if more records are added to the batch or if records are deleted. To avoid updating count on each action, Logs.$count will automatically populate the exact number of records under each batch without any implementation effort. 

Details Page Scripts

 On clicking the Details button for a desired batch, the End-User is shown:

  • The selected batch and its details
  • All records in the batch and 
  • All actions that can be taken on the batch. 

Details -> onPageShow event

In the script for Details page onPageShow event, some app logic variables are set to reset. Refer snippet below: 

42 Snippet 3-1 Details - PageShow eventI-39: Details - onPageShow event 

Details -> button_addToBatch -> click 

Adding logs to an existing batch involves three steps: 

  1. Obtain the batch specific Date and Plant values (selected_date, selected_plant) as these two values remain the same for all records added under it.
  2. Disable the Data and Plant fields in Home page (boolEnable_textinput_date, boolEnable_select_plant) as those values must not change when adding more records to the batch.
  3. Pick up the last used Storage Location to be auto-populated by default (selected_sloc). However, this field is enabled for change if desired by the End-User.

In addition to the above steps, selected_BatchName is copied to BatchName variable. This app logic is carried out in the button script. Refer snippet below:

43 Snippet 3-2 Details - Add to existing batch - button click eventI-40: Details - Add to existing batch - button click event

Details -> button_update

Based on the platform design, any data changes made to transaction data mapped in the corresponding fields will automatically be updated into the app variable. Therefore, the record values are retained in a separate business function variable, to be used in case of an Undo action taken later.

App VariablesData Type
log_action_logtagString
log_action_sloc_oldString
log_actionString (Values: <empty> or Update or Delete)

44 Snippet 3-3 Details - Update record - button click eventI-41:Details - Update record - button click event

Details -> select_dialog_sloc -> change event

The actual change of value in this use-case is performed within a pop up dialog box. The Select component in the dialog box displays the list of Storage Locations associated with the Header.Plant. 

The Data and Filter property of the select_dialog_sloc event is shown below:

45 Page 4_4 Details - Update dialog - Select component for Sloc dropdownI-42: Details - Filter for SlocMaster

46 Snippet 3-4 Details - Delete record - button click eventI-43: Details - Update record - select_sloc change event

Details -> button_delete -> click

The unique identifier of the record (in this case, LogTag) is fetched to be used to identify the row to be removed. The variable used to fetch the unique identifier is shown below: 

App VariablesData Type
log_logtagString

The script used to fetch the unique identifier is shown below: 

Details - Delete record - button click eventI-44: Details - Delete record - button click event

The remove action is performed after a confirmation pop up box is shown to the user. Refer Details Page Scripts -> button_delete_log_yes -> click for snippet of remove at index script.

Details -> button_delete_log_yes -> click

On confirming the delete record, the fetched unique identifier (in this case, LogTag) is used to identify the index of the row in Logs table. The Inlist remove at index block is used to delete a record from the transaction data. 

Refer script snippet below:

48 Snippet 3-6 Details - Undo recent action - click eventI-45: Details - Undo recent action - click event 

Storing the record data in a separate business function variable to be used if an undo action is undertaken later. 

App VariablesData type
log_action_slocString

Details -> button_undo -> click

The undo operation in this use-case is limited to undoing one recent action (Update or Delete). If the recent action is Update, old Sloc value is copied to the record. If the recent action is Delete, the removed record is inserted back to the Logs variable. 

Refer script snippet below for the logic written.

48 Snippet 3-6 Details - Undo recent action - click eventI-46: Details - Undo recent action - click event

Details -> button_deleteBatch -> click 

By clicking the delete button at the top right of the screen deletes the entire batch. The current implementation doesn’t confirm batch level delete action. Therefore the associated script is inside the button_deleteBatch -> click event. Also, based on this use-case requirement, the Status of the batch is marked as Deleted. No records are actually deleted. The details of the deleted batch is sent to the server for audit. 

If the batch that belongs to the current session is emptied, the BatchName value is emptied to re-initialize the session if End-User navigates back to Home page.

Note
The BatchName_current variable is emptied because it is copied to BatchName on the click of button_back event.

 Refer snippet below:

49 Snippet 3-7 Details - Delete Batch - click eventI-47:Details - Delete Batch - click event

Details page uses Interactions property for all buttons except one that exists in its page. The interactions used for the following buttons are mentioned in the table below: 

ButtonInteractions
Add to BatchNavigate to Home page
Delete BatchNavigate to BOS_deletedBatch
Update recordOpen dialog to receive new Sloc value
Delete recordOpen dialog to confirm delete
Back buttonNavigate to ‘Go Back’
Undo button-NA-

Developing Business Logic BOS for Details Page

BOS_deletedBatch

This BOS posts details of deleted batch to the server for audit purposes. Refer Appendix C for Database schema of table that will store the transaction data. Refer screenshot below:

53 BOS 2-1 BOS_deletedBatch - Post details of deleted batchI-48: BOS_deletedBatch - Post details of deleted batch

All App Variables created so far are consolidated in Appendix B-1

The columns in App Variables of type Table are listed in Appendix B-2.



Was this article helpful?

ESC

Eddy AI, facilitating knowledge discovery through conversational intelligence