Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
liat_b
Product and Topic Expert
Product and Topic Expert
1,877

SAP Build Code provides a turn-key environment for coding, testing, integrating, and managing application lifecycles . It also provides a single entry point for projects: the SAP Build lobby.

It is now possible to create and manage SAP Mobile Development Kit (MDK) applications from the SAP Build lobby and continue their development using the Storyboard in SAP Business Application Studio. Let’s see how.

 Step one: Create a new mobile application project from the SAP Build lobby.

  1. From the SAP Build lobby, click on Create  to create a new project.

liat_b_0-1718015437999.png 

2. Select the Build an Application tile.

liat_b_0-1718016891419.png

3. Select the SAP Build Code  tile.

liat_b_1-1718016948058.png

4. Select the Mobile Application tile for your development scenario.

liat_b_2-1718016994755.png

5. Enter a name for your project, select a dev space, and click Create.

liat_b_3-1718017033578.png

Once the project is created it will be presented in the list of projects.

 Step two: Open SAP Business Application Studio and use the Storyboard to boost your development.

  1. Click on the name of the project to access it.

liat_b_5-1718015438018.png

SAP Business Application Studio is showing the new project in the Storyboard.  
The Storyboard provides a detailed graphical view of the components of your application and the connections and dependencies between them.

liat_b_6-1718015438020.png

2. Add a Mobile Services app to your project:

a. Click on the empty tile in the Runtime Resources column.

b. Sign in to Cloud Foundry and select the Org and Space in which you want to create or have a Mobile Services app.
The Mobile Application Services editor opens. This editor allows you to access Mobile Services and perform several actions in Mobile Services directly from within the IDE.
liat_b_7-1718015438021.png

c. Click + to add a new application.

d. Provide a name and ID. (You have the option to create a destination for this app, but you can add one later in the Storyboard as well.)

e. Click Finish.

liat_b_8-1718015438023.png

Once the application is created, click on it to add it to your project.

liat_b_9-1718015438026.png

 

You can see that the app is added to the Storyboard under the Runtime Resources column as it represents the app in Mobile Services. The application information is saved in the .service.metadata file.

liat_b_10-1718015438027.png

3. Add a new external resource for your project.

a. Click + to add a new external resource.
The Service Center opens.

b. In the Service Center, explore the different services and select the one you want to add to your project.
Once added, a new destination is created for your mobile application as well, so you can use the app with its destination in the UI Mobile app.

liat_b_11-1718015438030.png

You can see the destination reflected in the Storyboard, both as the Mobile Services app destination, and as an external resource of the project.

liat_b_12-1718015438032.png

4.  You can now add the Mobile UI.

a. Click + in the UI application column header.
The wizard opens.

b. Fill in the application details and the data to show in the UI.

liat_b_13-1718015438034.png

liat_b_14-1718015438036.png

You can see the representation of all the project components in the Storyboard.

5. To deploy your application, right-click the `Application.app` file in your project and select the `MDK:Deploy` command.

liat_b_0-1718018130999.png

 

In the near future, we plan to enhance this experience and support more productivity tools that will help Mobile developers in their development tasks. Stay tuned for more updates.

I hope you’ve enjoyed this blog post.

To get more information on SAP Build Code, check out our documentation.

Looking forward to getting your feedback. Feel free to add your comments below or send us
 ideas.

Happy coding  🙂