Skip to content

Creating Web Client Applications

Creating Web Client 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 Cloud Platform Mobile Services application type.
  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 New Project From Template. Select MDK Project template and choose Next.
  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.
    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.

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.

Creating Web Client Application in SAP Web IDE Full-Stack

To create and develop web client applications using the Mobile Development Kit editor feature, you must first enable the MDK 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 Client. In the Select MDK WebClient Runtime window, select the web client runtime for deployment from the drop down option (Currently only 5.0.0 is available).


Last update: October 19, 2020