[1] Effective default values

The easiest way to specify a configuration value is not to specify it. The SAPUI5 runtime contains a default value for each configuration option. As long as you don't have to change the value, simply don't specify it.

The effective default values can be found in the complete list of Configuration Options and URL Parameters.

[2] Global configuration object

The global configuration object is a property in the globalThis object with the property name sap-ui-config. The property must be a simple object, where each property represents the configuration option of the corresponding name.

As the sap-ui-config property is not a valid JavaScript identifier, it needs to be enclosed by quotes. The same applies for configuration properties specified in kebab case:

globalThis["sap-ui-config"].language = "en";
globalThis["sap-ui-config"]["animation-mode"] = "full";

Be careful with overwriting the config object, as others might have already provided some options:

// Be mindful of already existing configuration options
globalThis["sap-ui-config"] ??= {};
Object.assign(globalThis["sap-ui-config"], {
    language: "en",
    "animation-mode": "full"
});

The following code snippets show an example how to add a configuration before bootstrapping UI5:

globalThis["sap-ui-config"] ??= {}; // globalThis["sap-ui-config"] could be already available
globalThis["sap-ui-config"]["compat-version"] = "edge";

<script src="config.js"></script>
<script id="sap-ui-bootstrap"
            src="resources/sap-ui-core.js">
</script>

[3] sap-ui-config.json (deprecated)

This option is activated by setting globalThis["sap-ui-config"] to an arbitrary string value.

[4] Configuration string in the data-sap-ui-config attribute (deprecated)

The bootstrap attribute data-sap-ui-config enables you to provide a single attribute with the configuration information for the SAPUI5 runtime.

You can use this attribute instead of attaching individual options with individual configuration attributes to the script tag. Its content is similar to the Global Configuration Object but without the enclosing parentheses; it is a comma-separated list of key-value pairs.

<script id="sap-ui-bootstrap"
	src="resources/sap-ui-core.js"
	data-sap-ui-config="
	\"anmination-mode\":\"full\",
		\"compat-version\":\"edge\"
	">
</script>

[5] Individual data-sap-ui-<UI5-supported-config-option> attributes of the bootstrap tag

For each configuration option, you can have one attribute in the bootstrap script tag. These attributes must provide the following information:

• Attribute name in kebab case

  The attribute name is composed of the name of the configuration option and the data-sap-ui- prefix. The first part of the prefix (data-) is necessary to comply with the W3C recommendations for custom attributes in HTML. The second part (-sap-ui-) separates SAPUI5 attributes from custom attributes defined by any other framework. The third part is the config option name in kebab case.

• Value

  Element attributes in HTML have a string value by definition. For configuration options of type string, the attribute value is equivalent to the value of the option.

  Note

  If the value contains specific HTML characters, such as < or >, or if the value contains the same quote character that is used to wrap the attribute value, the usual HTML escape mechanisms must be used: Use entities for the specific HTML characters, for example < instead of <, and switch the type of quotes from single to double or vice versa.

  Hidden

  <script id="sap-ui-bootstrap"
              src="resources/sap-ui-core.js"
              data-sap-ui-compat-version="edge">
  </script>

[6] Individual meta tag attributes

For each configuration option, you can add a meta tag. These attributes must provide the following information:

• Attribute name in kebab case

  The attribute name is composed of the name of the configuration option and the data-sap-ui- prefix. The first part of the prefix (data-) is necessary to comply with the W3C recommendations for custom attributes in HTML. The second part (-sap-ui-) separates SAPUI5 attributes from custom attributes defined by any other framework. The third part is the config option name in kebab case. The attribute name must be provided within the name attribute of the meta tag.

• Value

  Element attributes in HTML have a string value by definition. For configuration options of type string, the attribute value is equivalent to the value of the option. The attribute value must be provided within the content attribute of the meta tag.

  Note

  If the value contains specific HTML characters, such as < or >, or if the value contains the same quote character that is used to wrap the attribute value, the usual HTML escape mechanisms must be used: Use entities for the specific HTML characters, for example < instead of <, and switch the type of quotes from single to double or vice versa.

  Hidden

  <meta name="sap-ui-compat-version" content="edge">

[7] URL parameters

Configuration parameters can be added to the URL of an app.

The URL parameter name is composed of the name of the configuration option and the sap-ui- prefix, for example like index.html?sap-ui-debug=true.

The value of a URL parameter is of type string and the same type mapping as for HTML attributes applies. However, URLs require a different encoding than HTML; they use, for example % encoding instead of entity encoding.

For security reasons, only some configuration options can be set via URL parameters. An application can set the ignore-url-parameters option to true to disable URL configuration parameters completely.

[8] Specific APIs

The configuration options above are evaluated when booting SAPUI5. After that, all changes to these parameters are ignored.

For a limited set of configuration options, specific APIs exist that allow you to modify these options at runtime.

You can find these APIs in Configuration Options and URL Parameters.