Hello *,
Creating a new SAPUI5 component is rather easy. In this short tutorial I intend to show you how to create the TreeMultiComboBox SAPUI5 compound component that you can see in the image below, or on JS Bin.
First a small disclaimer: The code you are about to see was written exclusively for demonstration purposes. It is not optimal and it is not to be used in any productive environment without further modifications.
The following json Object will come in handy for testing the component:
var oData = {
1: {
name: "item1",
value: "item1 description",
checked: "Unchecked",
subs: [
{
name: "subitem1-1",
value: "subitem1-1 description",
checked: "Unchecked"
},
{
name: "subitem1-2",
value: "subitem1-2 description",
checked: "Unchecked"
}]
},
2: {
name: "item2",
value: "item2 description",
checked: "Unchecked",
subs: [
{
name: "subitem2-1",
value: "subitem2-1 description",
checked: "Unchecked"
},
{
name: "subitem2-2",
value: "subitem2-2 description",
checked: "Unchecked"
}]
},
3: {
name: "item3",
value: "item3 description",
checked: "Unchecked"
},
4: {
name: "item4",
value: "item2 description",
checked: "Unchecked",
subs: [
{
name: "subitem4-1",
value: "subitem2-1 description",
checked: "Unchecked"
},
{
name: "subitem4-2",
value: "subitem2-2 description",
checked: "Unchecked"
},
{
name: "subitem4-3",
value: "subitem2-2 description",
checked: "Unchecked"
},
{
name: "subitem4-4",
value: "subitem2-2 description",
checked: "Unchecked"
}]
}
};
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(oData);
First, we begin by extending the core component. Inheritance in SAPUI5 is achieved by calling the extend method on the object that we wish to inherit from. For this controller I will extend the base controller object. This will guarantee that the new component will have all the base Controller features, and nothing more.
sap.ui.core.Control.extend(controllerName, configObject);
Where controllerName is the name of the new component and configObject is a JSON object that describes to SAPUI5 how the controller should behave. Inside the configObject we can add a metadata object where all the variables and events that belong to the controller are declared.
The metadata object is declared inside the configObject and is defined as such:
,metadata: {
properties: {
field1: Type
},
events: {
"eventName": EventDescriptionObject
},
aggregations: {
aggregate1: aggregate1DescriptionObject
},
associations: {
association1: association1DescriptionObject
}
},
For a thorough list of what is possible with the metadata object, please refer to the following page.
Field Types are strings that can be one of the following: string, int, float, int[].., sap.ui.core.CSSSize. SAPUI% will then create the getter and the setter functions on your behalf. So if we declare a property, say prop, then SAPUI5 creates two functions: setProp() and getProp() which can be overridden.
Events are defined by name only. For each event, three functions are defined for registering, unregistering and for firing it. For an event go, attachGo, detachGo, and fireGo are all declared.
Finally, aggregations and associations are other components that belong to the component that we are trying to create. Aggregations are those components that are to be treated as a part of the object while associations are components that are only associated with the object.
For our component the metadata object looks as follows:
metadata: {
aggregations: {
header: {
type: "sap.m.MultiComboBox",
multiple: false
},
pop: {
type: "sap.ui.ux3.ToolPopup",
multiple: false
},
},
}
Inside the configObject we can also define a few other methods that the SAPUI5 components can utilize. These methods are:
- init: executed once the component is initiated
- onAfterRendering: executed after every time the component is redrawn
- onBeforeRendering: executed before every time the component is redrawn
- onExit: executed when the component is destroyed
For a full list of what is available refer here.
The last important bit of the configObject is the rendererObject which contains the render function that creates the HTML.
renderer: {
render: function (oRm, oControl) {
oRm.write("<div ");
oRm.writeControlData(oControl);
oRm.write("id=\"cntrl\">");
oRm.renderControl(oControl.getAggregation("btn"));
oRm.write("</div>");
}
}
Interestingly, the object oRm that is passed to the render function can write direct html (lines 3,5,7), or an entire controller (line 6). It is also worth mentioning that the controller data needs to be written to the html element that would contain the component using the method writeControlData, as in line 4.
- SAP Managed Tags:
1 Comment
