Sap build apps

SAP Build Apps (Low-Code/No-Code)

Related Skills

• sap-build-process-automation — Trigger workflows from Build Apps
• sap-s4hana-extensibility — Consume S/4HANA APIs in Build Apps
• sap-security-authorization — BTP authentication for Build Apps

Quick Start

Getting started:

1. Open SAP Build Lobby → Create → Build an Application → Web & Mobile Application
2. Choose template or start blank
3. Three main editors: UI Canvas (drag-drop), Data (integrations), Logic (flow functions)

Development flow:

Design UI ──► Connect Data ──► Add Logic ──► Preview ──► Build ──► Deploy
  │              │                │
  Canvas     Destinations/     Flow functions
  + Theme    OData/REST        + Formulas

Core Concepts

Application Types

Type	Platform	Deployment
Web App	Browser	BTP HTML5 Repository
Mobile (PWA)	iOS/Android browser	BTP + app icon
Mobile (Native)	iOS/Android native	App Store / Google Play via Build

Data Integration Options

Source	Method	Setup
SAP S/4HANA	BTP Destination + OData	Destination config in BTP cockpit
SAP SuccessFactors	BTP Destination + OData	Destination with OAuth2SAMLBearer
REST API	Direct REST integration	URL + auth headers
Firebase/Supabase	Visual Cloud Functions	API connector
Local (On-device)	On-device storage	Built-in, no config needed
BTP CAP	BTP Destination + OData	Destination to CAP service URL

Variable Types

Variable	Scope	Use Case
App Variable	Global, in-memory	User session state, auth token
Page Variable	Single page	Form inputs, UI state
Data Variable	Bound to data resource	API data (auto-fetch/refresh)
Page Parameter	Passed between pages	Navigation context (record ID)
Translation Variable	Global	Multi-language strings

Formula Language

// String
CONCATENATE("Hello, ", pageVars.userName)
UPPERCASE(data.customer.name)
FORMAT_LOCALIZED_DECIMAL(outputs.price, "en", 2)

// List operations
MAP(data.Orders, {id: item.ID, label: item.description})
SELECT(data.Orders, item.status == "Open")
SUM(MAP(data.OrderItems, item.quantity * item.unitPrice))
COUNT(data.Orders)

// Conditional
IF(pageVars.isAdmin, "Admin Panel", "User Dashboard")
IF(IS_EMPTY(data.results), "No results found", "Found " + COUNT(data.results))

// Date
FORMAT_DATETIME_LOCAL(NOW(), "YYYY-MM-DD")
DATETIME_DIFFERENCE(data.order.createdAt, NOW(), "days")

Common Patterns

Pattern 1: OData Integration via BTP Destination

BTP Destination setup:

Name=S4HANA_ODATA
Type=HTTP
URL=https://my-s4.example.com/sap/opu/odata/sap/
ProxyType=Internet
Authentication=OAuth2SAMLBearerAssertion
Audience=https://my-s4.example.com
tokenServiceURL=https://my-s4.example.com/sap/bc/sec/oauth2/token

In Build Apps:

1. Data tab → Add Integration → SAP BTP Destination
2. Select destination → Browse available OData services
3. Select entity set → Enable CRUD operations as needed
4. Data variable auto-generates with pagination support

Pattern 2: Page Navigation with Parameters

// On list item tap:
Logic Flow:
  [Component Tap] ──► [Open Page]
                        Page: DetailPage
                        Parameters:
                          orderId = repeated.current.ID
                          orderTitle = repeated.current.description

// On DetailPage:
  [Page Mounted] ──► [Get Record]
                       Resource: Orders
                       ID: pageParams.orderId
                   ──► [Set Page Variable]
                         Variable: orderDetail
                         Value: outputs["Get Record"].record

Pattern 3: Form with Validation

// Page variables:
formData = { name: "", email: "", phone: "" }
errors = { name: "", email: "", phone: "" }
isValid = false

// Validation formula (bound to Save button Disabled property):
IF(
  IS_EMPTY(pageVars.formData.name) ||
  !MATCHES(pageVars.formData.email, "^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+$") ||
  LENGTH(pageVars.formData.phone) < 10,
  true,
  false
)

// Save logic flow:
[Button Tap] ──► [If Condition: isValid]
                   ├─ True ──► [Create Record] ──► [Toast: "Saved!"] ──► [Navigate Back]
                   └─ False ──► [Set Variable: errors] ──► [Toast: "Fix errors"]

Pattern 4: Authentication Flow

// App launch logic (Global Canvas):
[App Launched] ──► [Get Auth Token]
               ──► [If: IS_EMPTY(token)]
                     ├─ True ──► [Open BTP Login Page]
                     └─ False ──► [Set App Variable: authToken]
                               ──► [Set App Variable: currentUser]

// For every API call, add header:
Authorization: Bearer {appVars.authToken}

Pattern 5: Offline-Capable App

// Strategy: Cache data locally, sync when online

[Page Mounted] ──► [If: IS_ONLINE]
                     ├─ True ──► [Get Collection] ──► [Set On-Device Storage]
                     └─ False ──► [Get On-Device Storage] ──► [Set Data Variable]

// On form submit (offline-aware):
[Submit] ──► [If: IS_ONLINE]
               ├─ True ──► [Create Record (API)] ──► [Toast: "Saved"]
               └─ False ──► [Append to On-Device Queue]
                          ──► [Toast: "Saved offline, will sync"]

// Sync queue when back online:
[Connectivity Changed: Online] ──► [Get On-Device Queue]
                               ──► [Loop: Create Record for each]
                               ──► [Clear Queue]

Pattern 6: Integration with SAP Build Process Automation

// Trigger workflow from Build Apps:
[Submit Button] ──► [HTTP Request]
                      Method: POST
                      URL: {appVars.spaBaseUrl}/workflow/rest/v1/workflow-instances
                      Headers:
                        Authorization: Bearer {appVars.authToken}
                        Content-Type: application/json
                      Body:
                        {
                          "definitionId": "{{WORKFLOW_DEFINITION_ID}}",
                          "context": {
                            "requestor": appVars.currentUser.email,
                            "amount": pageVars.formData.amount,
                            "description": pageVars.formData.description
                          }
                        }
                ──► [If: status == 201]
                      ├─ True ──► [Toast: "Workflow started"]
                      └─ False ──► [Toast: "Error: " + outputs.error]

Error Catalog

Error	Context	Root Cause	Fix
CORS error	REST integration	API doesn't allow Build Apps origin	Use BTP Destination (proxy) instead of direct URL
401 Unauthorized	Data fetch	Auth token expired or misconfigured	Check destination auth config; refresh token
404 Not Found	OData call	Wrong entity set or service URL	Verify OData service URL in destination
Network Error	Preview/runtime	BTP destination unreachable	Check destination status in BTP cockpit
Formula error	Visual formula	Type mismatch or null value	Add null checks: IF(IS_NULLY(x), default, x)
Build failed	iOS/Android build	Missing certificates or provisioning	Upload valid signing certificates in Build Service
Blank page	Deployed app	Missing HTML5 app router config	Configure xs-app.json routes correctly
Data variable empty	Page load	Data fetch timing issue	Add delay or use "Data variable initialized" event

Performance Tips

1. Minimize data variables per page — Each triggers an API call on page load; use pagination
2. Client-side filtering — For small datasets (<500 records), fetch once and filter with SELECT() formula
3. Server-side filtering — For large datasets, pass OData $filter parameters
4. Image optimization — Use compressed images; lazy-load off-screen images
5. Reduce page complexity — Keep components under 50 per page; use subpages for complex UIs
6. Cache with app variables — Store reference data (dropdown options) in app variables, not per-page
7. Avoid deep nesting — Deeply nested containers slow rendering; flatten where possible

Gotchas

• Not a code platform: Build Apps generates runtime code — you cannot directly edit JavaScript/HTML
• BTP Destination required: Direct REST calls hit CORS issues; always use BTP destination as proxy
• Mobile build queue: iOS/Android builds go through a shared queue; expect 10-30 min wait times
• Version control: No native Git integration; use project export/import for backup
• Formula limits: Complex formulas with deep nesting can become unreadable — break into page variables
• Data variable refresh: Default polling interval is 5 seconds; disable auto-refresh for static data