Handle Error Archive in an MDK App

1. Now, you will create another new page to display error details.

2. In SAP Web IDE project, right-click the Pages folder | New MDK Page | Section Page | Next.

   

3. Enter the Page Name as ErrorDetails and click Next and then Finish on the confirmation step.

   

4. In the Properties pane, set the caption to Error Details.

   

   In this page, you would show which entity has been affected due to business logic failure and also want to display other information like detailed error message, request body, request URL etc.

5. Next, write a business logic to get the affected entity object and this object value will be shown in error details page.

6. Right click on the Rules folder | New | File.

   

7. Enter the file name GetAffectedEntityHeaderCaption.js, click OK.

   Copy and paste the following code.

   export default function GetAffectedEntityHeaderCaption(context) {
    //Current binding's root is the errorArchiveEntity:
    //Get the affectedEntity object out of it
    let affectedEntityType = "Unknown EntitySet";
    let affectedEntity = context.getPageProxy().binding.AffectedEntity;
    let id = affectedEntity["@odata.id"];
    if (id.indexOf("(") > 0) {
      affectedEntityType = id.substring(0, id.indexOf("("));
    }
    return "Affected Entity: " + affectedEntityType;
   }
   
   

   @odata.id: an annotation that contains the entity-id. More details can be found here.

   AffectedEntity: A navigation property that allows applications to navigate from an ErrorArchive entity to an entity in the offline store that is affected by the error.

8. Save your changes to the GetAffectedEntityHeaderCaption.js file.

9. Next, add an Object Table control in ErrorDetails.page to display some information like affected entity and id for affected record.

   Open ErrorDetails.page, in the Layout Editor, expand the Controls | Compound section, drag and drop the Object Table control onto the page area.

   

10. In the Properties | Target pane, choose String Target from the dropdown and provide #Property:AffectedEntity value.

    

11. In Appearance section, provide below properties:

    Property	Value
    Description	leave it empty
    DetailImage	leave it empty
    DetailImageIsCircular	false
    Footnote	leave it empty
    PreserveIconStackSpacing	false
    ProgessIndicator	leave it empty
    Status	leave it empty
    Subhead	{@odata.id}
    SubStatus	leave it empty
    Title	Edit Affected Entity

    

    @odata.id: an annotation that contains the entity-id. More details can be found here.

12. In Behavior section, update below properties:

    Property	Value
    AccessoryType	disclosureIndicator

    

13. Next, add a Header section bar to display affected entity information.

    In the Layout Editor, expand the Controls | Section Bar section, drag and drop the Header control onto the Object Table control.

    

    Now, bind its Caption property to GetAffectedEntityHeaderCaption.js file.

    

14. Next, you can also display additional information like detailed error message, request body, request URL etc.

    In the Layout Editor, expand the Controls | Container section, drag and drop the Static Key Value control on the page area.

    

    Update NumberOfColumns value to 1.

    

    You can limit the number of columns to be displayed.

15. Next, you will add items to the container.

    In the Layout Editor, expand the Controls | Container Item section, drag and drop the Key Value Item control in the Static Key Value control.

    

    Provide the below information:

    Property	Value
    KeyName	HTTP Status Code
    Value	{HTTPStatusCode}

    

    Drag and drop 4 more Key Value Item control in the Static Key Value control and provide the below information:

    Property	Value
    KeyName	Request Method
    Value	{RequestMethod}

    Property	Value
    KeyName	Request URL
    Value	{RequestURL}

    Property	Value
    KeyName	Request Body
    Value	{RequestBody}

    Property	Value
    KeyName	Error Message
    Value	{Message}

    You should have final binding for all key value items as below:

    

    More details on ErrorArchive Entity Properties is available in help documentation.

16. Save your changes to the Error Details page.

When you click on an affected entity in Error details page, you want to bring the affected record so that you can fix business failure by modifying previous changes right there.

You can write a logic in JavaScript to handle the affectedEntity and then decide which action to call depends on which @odata.id is the affectedEntity and if there is no handler for an affected entity, app will display a toast message.

1. Create a Message Action to display this toast message.

   Right click on the Actions folder | New MDK Action | Message Action | Next.

   

   Provide the below information:

   Property	Value
   Action Name	UnknownAffectedEntityMessage
   Type	select ToastMessage
   Message	Affected Entity {{#Property:AffectedEntity/#Property:@odata.id}} doesn't have handler yet.
   Duration	4
   Animated	true

   

   Click Next and then Finish on the confirmation step.

2. Write a business logic to decide which action to call depends on which @odata.type is the affectedEntity and if there is no handler for an affected entity, app will display a toast message saying this affected entity doesn’t have a handle yet.

3. Right click on the Rules folder | New | File.

   

4. Enter the file name DecideWhichEditPage.js, click OK.

   Copy and paste the following code.

   export default function DecideWhichEditPage(context) {
     //Current binding's root is the errorArchiveEntity:
     let errorArchiveEntity = context.binding;
     //Get the affectedEntity object out of it
     let affectedEntity = errorArchiveEntity.AffectedEntity;
     console.log("Affected Entity Is:");
     console.log(affectedEntity);
   
     let targetAction = null;
     let id = affectedEntity["@odata.id"]; //e.g. PurchaseOrderHeaders(12345)
     let affectedEntityType = "Unknown Entity Set"; //By default it's unknown type
     if (id.indexOf("(") > 0) {
       //Extracting the entity set type from @odata.id e.g. PurchaseOrderHeaders
       var patt = /\/?(.+)\(/i;
      var result = id.match(patt);
      affectedEntityType = result[1];
     }
     console.log("Affected Entity Type Is:");
     console.log(affectedEntityType);
     //Here we decide which action to call depends on which affectedEntityType is the affectedEntity
     // You can add more complex decision logic if needed
     switch (affectedEntityType) {
       case "PurchaseOrderHeaders":
           targetAction = "/MDK_ErrorArchive/Actions/PurchaseOrderHeaders/NavToPurchaseOrderHeaders_Edit.action";
         break;
       default:
           //Save the affected Entity's type in client data so that it can be displayed by the toast
           context.getPageProxy().getClientData().AffectedEntityType = affectedEntityType;
           // Show a toast for affectedEntityType that we do not handle yet
           return context.executeAction("/MDK_ErrorArchive/Actions/UnknownAffectedEntityMessage.action");
     }
   
     if (targetAction) {
       let pageProxy = context.getPageProxy();
       //Set the affectedEntity object to root the binding context.
       pageProxy.setActionBinding(affectedEntity);
       //Note: doing 'return' here is important to chain the current context to the action.
       // Without the return the ActionBinding will not be passed to the action because it will consider
       // you are executing this action independent of the current context.
       return context.executeAction(targetAction);
     }
   }
   

5. Save your changes to the DecideWhichEditPage.js file.

6. Bind this file to onPress of Object Table in Error Details page.

   Open Error Details page | Select Object Table control | Events tab, click the link icon for the OnPress property to open the object browser.

   Double click on the DecideWhichEditPage.js action and click OK to set it as the OnPress Action.

   

7. Save the changes to the ErrorDetails page.