Performing Basic Extensions

If you have not already completed this step in the exercise Setup of the Development Environment in Business Application Studio, then complete this now before you proceed with creating a custom project for extending the Mobile App.

1. Log in to Cloud Foundry.

   1. Use Menu View → Find Command.

   2. Choose command or type CF: Login to Cloud Foundry.

      The Cloud Foundry Sign In and Targets page displays.

   3. Enter your credentials (email_address/Password) or select Sign In or select SSO Passcode.

   4. Choose the link and authenticate in the new tab.

   5. Copy the code and close the tab to return.

   6. Paste the code and choose Sign In.

      The page refreshes.

   7. Select the correct Cloud Foundry Organization. For the training, there is only one Organization, so this will default.

   8. Select the Cloud Foundry Space. Based on the group number assigned choose the Space with the range. For example: If your group is 07 choose the space 06_10.

   9. Choose Apply.

      Once you establish the connection to the Mobile App, the BAS workspace will then use this for:

      1. MDK Deploy: Deployment of MDK Metadata to the appropriate app.
      2. Sync Service: Mobile Connections/Destinations created within the App are used for Sync the Metadata changes from the back end.

      Note

      At the time of the MDK Deploy or Sync Service you are prompted to choose the Mobile App. Make sure to choose your own app based on the group assigned to you.

1. Create a ZSAMComponent project for the custom component.

   1. Log in to SAP Business Application Studio.

   2. Once within the BAS, create a new project via Menu File → New Project from Template.

      Note

      By default the new project is created in /home/user/projects same as the AssetManager Project.

   3. On the next page of Wizard, choose MDK Project.

   4. Choose the Start button.

      

   5. In the next page, enter the basic information of the project and choose the Finish button.

      Use the following data:

      MDK Template Type	Empty
      MDK Template Type	<Empty>
      Your Project Name	ZSAMComponent
      Your Application Name	ZSAMComponent (auto populated based on Project Name)
      Target MDK Client Version	MDK 6.0+ (For use with 6.0 or later clients)
      Choose a target folder.	/home/user/projects (auto populated based on preferences)

      Note

      For additional information on the MDK Project Creation, refer https://developers.sap.com/tutorials/cp-mobile-dev-kit-offline-app.html

      Hint

      After the creating the new project, you can view both projects in the workspace. However, if you only see one project, from the menu choose File → Close Folder. Then, choose Files and folders. Enter /home/user/projects. Choose OK. Choose Open Workspace and choose the default projects workspace.

      

   6. Once the new project is created in the workspace you see files and folders within.

      

2. Add a reference to the standard application.

   1. Choose Application.app

   2. Right click, and from the menu choose Open With → Select Text Editor.

   3. Add the following code:

      

   4. Maintain the Localization and ReferenceApplications fields as shown in the following image.

      

      Note

      When there are no options in the Localization field, yo can skip this entry.

The component project uses the same back-end oData service as the SAP Service and Asset Manager project. So, copy the AssetManager.service and OnlineAssetManager.service service files from project SAPAssetManager.

1. Copy the AssetManager.service from the SAPAssetManager project to your custom ZSAMComponent.

   1. Expand the SAPAssetManager project.

   2. Locate and open the Services folder.

   3. Right-click the AssetManager.service and choose Copy... or use (Ctrl+C).

      

2. Paste (Ctrl+V) the AssetManager.service file into the ZSAMComponent project. Then Sync the Service to download the updated Metadata (Objects).

   1. In the ZSAMComponent project, right-click Services and choose Paste (or Ctrl+V).

      Note

      If the "right click copy and paste" does not work in your browser, choose Ctrl+C and Ctrl+V.

   2. In the Services folder under the ZSAMComponent project, double-click AssetManager.service.

      Note

      When you copy the Service, you may be prompted to log in to Cloud Foundry. This information is used by the service to connect to SAP back end to Sync the Metadata (refresh the Object).

   3. Enter the credentials provided by your Trainer (email_address/password).

   4. Choose the Cloud Foundry Target Organization and CF Space. Choose the space based on the group assigned to your ID.

   5. Select the mobile application from the Mobile Services.

   6. Choose Sync Objects to refresh the objects from the service.

      

   7. In the Refresh Objects pop-up, choose OK.

      Note

      When you choose Sync Service, the corresponding xml file (with the same name as .service file) is updated. This xml file is the metadata and fetched from the back end.

      If for any reason you cannot perform the sync service (connectivity to backend is broken and so on) as a workaround, you can get the metadata file and upload it manually, so that the latest OData Model changes in the back end get reflected in your project.

3. Copy the OnlineAssetManager.service from the SAPAssetManager project to your custom project ZSAMComponent.

   1. Repeat the steps that you have performed for the AssetManager.service file for the OnlineAssetManager.service file.

      Note

      The online service has a reference to a Rule /SAPAssetManager/Rules/Common/Passport/GetSAPPassportHeaderValue.js

      The Rule in-turn has a reference to a Global /SAPAssetManager/Globals/Passport/ComponentName.global.

      Copy both these files into the corresponding folders of the ZSAMComponent project. You have to create a Passport folder. Once you copy the files, change the reference to the current project (ZSAMComponent).

   2. In ZSamComponent, find the created passport folder under the Rules folder.

   3. Paste a copy of the GetSAPPassportHeaderValue.js from the SAP AssetManager project.

   4. In the code, change the reference to the current project (ZSAMComponent).

      

   5. In ZSamComponent, find the created passport folder under the Globals folder.

   6. Paste a copy of the ComponentName.global from the SAP AssetManager project.

      

   7. In the AssetManager.service and OnlineAssetManager.service files, change the reference to the current project (ZSAMComponent).

      

1. Copy the overview page from the SAPAssetManager Component into the ZSAMComponent.

   1. In the SAPAssetManager project, navigate to the Pages folder.

   2. Right-click the Overview page and select Copy.

   3. Navigate to the ZSAMComponent project.

   4. Right-click Services and choose Paste.

2. Open the Overview.page in the ZSAMComponent project for editing.

   1. To open the layout editor in the Business Application Studio, in the ZSAMComponent project double-click the Overview.page.

   2. Ensure both the left and right pane of the layout editor are enabled.

   3. Choose the Outline tab to switch to the Outline view.

   4. In the layout, use the scrollbar to navigate down to choose the section high_wokrorders. Select the corresponding SectionObjectCollection in the outline.

      

3. In the Outline, choose Section Header to change the caption of the High Priority Work Orders section to Active Work Orders.

   1. Choose High_Workorders in the section header.

      

      Note the Syntax of the caption $(L,high_workorders). This syntax is used to display a string from the i18n.properties file. The i18n.properties file is used by translators to convert strings to other languages. During runtime, this string displays the caption in the appropriate language that has been set for the device. As a result, it is good practice to use this file to maintain all strings displayed to the user.

   2. In the Properties tab, change the caption to Active Work Orders.

      

4. Edit the Active Work Orders section only to display the workorders that have Started or are On Hold.

   1. In the Outline view of the Overview.page, choose SectionObjectCollection.

   2. In the Properties tab in the Target section, to bring up the Query Options Express Editor, choose the link option next to the QueryOptions field.

      The Query Options Express Editor window displays with the default query criteria.

   3. Choose Clear to remove the existing query criteria.

      $expand=OrderMobileStatus_Nav&$filter=Priority eq '1' or Priority eq '2'&$orderby=Priority,DueDate,OrderId

   4. Enter the following expression in the Expression Value box:$filter=OrderMobileStatus_Nav/MobileStatus eq 'STARTED' or OrderMobileStatus_Nav/MobileStatus eq 'HOLD'

      

   5. Choose OK.

      The Active Work Orders sections now only display the workorders that are Started or On Hold.

5. Update the count in the Active Work Orders section as it is still showing the count of the number of the High Priority Work orders.

   1. Right-click the Rules folder and choose New Folder and enter the name WorkOrders.

   2. Right-click the WorkOrders folder and choose New File.

      

   3. Enter WorkOrdersActiveCount.js in the File Name field.

   4. Double-click WorkOrdersActiveCount.js to edit it.

   5. Create a function as shown in the screenshot and use this code to get the number of Active Work Orders:

      Code Snippet

      Copy codeSwitch to dark mode

      12345
      export default function WorkOrderActiveCount(context){
        return context.count('/SAPAssetManager/Services/AssetManager.service',
        'MyWorkOrderHeaders', "$filter=OrderMobileStatus_Nav/MobileStatus eq
        ‘STARTED’ or OrderMobileStatus_Nav/MobileStatus eq ‘HOLD’");
      }

      

   6. Save the file and close it.

   7. In the Outline.page view, choose sap.mde.SectionFooter (under SectionObjectCollection choose content, and then choose SectionFooter).

   8. In the Properties tab, in the Appearance section, choose the link option next to the AttributeLabel field.

      

   9. In the Object Browser, double-click the newly created rule.

      /ZSAMComponent/Rules/WorkOrders/WorkOrdersActiveCount.js

   10. Choose OK.

   11. Choose File → Save → .

       The count now shows the number of work orders that are Started or On Hold.

6. The count has been updated. However, when we choose the See All navigation link, the Work Order List still shows all of the High Priority Work Orders. Change this so that it shows all Work Orders. For this we overwrite one of the existing standard rules.

   Note

   In this exercise, we overwrite one of the existing standard rules.

   1. In the SAPAssetManager workspace, navigate to Rules → WorkOrder → ListView → WorkOrdersHighPriorityListView.js

      

   2. Right-click the file and choose Copy(Ctrl+C).

   3. Navigate to ZAMComponent → Rules → WorkOrders. Right-click WorkOrders, and choose Paste (Ctrl+V).

   4. Double-click the newly added file to open it.

   5. On line 7, change the value of the isHighPriorityList property to be false: isHighPriorityList: false,

   6. Hover the mouse over the import statement (Line 1) and verify that it is pointing to the correct path. If necessary, update the logger path ../../../SAPAssetManager/Rules/Log/Logger and this related path refers to "/home/user/projects/SAPAssetManager/Rules/Log/Logger".

   7. From the menu, choose File → Save.

      Note the import statement on Line 1. The path to the Logger file is a relative path. ../../log/logger indicates that the Logger file can be found by going two levels above the current directory and then going into the Log directory. This path must change based on the relative path from the current location because the file has been overwritten in the custom project.

      So, in this exercise, from the Rules directory in the ZAMComponent project, we must go two levels up and then go into the SAPAssetManager project and get the full path to the logger file. So, the logger path looks like this: ../../../SAPAssetManager/Rules/Log/Logger.

      

You can use the scripts from the ZSAPComponent zip file (ZSAPComponent folder) to perform the steps that require code; or use the following steps.

1. Create a new CIM (component integration metadata) file for ZSAMComponent in SAPAssetManager project.

   Note

   The CIM file is created in the SAPAssetManager project. The file contains the overrides. When you Deploy and Activate, the MDKWebpackFactory project is ether created (first time) or updated.

   1. Right-click SAPAssetManager → Application.app file and choose MDK: New CIM File.

   2. In the CIM Creation page, make selections.

      Use the following information:

      • Project Name: Choose ZSAMComponent from the Project Name dropdown.
      • Application Name: Choose ZSAMComponent from the drop-down menu.
      • CIM File Name: ZSAMComponent_ZSAMComponent
      • Component Version: nnnn (where nnnn is the product release For Ex: 2205.)

   3. On the Confirmation page, choose Finish.

   4. In the SAPAssetManager, verify that ZSAMComponent_ZSAMComponent.cim has been created.

      

2. Create an integration point (page) for the Overview.page.

   Use the following information:

   Field	Value
   Source	/ZSAMComponent/Pages/Overview.page
   Target	/SAPAssetManager/Pages/Overview.page

   1. Double-click the ZSAMComponent_ZSAMComponent.cim file.

   2. In the Integration Points section, choose the + icon.

   3. Choose Page.

      

   4. In the Page Integration Point section, choose the Link icon next to the Source field to open the Object browser.

   5. The Object Category shows Page. Enter Overview in the search field.

      

   6. From the search results, choose ZSAMComponent(/ZSAMComponent) → Pages → Overview.page.

   7. Choose the Insert button to Inset the result into the Expression box.

   8. Choose OK.

   9. To save the integration point setting, choose the 'Blue Check.'

   10. Similarly, for the Target, locate the /SAPAssetManager/Pages/Overview.page.

   11. From the search results, choose SAPAssetManager(/SAPAssetManager) → Pages → Overview.page.

   12. Choose the Insert button to Inset the result into the Expression box.

   13. Choose OK.

   14. To save the integration point setting, choose the blue Check button.

       

3. Create an integration point (rules) for WorkOrdersHighPriorityListView.js.

   Use the following information:

   Field	Value
   Source	/ZSAMComponent/Rules/WorkOrders/WorkOrdersHighPriorityListView.js
   Target	/SAPAssetManager/Rules/WorkOrders/ListView/WorkOrdersHighPriorityListView.js

   1. In the Integration Points section, choose the + icon.

   2. Choose Rule.

   3. Repeating the steps for each page, search for WorkOrdersHighPriorityListView choose the Source from ZSAMComponent Project and the Target from SAPAssetManager Project.

   4. Choose File → Save All → .

      

      Note

      • We didn’t have to create an Integration Point for the new file WorkOrdersActiveCount.js that was created in the ZSAMComponent project. The integration point is only necessary when the component is overwriting any files in the SAP Service and Asset Manager project.
      • The Crew Component also has an Overview page that overrides the Overview page of the SAPAssetManager project. The ZComponent also has the Overview page so this causes a conflict. However, the CIM files are processed in alphabetical order and the last one wins. Therefore, the CIM file of the ZComponent will win and the Overview page of the ZComponent will be displayed in the Mobile Client (that is, you will no longer see the Crew information).

1. Deploy the Metadata changes to the SAP Business Technology Platform Mobile Services mobile app.

   1. Right-click the SAPAssetManager → Application.app file in the workspace. From the context menu, choose MDK Deploy to Mobile Services.

   2. Accept the default destination (CF_DEST_IAM150_##) and Application Id (com.sap.iam150_##) values entered from the previous deployment.

      Result

      Once the MDK App is deployed successfully (that is, /MDKWebpackFactory is rebuild and you get the message "(MDK Webpack) Application deployed successfully. Current Revision:<xx>").

   3. On your mobile device, close and relaunch the mobile app.

   4. A pop-up displays with the message: Update (via re-launching the app).Check for Updates. Choose the OK Confirm button to download new version of the app.

      After the App definition update, verify that your changes are displayed in the Overview page.

      Note

      The Active Work Orders shows the number of work orders that are in STARTED or HOLD status.

1. Start a Work Order.

   1. Choose the Work Orders tile in the Overview page.

      This opens the work order list page.

   2. In the work order list page, choose a work order you want to start. This opens the work order details page.

   3. Choose the Start Work Order button.

   4. Choose Start. You will notice that the work order status has changed to STARTED.

   5. Navigate back to the Overview page. You now see the work order that you have started under the Active Work Orders.

      Result

      This feature enables users to quickly launch the active work orders from the overview page without navigating into the work orders list page.

      

1. Perform the oData Mobile Data Object (oMDO) Configuration.

   1. Launch the Mobile Application Framework (MAIF) configuration panel using transaction /SYCLO/CONFIGPANEL.

      Note that you have to use /n or /o to launch transactions in the namespace (/N /SYCLO/CONFIGPANEL).

   2. The transaction launches a Web Dynpro App (Refer the following screenshot):

      

   3. In the configuration panel, open the oData Mobile Data Object Configuration.

   4. On the next screen, use the Mobile Application Filter to restrict the app or use the navigation tree on the left to choose your app ZIAM150_SAP_ASSET_MANAGER_##.

      

2. Search for oMDO using the keyword work and choose ZIAM_##_WORK_ORDER_GENERIC from the list.

   1. Choose Change.

   2. Navigate to the Field Selection.

   3. Search or scroll to find the field ANLZU (System Conditions) field.

   4. Set the Active checkbox for the field ANLZU.

   5. Choose Save to save your changes.

      

1. Add a field to Model Properties.

   Use the following data:

   Field	Value
   Property Name	SystemConditions
   Configuration Nullable	= TRUE
   Configuration Extension	= TRUE
   Custom Label	System Conditions
   Visible in List Screen	= TRUE
   Visible in Details Screen	= TRUE
   Searchable	= TRUE

   1. In the config panel home, navigate to the oData Model Configuration.

      

   2. Use the Mobile Application Filter (No. 1) to restrict the selection to your app.

      

   3. Use the search bar to filter the Entities. Use the keyword work (No. 2).

   4. For the list of Entities choose MyWorkOrderHeader (No. 3).

   5. Navigate to the Properties List tab.

   6. To add another property, choose Change (No. 4).

   7. Choose Add Property and use the oMD Field Name drop down to choose ANLZU (System Conditions).

   8. As Property Name enter SystemConditions (see table above).

   9. As Configuration Nullable set = TRUE (see table above).

   10. Enter the remaining values from the table above.

   11. Save your changes (capture changes into transport).

1. Test Changes via Gateway Client.

   Use the following data:

   Field	Value
   HTTP Method	GET (Radio button)
   Request URI	/sap/opu/odata/sap/ZIAM_##_SAP_ASSET_MANAGER/?$format=xml
   Protocol	HTTP

   1. Log in to the SAP GUI and launch transaction /N/IWFND/GW_CLIENT.

      Note

      You must use /n to start the transaction.

   2. In the Gateway client, enter the data from the preceding table.

      Note

      Alternatively, you can launch the same via /IWFND/MAINT_SERVICE - Activate and Maintain Services.

   3. Choose Enter to ensure your service returns the metadata.

   4. Choose the EntitySets button (Shift + F1) to open the EntitySets and choose MyWorkOrderHeaders.

      Note

      The RequestURI is /sap/opu/odata/sap/ZIAM_##_SAP_ASSET_MANAGER/MyWorkOrderHeaders.

   5. Choose Execute (F8) and verify that the System Conditions is part of the output data.

      Note

      Proceed to MDK Development only after successfully verifying the test results in SAP.

1. Once you have confirmed that the SystemCondition is part of the Gateway payload, you sync the service to update the objects in the MDK Project.

   1. Log in to the SAP Business Application Studio.

   2. Open ProjectZSAMComponent.

   3. Navigate Services → AssetManager.service.

   4. Once within the AssetManager.service, choose the Sync Service button to update the model.

      

   5. After completing the sync service, check either the AssetManager.xml or the Objects to see if the property was downloaded. In the XML it is the entitytype name = MyWorkOrderHeader. Under Objects, you find: MyWorkOrderHeader.object.

2. Optional: You can deploy the changes so far and check if the SystemConditions is downloaded to the device.

   1. Navigate to the Application.app and right-click and choose MDK: Deploy from the context menu to deploy the app to your mobile app in SAP Business Technology Platform Mobile Services.

   2. Once the App deployment is successful, you can perform a sync from the mobile device and then download the .udb files from the device and using ILOData, check the database to confirm that there is one WorkOrder that has a SystemCondition value of ‘1’.

      Note

      ILOData is covered Unit-6. If you are not familiar with ILOData, you can skip these steps for now.

1. Add the SystemConditions property to the Work Order Details Page.

   Use the following data:

   Field	Value
   Folder name	WorkOrders

   1. In the Asset Manager repository, locate the WorkOrderDetails.page and right click copy (Ctrl+C).

   2. In the ZSAMComponent project navigate to the page, create a folder WorkOrders.

   3. Paste the WorkOrderDetails.page to the ZSAMComponent → WorkOrders folder.

      

   4. To open the file in the code editor, right-click the file and select Open With… → Text Editor.

      Single clicking on the file in the explorer opens the file in the MDK Page Editor.

   5. Choose Text Editor Default.

      

   6. Find the Section.Type.KeyValue section named WorkOrderOperationDetailsSection and choose the QueryOptions lines.

      Alternatively search for the field PlannerGroup which is part of the QueryOptions.

      

   7. The {@odata.readLink} property means that we are pointing to the current entity that the page is bound to which in this case is the current WorkOrder.

   8. Add the new property SystemCondition to the $select query in the QueryOptions in the WorkOrderOperationDetailsSection.

      This means that we are now fetching this new property from the offline database.

2. Add a new KeyAndValues object like the existing one.

   Use the following data:

   Field	Value
   Value	/ZSAMComponent/Rules/WorkOrders/Details/WorkOrderDetailsSystemCondition.js
   _Name	KeyValue106
   KeyName	"$(L,systemCondition)"

   1. Add the following code:

      Code Snippet

      Copy codeSwitch to dark mode

      123456
      {
      "Value": "/ZSAMComponent/Rules/WorkOrders/Details/WorkOrderDetailsSystemCondition.js", 
      "_Name": "KeyValue106",
      "KeyName": "$(L,systemCondition)"
      } 
      

      

3. For the KeyName, add a new translation string in i18n.properties.

   Note

   Use Ctrl + Hover mouse over the field name to navigate directly to the i18n file. You can use the PlannerGroup field to enter a new value for SystemCondition so that the field name strings are together.

   1. Copy the i18n_en.properties from the SAPAssetManager->i18n folder to the ZSAMComponent -> i18n folder.

   2. Open the Application.app with a text editor and change the i18n.properties to i18n_en.properties.

   3. Open the i18_en.properties as well and add the new string, which looks like this: systemCondition=System Condition

      Note

      If required change the Application.app Localization to i18n.

      

   4. Add context for the new string. Find the section called Context Information for Translators.

   5. Check that line 10 reads:

      "Localization": "/ZSAMComponent/i18n/i18n_en.properties",

4. For the Value, add a new rule. This rule checks to see if the value is ‘1’ or not. If the value is ‘1’ then we display that the System is In Operation. Otherwise, we show that the System is not in operation.

   Use the following data:

   Field	Value
   File name	WorkOrderDetailsSystemCondition.js

   1. Create a new folder in Rules → WorkOrders → Details.

   2. Create a new file with the name WorkOrderDetailsSystemCondition.js

   3. Enter the following code:

      Code Snippet

      Copy codeSwitch to dark mode

      12345678910111213141516
      /**
      * Display the system condition
      * @param {IClientAPI} clientAPI
      */
      export default function WorkOrderDetailsSystemCondition(clientAPI) {
      let binding = clientAPI.binding; 
      
      //The binding object is the MyWorkOrderHeader object from the WorkOrderDetails.page
      if (binding.SystemCondition && binding.SystemCondition === '1') { 
      //First check if SystemCondition exists and then whether it is equal to '1'
      return clientAPI.localizeText('in_operation'); 
      //Use the MDK's localizeText API to refer to an i18n string
      } else {
      return clientAPI.localizeText('not_in_operation');
      }
      }

      

   4. Add the new strings to the i18n_en.properties.

      

      Note

      For additional information on the MDK API, check the API Reference: https://github.wdf.sap.corp/pages/snowblind/api-reference/.

5. Update the CIM file.

   Use the following data:

   Source	Target
   /ZSAMComponent/Pages/Overview.page	/SAPAssetManager/Pages/Overview.page
   /ZSAMComponent/i18n/i18n_en.properties	/SAPAssetManager/i18n/i18n_en.properties
   /ZSAMComponent/Pages/WorkOrders/WorkOrderDetails.page	/SAPAssetManager/Pages/WorkOrders/WorkOrderDetails.page
   /ZSAMComponent/Rules/WorkOrders/WorkOrdersHighPriorityListView.js	/SAPAssetManager/Rules/WorkOrders/ListView/WorkOrdersHighPriorityListView.js

   

   1. Update the CIM file.

   2. Deploy the changes from BAS to Mobile App in CF.

6. Update the App definitions.

   1. Log in to the mobile app on your mobile device and relaunch the app.

   2. When the app is minimized and launched, you are prompted to update the app definitions.

   3. Click on Ok to download the App definitions deployed to BTP.

7. Verify that your changes are reflected on the mobile app.

   1. From the Overview Page, choose the work order with values in the System Conditions as tested in the SAP Gateway.

   2. In the mobile device, from the Overview Page, open the work order and navigate to the Details Page.

   3. Check if the System Conditions field is displayed and has a value reflected from the back end.

   4. Go to another WorkOrder that has the SystemCondition property value set to 0. Verify that the Not in Operation text is displayed instead.