Fiori Mobile：部署移动应用时隐藏Launchpad页眉

AI 小北

2026-5-26

Hey there! I’ve tackled this exact problem multiple times when deploying mobile apps to Fiori Launchpad via SAP Cloud Platform Web IDE—let me share the go-to fixes that always get the job done.

1. Modify Your App’s manifest.json (Permanent Fix)

This is the most straightforward approach, as it embeds the header-hiding logic directly into your app’s configuration:

Open your project’s webapp/manifest.json file in Web IDE
Locate the sap.ui5 section, and add (or update) the config node to include "fullWidth": true—this forces your app to take up the entire FLP viewport, automatically hiding the top header:
```
"sap.ui5": {
  "config": {
    "fullWidth": true
  }
}
```

For even more precise control, you can target the FLP Shell Bar directly in the sap.app -> crossNavigation -> inbounds section. Find your app’s inbound ID, then add this parameter to its signature:

"sap.app": {
  "crossNavigation": {
    "inbounds": {
      "YourAppInboundID": {
        "signature": {
          "parameters": {
            "sap-ushell-config": "{\"renderers\":{\"fiori2\":{\"componentData\":{\"config\":{\"hideShellBar\":true}}}}}"
          }
        }
      }
    }
  }
}

2. Set Launch Parameters During Deployment (No Code Changes)

If you don’t want to modify your app’s code, you can configure this directly in the Web IDE deployment wizard:

Right-click your project, select Deploy -> Deploy to SAP Fiori Launchpad
When you reach the Application Configuration step, look for the Custom Parameters section

Add a new parameter with key sap-ushell-config and value:

{"renderers":{"fiori2":{"componentData":{"config":{"hideShellBar":true}}}}}

Finish the deployment flow, and your app will launch without the FLP header next time.

3. Dynamic Control via FLP Shell API (For Runtime Flexibility)

If you need to toggle the header on/off while the app is running, use the FLP Shell API in your app’s Component.js:

Update the init method to include this code:

sap.ui.define([
  "sap/ui/core/UIComponent",
  "sap/ushell/Container"
], function(UIComponent, Container) {
  "use strict";

  return UIComponent.extend("your.app.namespace.Component", {
    init: function() {
      UIComponent.prototype.init.apply(this, arguments);
      
      // Hide the FLP Shell Bar on app load
      const oRenderer = Container.getRenderer("fiori2");
      if (oRenderer) {
        oRenderer.setVisible(false, "shellBar");
      }
    }
  });
});

Most mobile app use cases are covered perfectly by either method 1 or 2—give them a shot first. If you hit any roadblocks, feel free to follow up with more details about your app setup!

内容的提问来源于stack exchange，提问作者Adam Harkus