component.js FileLocate this document in the navigation structure

The component.js file is the component controller and provides the runtime metadata and the component methods.

A component can depend on the entire SAPUI5 library. If you only require particular controls, you can also start with the corresponding require statements directly. The following code snippet is an example for a declaration statement: 
jQuery.sap.declare ("samples.Components.shell.Component");

To create a UI component, you extend the UI component's base class and pass to it the name of the new component and its package path as shown in the following code snippet:

// Shell Component
sap.ui.core.UIComponent.extent("samples.components.shell.Component", {
[...]

The metadata provide the information to ensure the completeness of the elements of which the component consists of. This facilitates the decoupling of the application logic as much as possible from the logic within a particular component. The following metadata parameters can be defined in the component.js file:

  • abstract
  • version
  • includes
  • dependencies
    • external
    • libs
    • components
    • ui5version
  • publicMethods
  • aggregations
  • library
  • autoDestroy
  • initOnBeforeRender

The following code snippet is taken from the component sample application and contains examples for all metadata parameters in the component.js file::

sap.ui.core.UIComponent.extend("samples.components.shell.Component", {
	metadata : {
		"abstract": true,
		version : "1.0",
		includes : [ "css/shell.css" ],  //array of css and/or javascript files that should be used in the component
		dependencies : { // external dependencies
			libs : [ ],// array of required libraries, e.g. UX3 if your component depends on them 
			components : ["samples.components.products.overview", "samples.components.products.details", "samples.components.products.supplier"], // nested components - more about these, later on
			ui5version : "1.13.0"
		},
		publicMethods: [ "render" ],
		aggregations: {
			"rootControl": { type: "sap.ui.core.Control", multiple: false, visibility: "hidden" } // needs to be set to enable databinding functionality
		},
		library: "samples.components.shell", // inherited from ManagedObject, if omitted, the current package is automatically retrieved
		autoDestroy: false, // destroy component when view should be destroyed
		initOnBeforeRender: true
	}
});

You can add a properties section to the metadata for all properties that can adopt different values during runtime. The getters and setters for these properties are generated automatically, but you can overwrite them if you require additional functionality.

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" }
		},
	}
});

You can use the following methods to control the initial instantiation of the component:

  • init

    Overwrite this method for example to connect the model between the control and the component. This method is not called by the application directly, but called automatically when you create the instance of the component.

  • createContent

    The createContent method needs to be overwritten within your component implementation. You use this method to place all the code which is required to fill your component with the respective content, for example, creating an instance of the controls that should be used, or connecting the view that should be displayed. For the latter, you simply need to set this view to the view you whish to use. See the following code snippet for an example:

    this.view = sap.ui.view({id:"myView",viewName:"samples.components.products.details.view.Details",type:sap.ui.core.mvc.ViewType.JS});