This blog explains a basic workaround on custom controls development and I have used SAP Business Application Studio as my IDE tool.
Also Read: SAP Certification
Lets begin the development. Make sure to have an active subscription to SAP Business Application Studio from Cloud Foundry environment.
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2020/06/app1.png?resize=303%2C216&ssl=1)
Click on Create Dev Space
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2020/06/app2-1024x161.png?resize=730%2C115&ssl=1)
Name the Dev Space like zdemo, choose SAP Fiori and then Create.
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2020/06/app3-1024x471.png?resize=730%2C336&ssl=1)
Check for Running state and press zdemo
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2020/06/app4-1024x271.png?resize=730%2C193&ssl=1)
From below landing page, go with New project from template
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2020/06/app5-1-1024x478.png?resize=730%2C341&ssl=1)
Follow the below steps to create the project.
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2020/06/app6.png?resize=730%2C360&ssl=1)
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2020/06/app7.png?resize=730%2C370&ssl=1)
Name your project
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2020/06/app8.png?resize=730%2C386&ssl=1)
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2020/06/app9.png?resize=730%2C383&ssl=1)
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2020/06/app10.png?resize=730%2C385&ssl=1)
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2020/06/app11-1024x449.png?resize=730%2C320&ssl=1)
From the workspace, create folder control and file CustomControl.js
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2020/06/app12.png?resize=211%2C286&ssl=1)
CustomControl.js
I used sap.m.ComboBox for demo purpose. This can be replaced by our own custom design.
sap.ui.define(["sap/ui/core/Control", "sap/m/ComboBox", "sap/ui/core/Item"],
function (Control, ComboBox, Item) {
"use strict";
return Control.extend("ns.HTML5Module.control.CustomControl", {
metadata: {
aggregations: {
_combobox: {
type: "sap.ui.core.Control",
multiple: false,
visibility: "hidden"
}
}
},
init: function () {
this.setAggregation("_combobox", new ComboBox("idComboBox", {
items: [
new Item({
key: "1",
text: "Supriya"
}),
new Item({
key: "2",
text: "Sainath"
}),
new Item({
key: "3",
text: "Bhuvana"
})
]
}));
},
renderer: function (oRm, oControl) {
oRm.openStart("div", oControl);
oRm.openEnd();
oRm.renderControl(oControl.getAggregation("_combobox"));
oRm.close("div");
}
});
}
);
Mention the created control in view.xml
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2020/06/app13.png?resize=730%2C236&ssl=1)
Now it’s time to run our application. Click Run from Left Pane.
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2020/06/app14.png?resize=255%2C476&ssl=1)
Choose + sign
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2020/06/app15.png?resize=247%2C99&ssl=1)
Proceed with below steps.
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2020/06/app16.png?resize=624%2C60&ssl=1)
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2020/06/app17.png?resize=688%2C114&ssl=1)
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2020/06/app18.png?resize=627%2C121&ssl=1)
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2020/06/app19.png?resize=640%2C63&ssl=1)
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2020/06/app20.png?resize=227%2C108&ssl=1)
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2020/06/app21-1024x366.png?resize=730%2C261&ssl=1)
Finally the output can be seen in New Tab once we press on Expose and Open.
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2020/06/app22-1024x242.png?resize=730%2C173&ssl=1)