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 Start 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.
    Schema Version By default, the project uses the latest schema version. However, you can select a previous schema version from the dropdown.

    Choose Next.

  4. If you are not logged in to Cloud Foundry, in the SAP BTP Connection tab:

    Field Description
    Cloud Foundry Endpoint Enter your Cloud Foundry Endpoint.
    Username Enter your username.
    Password Enter your password. Click Login button.
    Organization Select an organization from the dropdown.
    Space Select a space from the dropdown.

    Choose Next.

  5. In the Service Configuration tab:

    Field Description
    Data Source Select a source from the dropdown. The available source types are: Mobile Services, BTP Destination, Service Url and Local File.
    Mobile Services Landscape Select your Mobile Services Landscape from the dropdown. This field appears only when you have selected Mobile Services as the Data Source type. There are two options available for landscape: standard and preview. If you have Mobile Services Preview edition available in your Cloud Foundry account, choose preview.
    Application Id Select an application from the dropdown. This is the application that you've created in mobile services.
    Destination Select a destination from the dropdown.
    Cloud Foundry destination Select a destination from the dropdown. This field appears only when you have selected BTP Destination as the Data Source type.
    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.

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

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

    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.
    Data Source Select a source from the dropdown. The available source types are: Mobile Services and BTP Destination
    Service URL Select a Service Url from the dropdown.
    Application ID Select an application from the dropdown. This field appears only when you have selected Mobile Services as the Data Source type.
    Destination Select a Destination from the dropdown.
    Path Suffix Append a path to your OData service if required.
    Language URL Param Select a Language URL from the dropdown.
    Enable offline By default, it's enabled. 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

  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: August 17, 2021