Need to build a mobile application that is always online? Does your backend data change often and you need the most current information all the time? Maybe an pure online application is for you.
I received a few questions recently about building online applications with Mobile Development Kit (MDK). Personally, I’ve done mostly offline applications for the fast performance and I can’t really tell that I’m offline as the app works just like an online application. However, I understand there are lots of use cases and needs to build an online application. I recently built a MDK online application and am sharing the details here in this blog.
For simplicity, this blog describes building a MDK “online only” application. I am also looking at mixed online and offline MDK applications, so check back for future blogs and/or guidance on this topic.
The 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.
Assumptions
High level steps
Once you have your SAP Cloud Platform Mobile Services MDK application and backend connection setup, go to SAP Web IDE and create your MDK application.
Note: One of the newer features in MDK is the MDK perspective which filters the menu options to MDK specific items for you. In this blog, I use the MDK perspective, so if your menus don’t look like mine, select this icon in Web IDE.
Create a new MDK Service connection to connect to your OData service. I used the Mobile Services Sample Service. If you need help here, check out the SAP Cloud Platform Tutorial for Mobile Services setup (video#2).
Note: You will see above that the Enable Offline Store checkbox is unchecked. This is important for online only application. It is checked by default. We do love offline!
Note2: Also, my Service URL (above) is set to /destinations/WebIDE2MS. The tutorial videos may have you do /destinations/mobileservices_demo. I have so many destinations and I get confused what they are used for, so I have been using more descriptive names. WebIDE2MS = From Web IDE to Mobile Services in my head.
Let’s make it an online application. For MDK applications, whether your applications runs online or offline depends on your data source and selecting the appropriate MDK actions. For online applications, add an OData Create and OData Open action. This replaces the OData Offline Initialize action for offline applications.
We will now create a couple of message actions - success message and failure message. We want to provide the user feedback. If the application is able to connect to the OData service and grab the appropriate data, a quick message saying app initialization succeeded works well. If something failed while grabbing data from the backend, let’s let the user know that something went wrong.
Create a successful message action.
Create a failure message.
Close the message actions. Open the ODataCreate action and expand the Common Action Properties. For the Success Action field, add the ODataOpen action. For the Failure Action field, add the ODataFailureMessage action. Save and Close the ODataCreate action.
Note: By adding the ODataOpen action in the success field, we are linking two actions together. We can only move from Create to Open if the Create action succeeded. This does that check for you without having to write any business logic to handle that.
Open the ODataOpen action and expand the Common Action Properties section. For the Success Action field, add the ODataSuccessMessage action. For the Failure Action field, add the ODataFailureMessage action. Save and Close the ODataOpen action.
Now, update the Application.app to add the ODataCreate action.
At this point, you have setup your application to be an online MDK application. Building the rest of your application is the same as if you were building an offline application.
Let’s test your online application by creating a simple page that uses data from the backend. I created a Product List page.
Create a section page called Product List. Then drag the Object Table control onto the page.
Below are the properties I set for the Object Table control. You don’t have to do the same, but I provided the information as a reference.
Properties
Don’t forget to open Application.app again and update the Main Page field with the Product List page or whatever page you created.
Deploy the application to your MDK client to view the online app you just created.
Now take your application further by adding additional pages, actions, rules, etc.
You can review other MDK videos and blogs to add additional features to your application. The videos and blogs may reference an offline application, but as you learned here, you can easily do the same thing with an online application. Check out the Latest MDK content blog and try adding additional capabilities to your online application today.
Check out this tutorial: https://developers.sap.com/tutorials/cp-mobile-dev-kit-online-app.html
I received a few questions recently about building online applications with Mobile Development Kit (MDK). Personally, I’ve done mostly offline applications for the fast performance and I can’t really tell that I’m offline as the app works just like an online application. However, I understand there are lots of use cases and needs to build an online application. I recently built a MDK online application and am sharing the details here in this blog.
For simplicity, this blog describes building a MDK “online only” application. I am also looking at mixed online and offline MDK applications, so check back for future blogs and/or guidance on this topic.
The 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.
Assumptions
- You have previously built an MDK offline application.
High level steps
- Create MDK application project in SAP Web IDE
- Connect to an online data service such as Sample Service (v2)
- Create Online actions
- Create pages, actions, rules, etc similar to an offline application
Once you have your SAP Cloud Platform Mobile Services MDK application and backend connection setup, go to SAP Web IDE and create your MDK application.
Note: One of the newer features in MDK is the MDK perspective which filters the menu options to MDK specific items for you. In this blog, I use the MDK perspective, so if your menus don’t look like mine, select this icon in Web IDE.
Create a new MDK Service connection to connect to your OData service. I used the Mobile Services Sample Service. If you need help here, check out the SAP Cloud Platform Tutorial for Mobile Services setup (video#2).
Note: You will see above that the Enable Offline Store checkbox is unchecked. This is important for online only application. It is checked by default. We do love offline!
Note2: Also, my Service URL (above) is set to /destinations/WebIDE2MS. The tutorial videos may have you do /destinations/mobileservices_demo. I have so many destinations and I get confused what they are used for, so I have been using more descriptive names. WebIDE2MS = From Web IDE to Mobile Services in my head.
Let’s make it an online application. For MDK applications, whether your applications runs online or offline depends on your data source and selecting the appropriate MDK actions. For online applications, add an OData Create and OData Open action. This replaces the OData Offline Initialize action for offline applications.
We will now create a couple of message actions - success message and failure message. We want to provide the user feedback. If the application is able to connect to the OData service and grab the appropriate data, a quick message saying app initialization succeeded works well. If something failed while grabbing data from the backend, let’s let the user know that something went wrong.
Create a successful message action.
Create a failure message.
Close the message actions. Open the ODataCreate action and expand the Common Action Properties. For the Success Action field, add the ODataOpen action. For the Failure Action field, add the ODataFailureMessage action. Save and Close the ODataCreate action.
Note: By adding the ODataOpen action in the success field, we are linking two actions together. We can only move from Create to Open if the Create action succeeded. This does that check for you without having to write any business logic to handle that.
Open the ODataOpen action and expand the Common Action Properties section. For the Success Action field, add the ODataSuccessMessage action. For the Failure Action field, add the ODataFailureMessage action. Save and Close the ODataOpen action.
Now, update the Application.app to add the ODataCreate action.
At this point, you have setup your application to be an online MDK application. Building the rest of your application is the same as if you were building an offline application.
Let’s test your online application by creating a simple page that uses data from the backend. I created a Product List page.
Create a section page called Product List. Then drag the Object Table control onto the page.
Below are the properties I set for the Object Table control. You don’t have to do the same, but I provided the information as a reference.
Properties
- Target: Products
- Description: Products -> Short Description
- Subhead: Products -> Category
- Substatus: Products -> Price
- Title: Products -> Name
- EmptySection – Caption: “No Products Found”
Don’t forget to open Application.app again and update the Main Page field with the Product List page or whatever page you created.
Deploy the application to your MDK client to view the online app you just created.
Now take your application further by adding additional pages, actions, rules, etc.
You can review other MDK videos and blogs to add additional features to your application. The videos and blogs may reference an offline application, but as you learned here, you can easily do the same thing with an online application. Check out the Latest MDK content blog and try adding additional capabilities to your online application today.
Check out this tutorial: https://developers.sap.com/tutorials/cp-mobile-dev-kit-online-app.html
- SAP Managed Tags:
7 Comments
