Component Metadata

The component class provides specific metadata for components by extending the ManagedObject class. The UIComponent class provides additional metadata for the configuration of user interfaces or the navigation between views.

The metadata defined in component.js is common for faceless components and UI components. The following parameters are available:

• abstract: Specifies if your component class is an abstract class that serves as a base for other components

• version: Version of your component; this parameter belongs to the design-time metadata and is currently not used; it may be used in the future in the design-time repository

• includes: Array of strings containing the paths to CSS and JavaScript resources for your component; will be added to the header of the HTML page and loaded by the browser. The resources will be resolved relative to the location of Component.js.

• dependencies: Used to specify all external dependencies, such as libraries or components. Like the includes for resources that are added to the application’s HTML, the dependencies are loaded by SAPUI5 core before the component is initialized. Everything that is referenced here can be used in your component code right from the start. Specify here external dependences such as libraries or components, that will be loaded by SAPUI5 core in the initialization phase of your Component and can be used after it.

  • libs: Path to the libraries that should be loaded by SAPUI5 core to be used in your component

  • components: Full path to the components that should be loaded by SAPUI5 core to be used in your component

  • ui5version: Minimum version of SAPUI5 that the component requires; it helps to be ensure that the features of SAPUI5 runtime used in this component are available. As SAPUI5 currently does not enforce the use of the correct version, it is only used for information purposes.

• properties: Defined for components in the same way as for a control or view

• library: Specify the library the component belongs to

• config: Static configuration; specify the name-value pairs that you need in the component

• customizing: Customizing for components and views, see Extending Applications

  • sap.ui.viewExtensions: Used for providing custom view content in a specified extension point in the standard application

  • sap.ui.viewModifications: Used for overriding control properties in the standard application

  • sap.ui.viewReplacements: Used for replacing a standard view with a custom view

  • sap.ui.controllerExtensions: Used for replacing a standard controller with a custom controller

Example for metadata in component.js:

sap.ui.core.Component.extend("some.sample.Component", {
    
   metadata : {
        stereotype : "component", - describes what sap ui5 object it is, for example: element, control, component, in your case it is (what a surprise...) - "component"
        "abstract": true,  - specifies if your Component class is an abstract one that serves as a base for your other components 
        version : "1.0",  the version of your Component
        includes : [],  // css, javascript files that should be used in the component
        dependencies : { // external dependencies
            libs : [], // the libraries that you component will be using
            components : [], // the components that your component will use
            ui5version : "" // the version of SAP UI5 that your component requires
                },
                properties: {
                    config : "any"
            },
                library: "sap.ui.core" // what library belongs your component to 
        config: { // static configuration
                        "sap.samples.config1": {
                             "Key1-1": "Value1-1",
                             "Key1-2": "value1-2"
                        },            
                       "sap.samples.config2": {
                            "Key3-1": "Value3-1",
                            "Key3-2": "Value3-2"
                      }
                }, 
        customizing: { // - serves for SAP UI5 Extentibility concept
            "sap.ui.viewReplacements": {
                "sap.xx.org.Main": {
                viewName: "sap.xx.new.Main",
                type: "XML"
                }
            },
            "sap.ui.controllerReplacements": {
                "sap.xx.org.Main": "sap.xx.new.Main"
            },
            "sap.ui.viewExtensions": {
                "sap.xx.new.Main": { 
                "extensionX": {
                name: "sap.xx.new.Fragment1",
                type: "sap.ui.core.XMLFragment"
                },
                "extensionY": {
                    ...
                }
                 }
               },
                "sap.ui.viewModification": {
                "sap.xx.new.Main": {
                    "myControlId": {
                        text: "{i18n_custom>mytext}"
                    }
                }
            }   
        }
    }
});

In addition to the common metadata for components, the UIComponent class provides the following metadata for UI comonents:

• rootView: Can be the view name as string or the view configuration object

• publicMethods: Definition of public methods for your component

• aggregations: Defines aggregations for your component

• routing: Provides the default values for all views

  config: Default values for routing that are applied, if no setting is specified by a route

  • viewType: View type of the view that is created, for example XML, JS or HTML

  • viewPath: Prefix that is preceding the view

  • targetParent: ID of the view in which the targetControl is searched

  • targetControl: ID of the control that contains the views

  • targetAggregation: Name of the aggregation of the targetControl that contains views

  • clearTarget: Boolean; if set to true, the aggregation should be cleared before adding the View to it

  routes: Contains the configuration objects

  • name: Mandatory parameter used for listening or navigating to the route

  • pattern: String that is matched against the hash. The {} means this segment of the URL is passed to a handler with the value it contains

  • view: Name of the view that is created

Example for UI component metadata:

sap.ui.core.UIComponent.extend("some.sample.UIComponent", {
    
    metadata : {
        rootView : null, // the rootView to open (view name as string or view configuration object)
    publicMethods: [ "render" ],
    aggregations: {
        "rootControl": { 
                        type: "sap.ui.core.Control", multiple: false, visibility: "hidden"
                }
    },
    routing: {  
        config: { // default values for routing
            viewType : "XML",
            viewPath: "NavigationWithoutMasterDetailPattern.view",
            targetParent: "myViewId",
            targetControl: "app",
            targetAggregation: "pages",
            clearTarget: false
        },
            
        routes: [ // contains routing configuration objects
            {
            name : "myRouteName1",
            pattern : "FirstView/{from}",
            view : "myViewId"
            },
            ]
            
        },
        config: {
            .....some configuration
        },
        customizing: {
                      
            .....some configuration        
        }
    }
});

sap.ui.core.UIComponent.extend("samples.components.shell.Component", {
	metadata : {
		"abstract": true,
		version : "1.0",
		includes : [ "css/shell.css" ],  

[… omitting some lines to make the example shorter]

		initOnBeforeRender: true,
		properties : {
			appTitle: {	name:"appTitle", type:"string", defaultValue:"Default Value that will be replaced with something meaningful through the setter for this property" },
someOtherProp: {	name:"myProperty", type:"string", defaultValue:"Some text" }
		},
	}
});