13 KiB
Development Workflow - Complete Reference
Table of Contents
- Project Creation
- UI Development
- Runtime Management
- Task Explorer
- Run Configurations
- Debugging
- MTA Development
- CI/CD Integration
- Extensions Management
- Security Features
- Data Management
- Documentation Links
Project Creation
Methods Available
| Method | Description |
|---|---|
| Template Wizard | Create from predefined templates based on dev space |
| Terminal | Command-line project creation |
| Git Clone | Clone existing repository |
| Import | Import ZIP/TAR files from local system |
| Yeoman Generators | Use any Yeoman generator from npm registry |
Using the Template Wizard
Access Methods:
- Menu: File → New Project from Template
- Get Started page
- Command Palette:
SAP Business Application Studio: New Project from Template
Process:
- Select template type (based on dev space extensions)
- Fill in required details
- Navigate with Back/Next or wizard tree
- Review error messages at field and step levels
- Generate project with folder structure and artifacts
Important: When using templates, you become code owner. Implement automated vulnerability scanning in CI/CD pipeline.
Importing Projects
Supported Formats: ZIP, TAR (including from SAP Web IDE)
Steps:
- Ensure active workspace exists
- Access Import via Get Started page or Command Palette
- Select compressed file
- Project added to dev space
UI Development
Layout Editor
Visual editor for XML views in SAP Fiori projects. Note: Safari browser not supported.
Components:
| Component | Description |
|---|---|
| Controls Tab | Drag-and-drop SAPUI5 controls |
| Outline Tab | Hierarchical view with semantic controls |
| Canvas | Visual representation of XML view |
| Properties Pane | Editable properties with data binding |
| Events Pane | Event handler management |
Opening: Right-click XML view → Open With → Layout Editor
Key Operations:
- Add controls via drag-and-drop
- Rearrange controls
- Keyboard navigation (double-click to select parent)
- Extract controls into fragments
Supported SAPUI5 Controls (150+)
Input & Selection: Button, CheckBox, RadioButton, Input, TextArea, ComboBox, Select, DatePicker, TimePicker, SearchField, Slider
Containers & Layouts: App, Page, Panel, FlexBox, HBox, VBox, Grid, Form, SimpleForm, List, Table, Carousel
Display: Label, Text, Icon, Image, Link, Breadcrumbs, IconTabBar, ObjectHeader
Smart Controls: SmartChart, SmartTable, SmartForm, SmartField
Outline Tab Only: Semantic actions (AddAction, EditAction, SaveAction), Suite controls (BusinessCard, Charts), Classic UI controls
Data Binding
Prerequisites: Define data set for view first
Binding Types:
- Properties of controls
- Aggregations of controls
Notes:
- Modifying existing data set may invalidate bindings
- For non-OData models, use source code directly
- Applications can incorporate OData Service component
Related Binding Operations:
- Define entity sets
- Bind simple controls
- Bind aggregate-type controls (templates)
- Bind to i18n model
- Bind to label annotations
Storyboard
Graphical view of application architecture showing data models, services, and UI front ends.
Available in Dev Spaces:
- SAP Fiori
- Full-Stack Application Using Productivity Tools
- SAP Mobile Application
- Full Stack Cloud Application
Features:
- Trigger graphical editors
- Visualize component relationships
- Quick application structure comprehension
Keyboard Shortcuts (Layout Editor)
| Action | Shortcut |
|---|---|
| Select parent | Ctrl + Click |
| Navigate to parent | Up Arrow |
| Navigate to child | Down Arrow |
| Navigate siblings | Left/Right Arrow |
| Move control up | Shift + Left Arrow |
| Move control down | Shift + Right Arrow |
| Drop position up (drag) | Shift |
| Drop position down (drag) | Alt |
Runtime Management
SAP Business Application Studio uses asdf for runtime version management.
Default Versions
Only one LTS version per runtime officially supported. Check versions:
java -version
node --version
python --version
Installing New Versions
- Command Palette → Runtime: Install
- Select runtime type
- Choose specific version
Installed versions persist in dev space storage.
Setting Default Versions
- Command Palette → Runtime: Set default
- Select runtime type
- Choose preferred version
Applies across all workspaces in dev space.
Java Proxy Certificate
After installing Java via terminal:
Command Palette → Runtime: Add Proxy Certificate to Java
Enables connectivity to on-premise Java repositories during Maven build.
Direct asdf Usage
asdf can be used directly from terminal for advanced version management.
Task Explorer
Create, modify, and run scenario-specific tasks through dedicated UI.
Requirement: Dev space extensions must provide scenario-specific tasks.
Using Task Explorer
- Click Task Explorer icon in sidebar
- Click
+to create task - Select "Configure" to generate in
tasks.json - Modify via right-click menu
- Run via Run icon or Build button
Features
- Tasks organized by user intent groups
- Only workspace-relevant tasks displayed
- Configurations stored for reuse
- Integrates with MTA build/deploy workflows
Run Configurations
Define how projects and unit tests execute.
Execution Priority
- Default configuration from project creation
- Newly added configuration
- Most recently executed (among multiple)
- User selection for multiple projects
Supported Frameworks
- SAP Fiori Tools applications
- CAP Java Modules
- CAP Node Applications
Creating Configurations
Access Run and Debug view → Add Configuration → Select framework type
Debugging
Integrated debugging for Node.js runtime (JavaScript, TypeScript, compiled-to-JS languages).
Setup
- Open Run and Debug view
- Select configuration from dropdown
- Choose Node.js to generate
launch.json
Preset Configurations
- Launch Program
- Create JavaScript Debug Terminal
- Run Current File
Debugging Modes
| Mode | Description |
|---|---|
| Launch | Start program in debug state |
| Attach | Connect to running program in debug state |
Attach via: Command Palette → Debug: Attach to Node Process
Breakpoints
- Toggle: Click editor margin or press F9
- Add function breakpoints via BREAKPOINTS section
- Deactivate/remove all at once
MTA Development
MTA Editor (Visual)
Edit mta.yaml without direct YAML editing.
Open: Right-click mta.yaml → Open With → MTA Editor
Important Notes:
- Visual editor removes comments and formats file
- Use code editor if comments needed
- YAML requires spaces (not tabs) for indentation
MTA Tools
| Tool | Description |
|---|---|
| Cloud Foundry CLI | Deploy and manage CF services/apps |
| Cloud MTA Build Tool | Build .mtar archives from mta.yaml |
| CF CLI MTA Plugin | MTA operations in CF environment |
| CF Targets Plugin | Manage multiple API targets |
| CF CLI Copy Env Plugin | Export VCAP_SERVICES locally |
| Chisel | TCP tunnel over HTTP via SSH |
Basic MTA Commands
# Build MTA archive
mbt build
# Deploy to Cloud Foundry
cf deploy mta_archives/<app>.mtar
Deployment Troubleshooting
If MTAR deployment fails due to package-lock.json conflicts or node_modules issues:
- Create
.npmrcfile at project level - Configure to reference npm public registry
- Disable npm cache in SAP BAS
CI/CD Integration
SAP Continuous Integration and Delivery automates build, test, and deployment.
Prerequisites
- Execute "Get started with SAP Business Application Studio" booster
- Add CI/CD service via "Get started with SAP Build Code" booster
Features
- One
config.yaml-based job per project - View build logs and steps
- Manually trigger builds (webhooks recommended)
- Edit configuration
- Delete jobs and config files
Usage
- Open CI/CD view from activity bar
- Click "Create Job" (disabled if job exists)
- Access actions via job context menu
Extensions Management
VS Code Extensions
Install from Open VSX Registry.
Disclaimer: SAP does not certify third-party extensions. Users assume:
- Responsibility for maintenance and security
- Liability for negative effects
- No auto-update support
Install:
- Click Extensions icon or View → Extensions
- Accept disclaimer
- Search and install
Manage:
- Uninstall: Search → Manage → Uninstall
- Update: Uninstall → Reinstall latest
Yeoman Generators
Install from npm registry for additional templates.
Install:
- Template wizard → Explore and Install Generators
- Accept disclaimer
- Search for template type
- Click Install
Security Features
Malware Scanning
- Automatic scan every 10 minutes for running dev spaces
- Notification on detection with delete/dismiss options
- Audit log entry created with file, dev space, and user details
Encryption (CMK)
Customer-managed key encryption enabled by default since September 18, 2022.
Scope: All content under /home/user encrypted in physical storage.
If CMK Disabled:
- Existing dev spaces cannot start
- New dev spaces cannot be created
- Files inaccessible
- Dev space deletion still possible
- Re-enable to restore access
Security Standards
- Authentication and authorization enforced
- Communication encrypted
- Untrusted input prevented
- Audit logging enabled
Recommendations
- BTP-BAS-0001: Limit administrators with full management permissions
- Use PATs for Git authentication
- Protect external system access
- Include only secured artifacts in custom extensions
Data Management
On-Premise System Access
Built-in web proxy at [http://localhost:8887.](http://localhost:8887`.)
Refresh Destinations:
curl [http://localhost:8887/reload](http://localhost:8887/reload)
Git Repositories: Use exact host:port from destination URL.
npm Modules:
npm config set @<scope>:registry <URL>
Maven Dependencies: Edit /home/user/.m2/settings.xml:
<repository>
<id>corporate.repository</id>
<url>REPOSITORY_URL</url>
</repository>
Deleting Personal Data
Requires administrator access and REST API tool.
Process:
- Get workspace list:
[https://<bas-url>/ws-manager/api/v1/workspace?all=true](https:///ws-manager/api/v1/workspace?all=true`) - Copy workspace
idfromconfigsection - Optionally export data first
- Get JWT:
[https://<bas-url>/jwt](https:///jwt`) - DELETE request:
[https://<bas-url>/ws-manager/api/v1/workspace/<ws-id>?all=true](https:///ws-manager/api/v1/workspace/?all=true`) - Header:
X-Approuter-Authorization: Bearer <JWT_Token>
Documentation Links
Last Updated: 2025-11-22 Source: https://github.com/SAP-docs/sap-btp-business-application-studio/tree/main/docs