Handle Error Archive in an MDK App

This step includes creating the mobile development kit project in the editor.

1. Launch the Dev space in SAP Business Application Studio.

2. Click Start from template on Get Started page.

   

   If you do not see the Get Started page, you can access it by typing >get started in the center search bar.

   

3. Select MDK Project and click Start.

   

   If you do not see the MDK Project option check if your Dev Space has finished loading or reload the page in your browser and try again.

   This screen will only show up when your CF login session has expired. Enter your login credentials, click Sign in. After successful signed in to Cloud Foundry, select your Cloud Foundry Organization and Space where you have set up the initial configuration for your MDK app and click Apply.

   

4. In Basic Information step, select or provide the below information and click Next:

   Field	Value
   MDK Template Type	Select CRUD from the dropdown
   Your Project Name	Provide a name of your choice. MDK_ErrorArchive is used for this tutorial
   Your Application Name	<default name is same as project name, you can provide any name of your choice>
   Target MDK Client Version	Leave the default selection as MDK 6.0+ (For use with MDK 6.0 or later clients)
   Choose a target folder	By default, the target folder uses project root path. However, you can choose a different folder path

   

   The CRUD template creates the offline or online actions, rules, messages, List Detail Pages with editable options. More details on MDK template is available in help documentation.

5. In Service configuration step, provide or select the below information and click Next:

   Field	Value
   Data Source	Select Mobile Services from the dropdown
   Mobile Services Landscape	Select standard from the dropdown
   Application Id	Select com.sap.mdk.demo from the dropdown
   Destination	Select SampleServiceV2 from the dropdown
   Enter a path to the OData service	Leave it as it is
   Enable Offline	It’s enabled by default

   

   Regardless of whether you are creating an online or offline application, this step is needed app to connect to an OData service. When building an Mobile Development Kit application, it assumes the OData service created and the destination that points to this service is set up in Mobile Services. Since we have Enable Offline set to Yes, the generated application will be offline enabled in the MDK Mobile client.

6. In Data Collections step, unselect Customers, select Suppliers, PurchaseOrderHeaders and PurchaseOrderItems.

   

   Click Finish to complete the project creation.

7. After clicking Finish, the wizard will generate your MDK Application based on your selections. You should now see the MDK_ErrorArchive project in the project explorer.

Generated project is offline enabled and includes three entity sets (Suppliers, PurchaseOrderHeaders and PurchaseOrderItems) on main page and these entities are fully CRUD enabled. You can create a new record and also modify an existing one. You will also find the ErrorArchive_List.page which will display list of errors for the records rejected by the backend and ErrorArchive_Detail.page which will display details about an error.

1. Right-click Application.app and select MDK: Deploy.

   

2. Select deploy target as Mobile Services.

   

   If you want to enable source for debugging the deployed bundle, then choose Yes.

   

   You should see Deploy to Mobile Services successfully! message.

   

SAP Business Application Studio has a feature to display the QR code for onboarding in the Mobile client.

Click the Application.app to open it in MDK Application Editor and then click the Application QR Code icon.

The On-boarding QR code is now displayed.

Leave the Onboarding dialog box open for the next step.

Make sure you are choosing the right device platform tab above. Once you have scanned and on-boarded using the onboarding URL, it will be remembered. When you Log out and on-board again, you will be asked either to continue to use current application or to scan new QR code.

On the Error Details page, you will implement how to navigate to respective record to let users to modify the affected record with correct values and will also display the Affected Entity Object. Once the record is modified with the correct values, user can again sync it with backend.

1. Add an Object Table control in ErrorArchive_Details.page to display some information like affected entity and id for the affected record.

   Open ErrorArchive_Details.page, in the Layout Editor, expand the Controls | Data Bound Container group, drag and drop the Object Table control onto the page area.

   

2. In the Properties | Target pane, choose String Target from the dropdown and provide {AffectedEntity} value.

   

   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.

3. In Appearance section, provide below properties:

   Property	Value
   Description	leave it empty
   DetailImage	leave it empty
   Footnote	leave it empty
   PreserveIconStackSpacing	Select false from the dropdown
   ProgessIndicator	leave it empty
   Status	leave it empty
   Subhead	{@odata.id}
   Substatus	leave it empty
   Tags	Click the item0 and click the trash icon to delete the default item
   Title	Edit Affected Entity

   

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

4. In Behavior section, update below properties:

   Property	Value
   AccessoryType	DisclosureIndicator

   

5. In the Avatar Grid section of the Properties pane, remove the default Avatar by selecting the item0 and clicking the trash icon to delete the default item.

   

6. In the Avatar Stack section of the Properties pane, remove the default Avatar by selecting the item0 and clicking the trash icon to delete the default item.

   

7. When tapping on this Object Table control, you want to bring the affected record so that you can fix business failure by modifying previous changes right there.. For this, you will 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.

   In the ErrorArchive_Details.page, select the Object Table control, navigate to the Events tab. Click the 3 dots icon for the OnPress property and select the Create a rule/action.

   

8. Select Rule for the Object Type and select the /MDK_ErrorArchive/Rules/ErrorArchive folder path to create a new rule that will be generated in the chosen path.

   

   You may choose a path of your choice. Since the template generates an ErrorArchive folder under Rules, it is good to keep related files under the respective folder.

   Enter the Rule name ErrorArchive_DecideWhichEditPage, click Next and then Finish on the confirmation step.

   

   Replace the generated snippet with below code.

   JavaScript

   Copy

   export default function ErrorArchive_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/ErrorArchive/ErrorArchive_UnknownAffectedEntity.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);
     }
   }
   

9. Save your changes to the ErrorArchive_DecideWhichEditPage.js file.

   In above code there is a reference to ErrorArchive_UnknownAffectedEntity.action, which doesn’t exist in your metadata project yet. You will create this action in next step.

10. In the generated ErrorArchive_DecideWhichEditPage.js rule, double-click the red line. You will notice a bulb icon suggesting some fixes, click on it, select MDK: Create action for this reference, and click Toast Message Action.

    

    Provide the below information:

    Property	Value
    Message	Affected Entity {AffectedEntity/@odata.id} doesn't have handler yet.
    Duration	4
    Animated	Select true from the dropdown

    

    If there is no handler for an affected entity, app will display a toast message.

11. 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 Affected Entity: {#Page:-Current/AffectedEntity/@odata.type} target path.

    

    @odata.type: an annotation that specifies the type of a JSON object or name/value pair. Its value is a URI that identifies the type of the property or object. More details can be found here.

Right-click the Application.app file in the project explorer pane, select MDK: Deploy and then select deploy target as Mobile Services.

Alternatively, you can select MDK: Redeploy in the command palette (View menu>Find Command OR press Command+Shift+p on Mac OR press Ctrl+Shift+P on Windows machine), it will perform the last deployment.