Demo Application: Data Reuse and Synchronisation

DESCRIPTION

This demo application demonstrates how to synchronize data between a list report (first column) and an object page (second column) by using the V4 ODataModel#getKeepAliveContext API. It also demonstrates how to replace an active version with a draft and vice versa.

Note: The application uses the responsive Flexible Column Layout control, which might hide columns if there is not enough space within the browser window. So use the app in fullscreen mode to prevent automatically hiding of columns which would result in a different behavior than described here.

Scenario: Start with list report, navigate to object page, edit

Start Up

  1. Start the Draft application with URL: /test-resources/sap/ui/core/demokit/sample/common/index.html?component=odata.v4.Draft
  2. Select the first product in the list report.
  3. Note: An object page for the product appears, no input field is editable, only the Edit button is enabled.

Edit & Cancel

  1. Press the Edit button.
  2. Note: Some input fields are now editable, all buttons but Edit are enabled, and the list report shows that the first product is not an active entity.
  3. Enter 'Test' into the input field Name of the object page.
  4. Note: The list report shows the new name of the first product.
  5. Press the Cancel button.
  6. Note: No input field is editable, only the Edit button is enabled, and the list report shows that the first product is an active entity with its original name.

Edit & Activate

  1. Press the Edit button.
  2. Note: Some input fields are now editable, all buttons but Edit are enabled, and the list report shows that the first product is not an active entity.
  3. Enter 'Test' into the input field Name of the object page.
  4. Note: The list report shows the new name of the first product.
  5. Enter a new quantity like '123' into the Quantity input field of the first part in the Parts table of the object page.
  6. Press the Save button.
  7. Note: No input field is editable, only the Edit button is enabled, the list report shows that the first product is an active entity with a new name, and the Parts table of the object page shows the new quantity of the first part.

Cancel Without Edit

  1. Select the second product in the list report.
  2. Note: An object page for the product appears, some input fields are editable, all buttons but Edit are enabled, and the list report shows that the second product is not an active entity.
  3. Enter 'Test' into the input field Name of the object page.
  4. Note: The list report shows the new name of the second product.
  5. Press the Cancel button.
  6. Note: No input field is editable, only the Edit button is enabled, and the list report shows that the second product is an active entity with its original name.

Scenario: Start with list report and object page, edit

  1. Start with URL: /test-resources/sap/ui/core/demokit/sample/common/index.html?component=odata.v4.Draft#/Products(ID=10,IsActiveEntity=true)
  2. Note: The list report and an object page for the product with ID 10 appears, no input field is editable, only the Edit button is enabled in the object page.
  3. Repeat the tests "Edit & Cancel" and "Edit & Activate" from above.

Scenario: Start with object page without list report, first show list then edit

  1. Start with URL: /test-resources/sap/ui/core/demokit/sample/common/index.html?component=odata.v4.Draft#/Products(ID=10,IsActiveEntity=true)?noList
  2. Note: An object page for the product with ID 10 appears, no input field is editable, only the Edit button is enabled.
  3. Press the "Show List" button.
  4. Note: The list report appears.
  5. Repeat the tests "Edit & Cancel" and "Edit & Activate" from above.

Scenario: Start with object page without list report, first edit then show list

  1. Start with URL: /test-resources/sap/ui/core/demokit/sample/common/index.html?component=odata.v4.Draft#/Products(ID=10,IsActiveEntity=true)?noList
  2. Note: An object page for the product with ID 10 appears, no input field is editable, only the Edit button is enabled.
  3. Repeat the tests "Edit & Cancel" and "Edit & Activate" from above.
  4. Press the "Show List" button.
  5. Note: The list report appears.

Scenario: Start with list report, navigate to defective product

Start Up

  1. Start the Draft application with URL: /test-resources/sap/ui/core/demokit/sample/common/index.html?component=odata.v4.Draft
  2. Select the last product in the list report.
  3. Note: An error page is shown telling that there was a "Communication error" with status code 500.

Scenario: Start with defective product in object page

Start Up

  1. Start the Draft application with URL: /test-resources/sap/ui/core/demokit/sample/common/index.html?component=odata.v4.Draft#/Products(ID=40,IsActiveEntity=true)
  2. Note: An error page is shown telling that there was a "Communication error" with status code 500.