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.
- Open
SAP Business Application Studio
in any one of the supported browsers and log in with your credentials. - Choose
Create Dev Space
. - Enter a name for the
Dev Space
. - Select
SAP Mobile Application
. -
Choose
Create Dev Space
.Newly created development environment is listed in your
Dev Spaces
. Choose the newly createdDev 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¶
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
orBasic 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.
- Log on to SAP Business Application Studio and navigate to your workspace.
- On the welcome screen, choose
New Project from Template
. SelectMDK App
template and chooseStart
. -
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.
-
-
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
. -
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
andLocal File
.Mobile Services Landscape
Select your Mobile Services Landscape
from the drop-down. This field appears only when you have selectedMobile Services
as theData Source
type. There are three options available for landscape:standard
,preview
, andneo
. The first two options are for the Cloud Foundry environment. If you haveMobile Services Preview
edition available in yourCloud Foundry
account, choosepreview
. Chooseneo
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 selectedService Url
as theData 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 theData 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
. -
In the
OData Collections
tab, select the required OData collections and chooseFinish
.
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 likeDefaultAppLanguage
andApplicationDisplayName
. 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¶
-
To run the web application in Dev Space, right click on
Application.app
and selectMDK: Deploy
. ChooseYour Dev Space
as the target. -
After deployment, the focus will automatically switch to
Debug
view from the left activity bar. - If there are previous running threads, stop them before running
WebApplicationFactory
. If that runs successfully, theA service is listening to port 6004.
message popup is displayed. - 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.
- Open a project in workspace and open a page in your project with code editor.
- Right click on
Application.app
and selectMDK: Deploy
. ChooseYour Dev Space
as the target. - After deployment, switch to
Run Configurations
view from the left activity bar, and clickRun Module
button onRun WebApplicationFactory
. -
In the
View
menu , chooseFind Command
, and then typeMDK
, and selectMDK: 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.
-
The
Preview
panel will be opened automatically. If you want to edit a page and preview it again, rerun the commandMDK: 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.
- Launch the application and press
F12
to openDevTools
. Or pressingCommand+Option+I
(Mac) orControl+Shift+I
(Windows, Linux). This shortcut opens the Console panel. - Click the
Sources
orDebugger
tab (depending on which supported browser you are using). You will find your project underbuild.definitions
folder inwebpack
folder. - 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 inPage
pane underSources
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.
- On the SAP Web IDE Full-Stack home page, choose
Tools > Preferences
. - Choose
Extensions
. - From the
Extensions
list, selectMobile Services App Development Tools
. - To enable this editor, select the switch button next to the
Mobile Services App Development Tools
extensionON
. - Choose
Save
. - 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.
- On the SAP Web IDE Full-Stack version, right click
Workspace
, chooseNew > Project from Template
. - Under
Environment
, selectNeo
orCloud Foundry
based on your preferred environment. - Under
Category
, selectMobile Services
. -
Choose
Mobile Development Kit List-Detail Application
and chooseNext
.then assign a name to the new project and clickNext
. 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. -
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. -
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
andLocal 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 theData 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 theData 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. -
Choose the required metadata and the customizations. Click
Next
. - On the
Features
tab, select the optional features. ClickFinish
.
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 likeDefaultAppLanguage
andApplicationDisplayName
.
Deploying the Project¶
Please make sure you have been assigned the Space Developer
role in your SAP BTP
space.
- 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 6.0.0 is available). - 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 forVersion
. However, you can provide a different value. - Click
Deploy
. - If the application deploys successfully, you see the window
Successfully Deployed
. You can choose to open the application by clickingOpen the active version of the application
orOpen the application's page in the SAP Business Technology Platform cockpit
.