Skip to content

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 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.

Prerequisite

Add one or more OData destinations depending on the business requirement. The OData destination should 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 cloud foundry destination, access cloud foundry instead of mobile services for creating a project (We can't access cloud foundry destination from mobile services in design time).

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 Create project from template. Select MDK Project template and choose Start.
  3. In the Basic Information tab:

    Field Description
    MDK template type Select List Detail from the dropdown.
    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.

    Choose Next.

  4. In the Service Configuration tab:

    Field Description
    Service File Name Enter a service name.
    OData Source Select Cloud Foundry from the dropdown.
    Cloud Foundry destination Select a destination from the dropdown.
    Enter a path to the OData service Append a path to your OData service if required.

    Choose Next.

  5. 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.

Deploying the Application

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 deployment prompt Include source map file for debugging?, 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.

Running the Application in Dev Space

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

After deployment, switch to run configurations view from the left activity bar. If there are previous running thread, stop them before running WebApplicationFactory. If it runs successfully, you can see a message popup A service is listening to port 6004., click Open in new tab to run the application.

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 tab, now you can see in File Navigator pane there is a new folder called webpack. All the source files are included in this folder.
  3. Set breakpoints in the rule file that you need to debug.

Alternative way to debug:

  • Another way is to open the bundle.js file under your application source in File Navigator pane, 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.

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 Page, provide the application name and display name.

    You can choose the application name to be same as the project name, which is fetched by default, or assign a different name.

  6. On the Service Configuration tab:

    Field Description
    Name Enter a service name.
    Service Source Type Select Cloud from the drop down.
    Destination Name Select a destination from the drop down.
    Path Suffix Enter a path suffix.
  7. Choose the required metadata and the customizations. Choose 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

To deploy the project, right click on project and select MDK Deploy to Web Application. In the Select MDK Web Runtime window, select the web runtime for deployment from the drop down option (Currently only 5.0.0 is available).


Last update: April 20, 2021