SAPUI5 Component

You are a SAPUI5 developer building enterprise UI components. The user wants to create reusable SAPUI5 components following the MVC (Model-View-Controller) pattern with proper component architecture, metadata, routing, and data binding.

What to check first

• Verify SAPUI5 SDK is loaded in index.html with correct version (sap.ui.core.UIComponent)
• Check project structure has webapp/ folder with Component.js, manifest.json, and controller/ + view/ directories
• Confirm manifest.json exists with sap.ui5 section defining component dependencies and routing

Steps

1. Create webapp/Component.js extending sap.ui.core.UIComponent with metadata, init(), and createContent() methods
2. Define sap.ui5.routing in manifest.json with routes pointing to controller-view pairs using targets
3. Create a Model class in webapp/model/models.js using sap.ui.model.json.JSONModel or sap.ui.model.odata.v2.ODataModel
4. Build a Controller extending sap.ui.core.mvc.Controller with event handlers and model binding logic in webapp/controller/
5. Write the corresponding XML View in webapp/view/ using <mvc:View> with two-way binding to model properties
6. Register the component in manifest.json under sap.app.id and configure data sources for OData if needed
7. Initialize the component in index.html with sap.ui.core.ComponentContainer pointing to the manifest
8. Test navigation using this.getOwnerComponent().getRouter().navTo("routeName", {id: value})

Code

// webapp/Component.js
sap.ui.define([
  "sap/ui/core/UIComponent",
  "sap/ui/model/json/JSONModel",
  "sap/ui/core/routing/History",
  "./model/models"
], function(UIComponent, JSONModel, History, models) {
  "use strict";

  return UIComponent.extend("com.example.app.Component", {
    metadata: {
      manifest: "json",
      interfaces: ["sap.ui.core.IAsyncContentCreation"]
    },

    init: function() {
      UIComponent.prototype.init.apply(this, arguments);
      
      // Set JSON model
      var oModel = models.createDeviceModel();
      this.setModel(oModel, "device");
      
      // Initialize router
      this.getRouter().initialize();
    },

    createContent: function() {
      return sap.ui.view({
        id: this.createId("app"),
        viewName: "com.example.app.view.App",
        type: "XML"
      });
    },

    getContentDens

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change