Creating Web Applications

Creating Web Application in SAP Business Application Studio (Cloud Foundry)

Setting Up the Editor in SAP Business Application Studio (Cloud Foundry)

Note

This procedure is applicable in the Cloud Foundry environment.

1. Open SAP Business Application Studio in any one of the supported browsers and log in with your credentials.
2. Choose Create Dev Space.
3. Enter a name for the Dev Space.
4. Select SAP Mobile Application .

5. Choose Create Dev Space.

   Newly created development environment is listed in your Dev Spaces. Choose the newly created Dev Space to launch the editor in SAP Business Application Studio.

   Note

   If the development environment is in STOPPED state. It is required to start the development environment to launch the editor.

You can now use the Mobile Development Kit editor feature to create and develop your project.

Tutorial

Set Up SAP Business Application Studio for Multi-Channel Development

Prerequisite

BTP Destination Prerequisite

Add one or more OData destinations depending on the business requirement. The OData destination must have the following additional properties:

• HTML5.DynamicDestination = true (in order to access metadata from app studio)
• WebIDEEnabled = true (in order to be filtered by app studio)

• WebIDEUsage = odata_gen (in order to be filtered by OData usage)

  Note

  To reuse a Cloud Foundry destination, add the following property MobileEnabled = true. For more information, see Enabling Cloud Destinations. For a Cloud Foundry destination, access Cloud Foundry instead of mobile services for creating a project (As we can't access the Cloud Foundry destination from mobile services during design time).

Mobile Services Data Source Prerequisite

To retrieve OData collections while creating a new project or syncing a service in an existing project, you will need:

• SAP Business Application Studio Developer role if the SSO mechanism for the given mobile destination is set up as No Authentication or Basic Authentication.
• SAP Business Application Studio Administrator role if the SSO mechanism for the given mobile destination is set up with other authentication option. This is needed to get the JWT token.

Creating a New Project (Cloud Foundry)

Create a new Mobile Development Kit project by using the predefined templates provided with SAP Business Application Studio.

1. Log on to SAP Business Application Studio and navigate to your workspace.
2. On the welcome screen, choose New Project from Template. Select MDK App template and choose Start.

3. If you are not logged in to Cloud Foundry, Cloud Foundry Sign In page will be appear. You can use the following methods to sign in:

   • Credentials

     Enter your username and password, and click Sign in. Select Cloud Foundry Organization and Space. If failed to log in, you will not be able to use Mobile Services Data Sources.

   • SSO Passcode

     Click the link to open a new browser page and choose to generate a temporary authentication code, copy the SSO Passcode and paste it back in the Cloud Foundry Sign In page.

4. In the Basic Information tab:

   Field	Description
   MDK template type	Based on your requirement, select the MDK template type from the drop-down.
   Your Project Name	Enter a project name.
   Your Application Name	By default, the project name is considered as the application name. However, you can also provide a different application name.
   Target MDK Client Version	By default, the project uses MDK 6.0 or later clients. However, you can select a previous version from the drop-down.
   Choose a target folder	By default, the target folder uses project root path. However, you can choose a different folder path.

   Choose Next.

5. In the Service Configuration tab:

   Field	Description
   Data Source	Select a source from the drop-down. The available source types are: Mobile Services, BTP Destination, Service Url and Local File.
   Mobile Services Landscape	Select your Mobile Services Landscape from the drop-down. This field appears only when you have selected Mobile Services as the Data Source type. There are three options available for landscape: standard, preview, and neo. The first two options are for the Cloud Foundry environment. If you have Mobile Services Preview edition available in your Cloud Foundry account, choose preview. Choose neo for the Neo environment.
   Application Id	Select an application from the drop-down. This is the application that you've created in mobile services.
   Destination	Select a destination from the drop-down.
   Enter a path to service	Append a path to your OData service if required.
   Service Url	Enter the Service Url. This field appears only when you have selected Service Url as the Data Source type.
   Destination Name	Enter the DestinationName in metadata.
   Choose XML odata metadata file from your local dev space	Select an XML file from the local files. This field appears only when you have selected Local File as the Data Source type.
   Language URL	sap-language is the default value. However, you can provide a different value.
   Enable offline	By default, it's enabled. Select No to disable it.

   Choose Next.

6. In the OData Collections tab, select the required OData collections and choose Finish.

The newly created project is now available in your workspace. All the web related files are available in the Web folder.

The web folder consists of the following:

• App_Resources/- Here you can customize the web resources like icon and images.
• config.json - Here you can customize the properties like DefaultAppLanguage and ApplicationDisplayName. For more information about configuring other properties, see Configure Web Specific Settings.

Deploying the Application

Please make sure you have been assigned the Space Developer role in your SAP BTP space.

To deploy the project, right click on Application.app and select MDK: Deploy. Select Cloud Foundry as the target.

If you want to enable source for debugging, then, in the Include source map file for debugging? deployment prompt, choose Yes.

For the first deployment, it is required to provide the application name and application version. For successive deployments you can use the same configuration. However, if you want to change the application name or version, then delete the .project.json file.

Redeploying the Project

If you want to perform the last deployment, select MDK: Redeploy in the command palette. If there is no last deployment configuration, it will trigger the MDK: Deploy command.

Running the Application in Dev Space

1. To run the web application in Dev Space, right click on Application.app and select MDK: Deploy. Choose Your Dev Space as the target.

2. After deployment, the focus will automatically switch to Debug view from the left activity bar.

3. If there are previous running threads, stop them before running WebApplicationFactory. If that runs successfully, the A service is listening to port 6004. message popup is displayed.
4. Click Open in a New Tab to run the application.

Live Preview Page

While running the web application in Dev Space, you can preview your application side by side.

1. Open a project in workspace and open a page in your project with code editor.
2. Right click on Application.app and select MDK: Deploy. Choose Your Dev Space as the target.
3. After deployment, switch to Run Configurations view from the left activity bar, and click Run Module button on Run WebApplicationFactory.

4. In the View menu , choose Find Command, and then type MDK, and select MDK: Build.

   If you execute this command when you open a page with page editor, you will be asked to select an application (from existing projects list) that you want to preview, then choose an application.

5. The Preview panel will be opened automatically. If you want to edit a page and preview it again, rerun the command MDK: Build.

Debugging the Application

To debug the application using source map file, firstly you should enable source maps in DevTools settings. Source Maps are enabled by default (as of Chrome 39). For more information, see Enable Source Maps in settings.

1. Launch the application and press F12 to open DevTools. Or pressing Command+Option+I (Mac) or Control+Shift+I (Windows, Linux). This shortcut opens the Console panel.
2. Click the Sources or Debugger tab (depending on which supported browser you are using). You will find your project under build.definitions folder in webpack folder.
3. Set breakpoints in the rule file under Rules folder that you need to debug. For more information, see Pause your code with breakpoints.

Alternative way to debug:

• Another way is to open the bundle.js file under your application source in Page pane under Sources tab, setting breakpoints will automatically open the corresponding file.

Creating Web Application in SAP Web IDE Full-Stack

To create and develop web applications using the Mobile Development Kit editor feature, you must first enable the Mobile Development Kit extension on SAP Web IDE Full-Stack. It is not enabled by default.

1. On the SAP Web IDE Full-Stack home page, choose Tools > Preferences .
2. Choose Extensions.
3. From the Extensions list, select Mobile Services App Development Tools.
4. To enable this editor, select the switch button next to the Mobile Services App Development Tools extension ON.
5. Choose Save.
6. Refresh your browser.

You can now use the Mobile Development Kit editor feature to create and develop your project.

Tutorial

Enable mobile services App Development Tools

Creating a New Project

You can create a new Mobile Development Kit project by using the predefined templates provided with SAP Web IDE Full-Stack.

1. On the SAP Web IDE Full-Stack version, right click Workspace, choose New > Project from Template.
2. Under Environment, select Neo or Cloud Foundry based on your preferred environment.
3. Under Category, select Mobile Services.

4. Choose Mobile Development Kit List-Detail Application and choose Next.then assign a name to the new project and click Next. The last two project templates have default pages, actions and rules generated for you.

   Note

   If you are working in the MDK Development perspective, you can create an Mobile Development Kit project directly by right-clicking the workspace folder and selecting the desired project template type.

5. On the Application Creation tab:

   Field	Description
   Application Name	You can choose the application name to be same as the project name, which is fetched by default, or assign a different name.
   Schema Version	By default, the project uses the latest schema version. However, you can select a previous schema version from the drop-down.

6. On the Service Configuration tab:

   Field	Description
   Name	Enter a service name.
   Data Source	Select a source from the drop-down. The available source types are: Mobile Services, BTP Destination, Service Url and Local File.
   Service URL	Select a Service Url from the drop-down.
   Application ID	Select an application from the drop-down. This field appears only when you have selected Mobile Services as the Data Source type.
   Destination	Select a Destination from the drop-down.
   Path Suffix	Append a path to your OData service if required.
   Language URL Param	Select a Language URL from the drop-down.
   Enable offline	By default, it's enabled when you have selected Mobile Services as the Data Source type. Select No to disable it.
   Local Metadata XML	Select an XML file from the local files.

   To add a REST service, select the Rest Service checkbox.

7. Choose the required metadata and the customizations. Click Next.

8. On the Features tab, select the optional features. Click Finish.

Your selected Mobile Development Kit project is created. The newly created project is now available in your workspace. All the web related files are available in the Web folder.

The web folder consists of two files:

• App_Resources/- Here you can customize the web resources like icon and images.
• config.json - Here you can customize the properties like DefaultAppLanguage and ApplicationDisplayName.

Deploying the Project

Please make sure you have been assigned the Space Developer role in your SAP BTP space.

1. To deploy the project, right click on project and select MDK Deploy to Web Application.
2. In the Select MDK Web Runtime window, select the web runtime for deployment from the drop down option (Currently only 6.0.0 is available).
3. In the Deploy Application to SAP Business Technology Platform window, you can choose to deploy as a new application or update an existing application. 1.0.0 is the default value for Version. However, you can provide a different value.
4. Click Deploy.
5. If the application deploys successfully, you see the window Successfully Deployed. You can choose to open the application by clicking Open the active version of the application or Open the application's page in the SAP Business Technology Platform cockpit.

---

Last update: October 19, 2023