--- title: "Details Page UI and App Variables" slug: "details-page-ui-and-app-variables" updated: 2023-01-10T14:23:48Z published: 2023-01-10T14:23:48Z canonical: "help.pillir.io/details-page-ui-and-app-variables" --- > ## Documentation Index > Fetch the complete documentation index at: https://help.pillir.io/llms.txt > Use this file to discover all available pages before exploring further. # Details Page UI and App Variables 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 Platform](https://cdn.document360.io/718af901-247b-46be-8ace-83da21839237/Images/Documentation/8%20Page%203_4%20Details%20page%20in%20App%20Designer%20of%20EdgeReady%20Platform.png)I-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: | Functionality | Component | App Variables | Data Type | | --- | --- | --- | --- | | View Batch Name | Text | Header.BatchName | String | | View Date | Text | Header.Date | String | | View Plant | Text | Header.Plant | String | | View Count of records in the batch | Text | Logs.$count | -NA- | | View list of records in the batch | List View | Logs | String | | View Log Tag of each record | Text | Logs.LogTag | String | | View Sloc of each record | Text | Logs.Sloc | String | | Add more records to the batch | Button | -NA- | | | Edit a record | Button | -NA- | | | Delete a record | Button | -NA- | | | Undo one recent action (Edit OR Delete a record) | Button | -NA- | | | Delete the entire batch | Button | -NA- | | | Go back to Review page | Button | -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)](https://cdn.document360.io/718af901-247b-46be-8ace-83da21839237/Images/Documentation/9%20Image%203-1%20List%20View%20-%20Data%20(List%20Header).png)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)](https://cdn.document360.io/718af901-247b-46be-8ace-83da21839237/Images/Documentation/10%20Image%203-2%20List%20View%20-%20Data%20(List%20Item).png)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 Filter](https://cdn.document360.io/718af901-247b-46be-8ace-83da21839237/Images/Documentation/11%20Image%203-3%20List%20View%20-%20Data%20Filter.png)I-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 event](https://cdn.document360.io/718af901-247b-46be-8ace-83da21839237/Images/Documentation/42%20Snippet%203-1%20Details%20-%20PageShow%20event.png)I-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 event](https://cdn.document360.io/718af901-247b-46be-8ace-83da21839237/Images/Documentation/43%20Snippet%203-2%20Details%20-%20Add%20to%20existing%20batch%20-%20button%20click%20event.png)I-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 Variables | Data Type | | --- | --- | | log_action_logtag | String | | log_action_sloc_old | String | | log_action | String (Values: or Update or Delete) | ![44 Snippet 3-3 Details - Update record - button click event](https://cdn.document360.io/718af901-247b-46be-8ace-83da21839237/Images/Documentation/44%20Snippet%203-3%20Details%20-%20Update%20record%20-%20button%20click%20event.png)I-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 dropdown](https://cdn.document360.io/718af901-247b-46be-8ace-83da21839237/Images/Documentation/45%20Page%204_4%20Details%20-%20Update%20dialog%20-%20Select%20component%20for%20Sloc%20dropdown.png)I-42: Details - Filter for SlocMaster ![46 Snippet 3-4 Details - Delete record - button click event](https://cdn.document360.io/718af901-247b-46be-8ace-83da21839237/Images/Documentation/46%20Snippet%203-4%20Details%20-%20Delete%20record%20-%20button%20click%20event.png)I-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 Variables | Data Type | | --- | --- | | log_logtag | String | The script used to fetch the unique identifier is shown below: ![Details - Delete record - button click event](https://cdn.document360.io/718af901-247b-46be-8ace-83da21839237/Images/Documentation/Details%20-%20Delete%20record%20-%20button%20click%20event.png)I-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](https://help.pillir.io/docs/details-page-ui-and-app-variables#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 event](https://cdn.document360.io/718af901-247b-46be-8ace-83da21839237/Images/Documentation/48%20Snippet%203-6%20Details%20-%20Undo%20recent%20action%20-%20click%20event.png)I-45: Details - Undo recent action - click event  [](https://help.pillir.io/docs/details-page-ui-and-app-variables#details-page-scripts) Storing the record data in a separate business function variable to be used if an undo action is undertaken later. | App Variables | Data type | | --- | --- | | log_action_sloc | String | ### 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 event](https://cdn.document360.io/718af901-247b-46be-8ace-83da21839237/Images/Documentation/48%20Snippet%203-6%20Details%20-%20Undo%20recent%20action%20-%20click%20event.png)I-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. NoteThe 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 event](https://cdn.document360.io/718af901-247b-46be-8ace-83da21839237/Images/Documentation/49%20Snippet%203-7%20Details%20-%20Delete%20Batch%20-%20click%20event.png)I-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: | Button | Interactions | | --- | --- | | Add to Batch | Navigate to Home page | | Delete Batch | Navigate to BOS_deletedBatch | | Update record | Open dialog to receive new Sloc value | | Delete record | Open dialog to confirm delete | | Back button | Navigate 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](https://help.pillir.io/docs/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 batch](https://cdn.document360.io/718af901-247b-46be-8ace-83da21839237/Images/Documentation/53%20BOS%202-1%20BOS_deletedBatch%20-%20Post%20details%20of%20deleted%20batch.png)I-48: BOS_deletedBatch - Post details of deleted batch All App Variables created so far are consolidated in [Appendix B-1](https://help.pillir.io/docs/appendix-a). The columns in App Variables of type Table are listed in [Appendix B-2](https://help.pillir.io/docs/appendix-b-2).