Example: Edit and Debug a MDK app in VS Code

Former Member · ‎2018 Sep 07

As you may have heard, Mobile Development Kit (MDK) now has an extension available for Visual Studio (VS) Code. I recently tested out some of the editing and debugging features available in the extension. So, I created this blog and will use my very simple application as a reference to walk you through editing and debugging a Mobile Development Kit (MDK) application in VS Code.

Mobile development kit (MDK) is a feature of SAP Cloud Platform Mobile Services. If this is your first introduction to the Mobile Development Kit, I suggest you first review the Learning Map which provides overview topics, blogs, videos, and tutorials.

For an introduction of the MDK extension for VS Code, check out the Mobile Development Kit Extension for Visual Studio Code blog. You can also review the install, config, and general information in the MDK help portal

Please note that SAP Web IDE continues to be the primary development editor for Mobile Development Kit. The focus for VS Code is for debugging and editing your MDK application.

Prerequisites

Already know how to create simple MDK applications in SAP Web IDE

Install the MDK extension [link to help portal]

Create a simple MDK application in SAP Web IDE. The application will must contain a rule that keeps the client from grabbing updates from Mobile Services. I provide an example below.

My MDK Application - MDK_Demo
The application I created has a Customer List page and Customer Detail page. You don’t have to pre-create this exact application, but I put the details of the application here as a reference if you want to make it easier to follow the blog.

Note: A rule similar to OnWillUpdate.js (below) is required for ANY MDK application in VSCode. So, even if you create a different application, please add the OnWillUpdate.js and update the Application.app file as stated below. The MDK client was made to automatically download updates from Mobile Services. The rule allows the user to reject the update so that VS Code can display the application in the client.

Here is an outline of my application
- Application Name: MDK_Demo
- OData Backend Service - Sample Service from Mobile Services
- Actions
  - Offline OData Initialize
- Pages
  - My Customer List – Section Page
    - Control: ContactCellTable
      - Target: Customers
      - Headline: Last Name
      - Subheadline: First Name
      - Description: City
      - Search Enabled: true
      - Search Placeholder: Customer Search
      - Empty Section - Caption: No Customers Found
      - Data – Phone: Customer Phone
      - Data – Email: Customer Email Address
    - Customer Detail – Section Page
      - Control: Object Header
        
        BodyText: CustomerId
        
        Description: EmailAddress
        
        HeadlineText: LastName
        
        Subhead: FirstName
      - Rule
        
        OnWillUpdate.js

OnWillUpdate.js (rule example)

var dialogs = require('ui/dialogs');









export default function OnWillUpdate(clientAPI) {



return dialogs.confirm("Update now?").then((result) => {



if (result === true) {



return Promise.resolve();



} else {



return Promise.reject('User Deferred');



}



});



}

Application.app
- Main Page: My Customers List
- On Launch: OfflineInitialization.action
- OnDidUpdate: OfflineInitialization.action
- OnWillUpdate: OnWillUpdate.js

Import App into VS Code

To begin building and debugging your MDK application, export an existing application from the MDK editor in SAP Web IDE. Extract it and open the main folder in VS Code.

Note: You can manually export your application from SAP Web IDE, but I recommend you use a Git repository if you will be going back and forth between the two tools.

If you have not done so already, export your application from SAP WebIDE.

In VS Code, I click on the Explorer icon on the left and click on Open Folder.

I find my app called MDK_Demo and add to VS Code.

Edit My App

Now that my MDK application is in VS Code, I can make a few changes to my application before I start debugging. I realize that I have not yet added navigation from My Customer List page to the Customer Detail page. I don’t need to go back to Web IDE for that. I can do that and other customizations directly in VS Code. I will make the following changes to my application.

·      Add navigation from My Customer List to Customer Detail

·      Create an About Page

·      Add navigation action to open the About page

·      Create a Rule to call the navigation action

·      Add an Action Bar item on the My Customer List Page to call the rule

·      Add a breakpoint in the rule for rule debugging

Add Navigation Action to open Customer Detail page

From VS Code, I can easily create MDK Actions. In the menu structure, I right-click on Actions and select MDK: New Action.

I am given a list of actions I can choose from and I start typing Nav to see and select the Navigation Action.

I give it the name NavtoCustomerDetail and I am dropped into the code editor for the NavtoCustomerDetail action.

I type “ on the next line to see what options are available to me. I scroll down to select PageToOpen and hit enter.

Inside the new “ “, I type / and the editor provides me the option to select the base URL for pages. I hit enter.

The editor immediately shows me already created pages to choose from. I choose CustomerDetail.page and hit enter. I save and close the page. I notice that the editor automatically runs the build task in the background.

Add Navigation Action to My Customer List

Now that I’ve created the navigated action, I’ll add the action to the My Customer List page so that when a user selects a customer from the list, they are navigated to the detail page for that specific customer.

In the page, I scroll down to where I see City, LastName, and FirstName and add another line and type “OnPress”: “/MDK_Demo/Actions/NavtoCustomerDetail.action”. Save the changes.

Note: I add this as an example even though I didn’t get help from the VS Code editor. I like the new ContactCell control and I use it from SAP Web IDE. This is a new control where helper support may not be available for all options. That doesn’t stop you from adding that metadata. The editor will tell you if there is an issue with what you are doing.

View the App

I like to view my changes at each step so I can adjust and view again. As long as you have followed the installation and configuration steps, you should be able to click Debug -> Start Without Debugging.

The first time I clicked Start Without Debugging, VS Code brought up the launch.json file. It needs the AppRoot updated to know how to contact your MDK Client. If VS Code doesn’t automatically bring up this file, you can open by clicking on the debug icon

on the left, then click on the gear icon

at the top of the screen

and it will bring up the launch.json.

Replace ${workspaceRoot} for appRoot under Launch on iOS with your path to your MDK client main folder. Mobile Dev Kit is the app name I provided the client when I ran create-client. For more information about this review the help portal.

For the VS Code menu, click on Debug -> Start Without Debugging.

My Customer List page appears in my simulator. I click on a customer and I am navigated to the Customer Detail page.

I won’t mention to run again, but I personally view the application at each step of my progress. It is up to you how often you want to view the changes.

Create About Page

Okay, now I’ll provide the users an About page to view the app version and other details about the application. Right-click on Pages in the left navigation tree. Click on MDK: New Page.

The editor has you select whether you want to create a FormCell page or Section page. I select Section page and hit enter. Now, similar to the action, I type a name for my page – About. I am dropped into the code editor for that page.

This will be a simple About page. It will display a welcome message and the app definition version. I first create two simple global variables. I right-click on Globals and select MDK: New Global Variable.

Based on what you have already done in this blog, you should be able to make the global variables look like the images below.

AboutWelcome.global

AppVersion.global

Now go back to the About page and use the global variables you just created to display information in the page. This is useful if you plan to use this information elsewhere in the application later.

Click into the opening brackets [] for Sections and hit enter now add { and begin typing to add two SimplePropertyCell. Type “ and select _Type when offered.

Select Section.Type.SimplePropertyCollection

Now go to the next line and add SimplePropertyCells which holds more than one cell.

Now add you first SimplePropertyCell. Inside the brackets of SimplePropertyCells add { then “ to bring up and select the option for SimplePropertyCell.

Now add “ inside the brackets of SimplePropertyCell to see available options. Select Key Name and press enter.

Now, the editor suggests to use an action, rule or global variable. For KeyName, just enter Welcome.

Now, add Value similar to how you added KeyName. When you add Value, the editor offers options, select /MDKDemo/Globals/ then select the AboutWelcome.global. Also add “AccessoryType”: “none” so that it does not add any indicators of clickability to this section.

Add one more SimplePropertyCell to the SimplePropertyCells collection with the following that looks like the following.

The entire About page looks like the following

Create Navigation Action to open About Page

Now create another navigation action. Name it Navt2About and select to have it open the About page. The resulting action should look like the following.

Create Rule to Execute About Action

Now, I want to begin using and debugging rules in my application. Eventually my rule will be more complex, but for the purposes of this blog, I just want my rule to execute my Nav2About action. Right-click on Rules and select MDK: New Rule. Name it Nav2About.js. In the rule add the following. The editor will help you along the way as it has done previously.

return context.executeAction("/MDK_Demo/Actions/Nav2About.action");

The final result should look like the following image.

Update Customer List to Navigate to About using the Rule

Now, add an ActionBar item to the top right of the page that calls the Nav2About rule. Right under the Caption, Add ActionBar -> Items and the following options.

“Text”: “About”

“Position”: “right”

“OnPress”: “/MDK_Demo/Rules/Nav2About.js”

It should look similar to the image below.

Add Breakpoint to the Rule

VSCode is recommended to help with MDK rule debugging. You can add breakpoints to your rules and make sure things are working as expected. Open Nav2About.js and add a breakpoint.

Debug the application

I’m assuming you have been saving along the way. Make sure to save now to have the bundle build run or optionally you can run Tasks -> Run Bundle Tasks and select MDK: bundle build – MDK_Demo.

Now, start debugging.

The editor deploys the app to the simulator. You view the deployment progress in the Debug console.

As a reminder, make sure to Cancel the updates as your client is asking to grab updates from Mobile Services. Once it does that it can no longer get the updates from VSCode. It is a current limitation of the MDK client. The app launches. Click on About at the top right of the page.

The editor captures the breakpoint.

Simply click on the Continue icon

at the top of the page to move past the breakpoint.

If using a Git repository, grab the updated app and continue in Web IDE and deploy to SAP Cloud Platform Mobile Services.

For more information on using VS Code to debug MDK rules, check out this blog, How to debug rules in the mobile development kit client.

Happy Building, Editing and Debugging.