title: How to disable letterboxing and adjust UI5 for the widescreen?
body: <p>I have an UI5-based app (1.66+), which works correctly, but there are huge empty spaces on the left and right sides of the screen (aka <a href="https://experience.sap.com/fiori-design-web/letter-boxing/" rel="noreferrer">letterboxing</a> is on):</p>
  
  <p><a href="https://i.stack.imgur.com/Msoac.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Msoac.png" alt="Widescreen SAPUI5 app"></a></p>
  
  <p>I want to disable letterboxing to use the entire screen space.</p>
  
  <p>I tried the following approaches so far:</p>
  
  <ol>
  <li>To use <code>"fullWidth": true</code> in <code>sap.ui</code> section of <strong>manifest.json</strong></li>
  <li>To add desktop-related classes to the HTML-tag in <strong>index.html</strong>:</li>
  </ol>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html class="sap-desktop sapUiMedia-Std-Desktop sapUiMedia-StdExt-LargeDesktop"&gt;
  </code></pre>
  
  <ol start="3">
  <li>To add <code>appWidthLimited: false</code> to <strong>index.html</strong>:</li>
  </ol>
  
  <pre class="lang-js prettyprint-override"><code>&lt;script&gt;
      sap.ui.getCore().attachInit(function () {
          new sap.m.Shell({
              app: new sap.ui.core.ComponentContainer({
                  height: "100%",
                  name: "APPNAME"
              }),
              appWidthLimited: false
          }).placeAt("content");
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Just like it is described in «<a href="https://stackoverflow.com/a/46730195">How to customise Shell container in SAPUI5</a>».</p>
  
  <p>But none of them works for me.</p>
  
  <p><strong>Update:</strong><br>
  I succeeded to solve the issue via a static XML-template — just add <code>&lt;Shell id="shell" appWidthLimited="false"&gt;</code> to the main XML-template, but now I want to understand how to implement it via JS in <code>new sap.m.Shell(…)</code> definition.</p>
  
  <p>The starting point for code experiments is below.</p>
  
  <p><strong>index.html</strong>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;title&gt;widescreen&lt;/title&gt;
          &lt;script id="sap-ui-bootstrap"
              src="../../resources/sap-ui-core.js"
              data-sap-ui-theme="sap_fiori_3"
              data-sap-ui-resourceroots='{"letterboxing.widescreen": "./"}'
              data-sap-ui-compatVersion="edge"
              data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
              data-sap-ui-async="true"
              data-sap-ui-frameOptions="trusted"&gt;
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body class="sapUiBody"&gt;
          &lt;div data-sap-ui-component data-name="letterboxing.widescreen" data-id="container" data-settings='{"id" : "widescreen"}' id="content"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Component.js</strong>:</p>
  
  <pre class="lang-js prettyprint-override"><code>sap.ui.define([
      "sap/ui/core/UIComponent",
      "sap/ui/Device",
      "letterboxing/widescreen/model/models"
  ], function (UIComponent, Device, models) {
      "use strict";
  
      return UIComponent.extend("letterboxing.widescreen.Component", {
  
          metadata: {
              manifest: "json"
          },
  
          init: function () {
              // call the base component's init function
              UIComponent.prototype.init.apply(this, arguments);
  
              // enable routing
              this.getRouter().initialize();
  
              // set the device model
              this.setModel(models.createDeviceModel(), "device");
          }
      });
  });
  </code></pre>