Show TOC

Component ConfigurationLocate this document in the navigation structure

Component configuration is used for the definition of a static configuration for components.

The configuration is available in the component metadata and you can access the configuration without creating instances of the component. The configuration format is JSON. The following code snippet shows how you define the configuration for components.

sap.ui.core.UIComponent.extend("sap.samples.Component", {

    metadata : {
        version : "1.0",
        config: {
            
            "sap.samples.config1": {
                
                "Key1-1": "Value1-1",
                "Key1-2": "value1-2"
                
            },
            
            "sap.samples.config2": {
                
                "Key3-1": "Value3-1",
                "Key3-2": "Value3-2"
                
            }
            
        }
    }
});

To access the configuration without creating an instance of the component, simply require the component as follows:

jQuery.sap.require("sap.samples.Component");
var oConfig = sap.samples.Component.getMetadata().getConfig();

A component instance can access its configuration as shown in the following code snippet:

[...]

  init: function() {
    var oConfig = this.getMetadata().getConfig();
  }

  [...]

When you extend a component and add additional configuration, the configuration is merged with the original component:

sap.samples.Component.extend("customer.Component", {

    metadata : {
        version : "1.0",
        config: {
            
            "sap.samples.config1": {

                "Key1-3": "Value1-3"

            },
            
            "customer.config1": {
                
                "Key1-1": "Value1-1"
                
            }
            
        }
    }
});

The merged configuration then looks as follows:

var oConfig = {
    "sap.samples.config1": {
        "Key1-1": "Value1-1",
        "Key1-2": "value1-2",
        "Key1-3": "Value1-3"
    },
    "sap.samples.config2": {
        "Key3-1": "Value3-1",
        "Key3-2": "Value3-2"
    },
    "customer.config1": {
        "Key1-1": "Value1-1"
    }
};