Handle Error Archive in an MDK App

This step includes creating a mobile project in SAP Build Lobby.

1. In the SAP Build Lobby, click Create > Create to start the creation process.

   

2. Click the Application tile and choose Next.

   

3. Select the Mobile category and choose Next.

   

4. Select the Mobile Application to develop your mobile project in SAP Business Application Studio and choose Next.

   

5. Enter the project name mdk_errorarchive (used for this tutorial) , add a description (optional), and click Review.

   

   SAP Build recommends the dev space it deems most suitable, and it will automatically create a new one for you if you don’t already have one. If you have other dev spaces of the Mobile Application type, you can select between them. If you want to create a different dev space, go to the Dev Space Manager. See Working in the Dev Space Manager.

6. Review the inputs under the Summary tab. If everything looks correct, click Create to proceed with creating your project.

   

7. Your project is being created in the Project table of the lobby. The creation of the project may take a few moments. After the project has been created successfully, click the project to open it.

   

8. The project opens in SAP Business Application Studio.

   

   When you open the SAP Business Application Studio for the first time, a consent window may appear asking for permission to track your usage. Please review and provide your consent accordingly before proceeding.
   

   

The Storyboard provides a graphical view of the application’s runtime resources, external resources, UI of the application, and the connections between them. This allows for a quick understanding of the application’s structure and components.

• Runtime Resources: In the Runtime Resources section, you can see the mobile services application and mobile destination used in the project, with a dotted-line connected to the External Resources.
• External Resources: In the External Resources section, you can see the external services used in the project, with a dotted-line connection to the Runtime Resource or the UI app.
• UI Application: In the UI Applications section, you can see the mobile applications.

1. Click on + button in the Runtime Resources column to add a mobile services app to your project.

   

   This screen will only show up when your CF login session has expired. Use either Credentials OR SSO Passcode option for authentication. 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.

   

2. Choose myapp.mdk.demo from the applications list in the Mobile Application Services editor.

   

3. Select com.sap.edm.sampleservice.v4 from the destinations list and click Add App to Project.

   

   You can access the mobile services admin UI by clicking on the Mobile Services option on the right hand side.

   In the storyboard window, the app and mobile destination will be added under the Runtime Resources column. The mobile destination will also be added under the External Resources with a dotted-line connection to the Runtime Resource. The External Resource will be used to create the UI application.

   

4. Click the + button in the UI application column header to add mobile UI for your project.

   

5. In the Basic Information step, select the MDK Template Type as CRUD, leave the other options as they are. Since the option to Enable Auto-Deployment to Mobile Services After Project Creation is set to Yes, the MDK project will automatically be deployed to the Mobile Services after it is generated. Click Next to continue.

   

   The CRUD template generates the offline or online actions, rules, messages and pages to view, update, and manage records. More details on MDK template is available in help documentation.

6. In the Data Collections step, provide the below information and click Finish. Data Collections step retrieves the entity sets information for the selected destination.

   Field	Value
   Enter a path to service (e.g. /sap/opu/odata/sap/SERVICE_NAME)	Leave it as it is
   Select the Service Type	Leave the default value as OData
   Enable Offline	It’s enabled by default
   Select all data collections	Leave it as it is
   What types of data will your application contain?	Select Customers, Products, SalesOrderHeaders and SalesOrderItems

   

   Regardless of whether you are creating an online or offline application, this step is needed for app to connect to an OData service. When building an MDK Mobile application, it assumes the OData service created and the destination that points to this service is set up in Mobile Services.

   Since you have Enable Offline set to Yes, the generated application will be offline enabled in the MDK Mobile client.

   Data Collections step retrieves the entity sets information for the selected destination.

7. After clicking Finish, the storyboard is updated displaying the UI component. The MDK project is generated in the project explorer and automatically deployed to the Mobile Services based on your selections. You will now see a QR code for onboarding the mobile app. 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_Detail.page to display some information like affected entity and id for the affected record.

   Open Pages | ErrorArchive |ErrorArchive_Detail.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
   Footnote	leave it empty
   PreserveIconStackSpacing	Select false from the dropdown
   ProgessIndicator	leave it empty
   StatusText	leave it empty
   Subhead	{@odata.id}
   SubstatusText	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. First, click on the item0, a trash icon appears. Click on the trash icon to delete the default item.

   

6. In the Avatar Stack section of the Property pane, remove the default Avatar. First, click on the item0, a trash icon appears. Click on 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_Detail.page, select the Object Table control, navigate to the Events tab. Click the dotted 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/com_sap_edm_sampleservice_v4 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 MDK Rule Name ErrorArchive_DecideWhichEditPage and click Finish.

   

   Replace the generated snippet with below code.

   JavaScript

   Copy

   /**
   * Describe this function...
   * @param {IClientAPI} context
   */
   export default function ErrorArchive_DecideWhichEditPage(context) {
       //Current binding's root is the errorArchiveEntity:
       let errorArchiveEntity = context.currentPage.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. SalesOrderHeaders(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. SalesOrderHeaders
           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 "SalesOrderHeaders":
               targetAction = "/mdk_errorarchive/Actions/com_sap_edm_sampleservice_v4/SalesOrderHeaders/NavToSalesOrderHeaders_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);
       }
   }
   

   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.

9. In the generated ErrorArchive_DecideWhichEditPage.js rule, click on the red line. You will notice a yellow bulb icon suggesting some fixes, click on it and then 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.

10. 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.

You will now deploy the updated project to your MDK client.

Click the Deploy option in the editor’s header area, and then choose the deployment target as Mobile Services