Business Application Studio¶
Abstract
Details the steps for designing, developing, and deploying SAP Mobile Cards using SAP Business Application Studio.
SAP Business Application Studio is the next generation IDE hosted on SAP Business Technology Platform in the Cloud Foundry environment. Developers can design, build, and deploy cards to the SAP mobile service cockpit. Click here to learn more about SAP Business Application Studio.
Accessing SAP Business Application Studio¶
To gain access to SAP Business Application Studio, please see the following use cases:
-
Access SAP Business Application Studio on your Trial Account.
-
Access SAP Business Application Studio when your Data Center is in Shanghai
Once you have access to SAP Business Application Studio, you can log in and create a dev space.
Creating a Dev Space¶
A dev space is a development environment with all the tools, capabilities, and resources needed for developing your application. You can choose to create a dev space based on the type of application that you are building. For building SAP Mobile Cards, select the SAP Mobile Services
application type. Doing so includes all the extensions necessary for mobile application development.
How to Create Your Dev Space¶
-
Log into your SAP Business Application Studio.
-
Click Create Dev Space.
-
Enter a name for your dev space.
-
Select SAP Mobile Services, from the application list.
-
Verify that Mobile Services App Development Tools is present in the SAP predefined extensions list. If you choose to create a dev space other than SAP Mobile Services, you can select it from the additional SAP extensions.
-
Click Create Dev Space.
You can now see the Dev Space you created.
1 |
|
Note
To develop cards on Business Application Studio, make sure that the status of your dev space is Running.
Using the Command Palette¶
The command palette provides access to various functionalities including shortcuts for the most common operations.
To open the command palette in SAP Business Application Studio, select View → Find Command from the menu bar.
This opens a text field at the top of the IDE allowing you to type a command. Content assist then allows you to find commands quickly.
Type ? into the input field to get a list of available commands you can execute from here.
Command | Details |
---|---|
SAP Mobile Cards: Deploy | Deploys the card |
SAP Mobile Cards: Deploy As Prototype | Deploys the card as a prototype |
SAP Mobile Cards: Publish | Publishes the card and the status is changed to Development |
SAP Mobile Cards: New From Template | Creates a new card |
SAP Mobile Cards: Retrieve Data | Retrieves userdata.json from the destination |
SAP Mobile Cards: Check Card Status | Checks if the card exists. If the card is edited, it displays an ascii table containing the list of all the versions of the card. |
SAP Mobile Cards: Restore Default Cloud Foundry mobile services Connection | Creates a default Cloud Foundry connection "cf_default" meaning that the service will run on the same account and dev space as SAP Business Application Studio |
SAP Mobile Cards: Create mobile services Connection | Creates or edits a mobile services connection. If the mobile services name exists, it updates the URL. |
SAP Mobile Cards: Switch To New mobile services | Switches to a different mobile services connection. You have to select the connection from the drop-down list. |
SAP Mobile Cards: Retrieve mobile services Configuration | Retrieves configurations such as backend destinations, gatekeepers, and the server URL of the emulator (appServer) |
SAP Mobile Cards: Preview | Opens the preview pane. The preview automatically updates based on the selection made in the SAP Business Application Studio explorer. |
SAP Mobile Cards: Download Card from mobile services | Allows you to download and edit cards deployed in the SAP mobile service cockpit. |
Connecting to Your Mobile Services Account¶
You need to connect your SAP Business Application Studio workspace with a SAP Mobile Services server. This allows you to use the templates available on the server and deploy cards to the configured server.
-
Open your Workspace.
-
Open the command palette either by clicking View → Find Command, or press
F1
on your keyboard.Tip
You can reassign the keyboard shortcuts.
-
In the command palette, type SAP Mobile Cards, and select Mobile Cards: Create Mobile Service Connection.
-
If the connection is successful, a toast message is displayed along with a success message in the output window.
Note
To view the status message for the deployed card in the output window, select SAP Mobile Cards from the drop-down list.
-
Enter a name for your mobile service connection.
-
Copy and paste the Admin API from your SAP Mobile Services Cockpit.
-
In the command palette, type SAP Mobile Cards, and select Mobile Cards: Create Mobile Service Connection.
-
Enter your username/e-mail ID and password.
Note
To maintain a secure connection to your SAP mobile service cockpit, SAP Business Application Studio prompts you to re-enter your username and password if the SAP Business Application Studio window times out.
Creating a New Card¶
You can create SAP Mobile Cards using the command palette or the project template.
Create a Card Using the Command Palette¶
To create a card:
-
In the command palette, type SAP Mobile Cards, and select Mobile Cards: New From Template.
-
Select a template from the drop-down list.
Note
These templates are fetched from the mobile services server.
-
Enter a name for your card.
A new folder is created in your workspace.
Create a Card Using a Project Template¶
To create a card:
-
In the command palette, type SAP Business Application Studio: Create Project from Template.
-
Select SAP Mobile Cards and click Start.
-
Choose either HTML Templates or Annotations.
For HTML Templates:
-
Select a mobile card template from the drop-down list, enter the card name, and click Finish.
Note
The templates specified in the drop-down list are based on the source defined in settings.json file. For more information, see Specifying the Template Source.
For Annotations:
-
Select mobile service and destinations from the drop-down list. Click Next.
-
Select entity set and card type from the drop-down list. Enter the card name and click Next.
-
Enter the card name and click Finish.
-
-
A new folder is created in your workspace.
Specify the Template Source¶
While creating a new card from template, the templates are fetched from the SAP Mobile Services server. You can also create additional templates in a GitHub repository and access them in SAP Business Application Studio. You can add either a single Git repository or multiple Git repositories as the template source.
To specify the template source:
-
In the command palette, type SAP Mobile Cards, and select Mobile Cards: New from Template
-
Open the
.vscode/settings.json
file and add the following syntax:- For a single Git repository:
"mck.github":“https://github.com/SAP-samples/mobile-cards-templates`
- For multiple Git repositories:
"mck.github": [ { "url": "https://github.com/SAP-samples/mobile-cards-templates", "isRepository": true, "inline": true } …… ], ……
-
To use the templates, type Mobile Cards: New from Template in the command palette and choose a template from the drop-down list.
Editing a Card¶
-
In your SAP Business Application Studio file explorer, expand the folder created for your card.
-
Click
metadata.json
to open the default visual editor. Click here to learn more about themetadata.json
file.Note
To edit the
metadata.json
as a JSON file, right-click the file in the file explorer and select the Open With → Code Editor option. -
For details about other files such as template_en.html, templateBack_en.html and
userdata.json
, navigate to the feature development section.
Editing a Card Deployed in Mobile Services¶
-
In the command palette, type SAP Mobile Cards, and select Mobile Cards: Download Card from mobile services.
-
Select a card from the drop-down list. You can also search for the card.
!!! note "Note"
1 |
|
Previewing a Card¶
To access the preview pane:
-
In the command palette, type SAP Mobile Cards, and select Mobile Cards: Preview.
-
A preview window opens to the side showing the latest changes.
Deploying a Card¶
SAP Business Application Studio lets you deploy a card from within the studio to your SAP Mobile Services server.
Note
Make sure that the SAP Mobile Cards client is installed on the device before the following steps are completed.
Deploy Using the Command Palette¶
-
In the command palette, type SAP Mobile Cards, and select Mobile Cards: Deploy.
-
Select the card you want to deploy.
When the deployment is completed successfully, you get a notification message saying that the card was published successfully.
In the SAP mobile service cockpit, you should see your card deployed in the Development state.
Deploy Using the Context Menu¶
-
In your SAP Business Application Studio file explorer, right-click on
metadata.json
and select Mobile Cards: Deploy. -
When the deployment is completed successfully, you get a notification message saying that the card was published successfully.
-
In the SAP mobile service cockpit, you should see your card deployed in the Development state.
.mobilecard.json¶
To publish a new version of your card, you need to modify the version number of the card in .mobilecard.json
.
[
{
"DestinationName": "...",
"isCF": true,
"Backend": "Optional, not set",
"Version": "1.0",
"Validate": false,
"CardID": "...",
"ReferenceCardTypeId": "...",
"LastModifiedAt": "..."
}
]
Note
The option to edit the version is available after the first version of the card has been deployed.
Emulator¶
An emulator is a tool that creates a virtual environment of your mobile device. The advantages of using an emulator are:
-
It renders cards by fetching data from the URL appended to the back-end connection defined in the
metadata.json
. -
It can be used to test connections, without access to a physical device.
-
It is hosted and run on SAP Mobile Services, which means there is no need for any additional maintenance by the developer.
Using the Emulator¶
You need to deploy the card before you emulate it.
-
Select the card and open
metadata.json
for the selected card. -
Select the
Lifecycle
tab. -
Click Emulator.
Note
Actions cannot currently be performed on the emulator.
Publishing a Card¶
When a card is deployed from SAP Business Application Studio, it uploads the card to the mobile services server in Development state. To make your card available to end users, you need to publish the card. Click here to learn more about the card life cycle.
With SAP Business Application Studio you publish the card directly from your development environment.
Note
A card must be deployed before publishing.
Publish Using the Command Palette¶
-
In the command palette, type SAP Mobile Cards, and select Mobile Cards: Publish.
-
Select the card you want to publish.
-
If the card is successfully published, you get a notification message saying that the card was published successfully.
-
In the SAP mobile service cockpit, you should see your card published in the Productive state.
Publish Using the Context Menu¶
-
In your SAP Business Application Studio file explorer, right-click
metadata.json
and select Mobile Cards: PUBLISH. -
If the card is successfully published, you get a notification message saying that the card was published successfully.
-
In the SAP mobile service cockpit, you should see your card published in the Productive state.