API Reference IconPool: https://sapui5.hana.ondemand.com/sdk/#/api/sap.ui.core.IconPool
In my case I used a custom formatter and the getIconForMimeType() function from the IconPool to get the required Icons for my list items.
myView.xml
icon="{path: 'mimeType', formatter: '.formatter.getIconForMimeType'}">
formatter.js
getIconForMimeType: function(sMimeType) {
return sap.ui.core.IconPool.getIconForMimeType(sMimeType)
}
To simply get access to i18n texts, I useally add this helper function to my BaseController.js
// helper for direct access to the ResourceBundle getText() function
getText : function (sTextKey, aParamter) {
return this.getOwnerComponent().getModel("i18n").getResourceBundle().getText(sTextKey, aParamter)
}
Texts can then be read in every controller with
// i18n: objects=Amount of objects: {0}
this.getText("objects", [iLength])
If the error response is type json:
oModel.callFunction("/myFunction", {
method: "GET",
urlParameters: {
ID: myID,
},
success: oData => console.log(oData),
error: oError => MessageBox.error(JSON.parse(oError.responseText).error.message.value, { title: "An error occurred" })
});
If the error response is coming from a Gateway and has an XML body (link):
MessageBox.error(jQuery.parseXML(oError.response.body).querySelector("message").textContent)
https://sapui5.hana.ondemand.com/#/api/sap.ui.core.EventBus%23overview
In the receiving controller you need to subscribe your eventId and function you want to call from the second controller:
// Attaches an event handler to the event with the given identifier on the given event channel
this.getOwnerComponent().getEventBus().subscribe("Default", "myEventId", () => {
this._myFunctionIWantToCall();
});
The sending controller has to publish the event to trigger the function call:
// Fires an event using the specified settings and notifies all attached event handlers.
this.getOwnerComponent().getEventBus().publish("Default", "myEventId", {});
Get:
const oModel = this.getView().getModel()
const sPath = this.getView().getBindingContext().sPath
const sID = oModel.getProperty(sPath+"/ID")
Set:
const newID = "12345"
oModel.setProperty(sPath+"/ID", newID)
When using the set property function, you can now submit your changes this way:
// First check if there are any changes
if (!oModel.hasPendingChanges()) {
MessageToast.show("Nothing to do!")
return
}
// Now submit your changes
oModel.submitChanges({
success: () => MessageToast.show("Success!"),
error: (err) => alert(err)
})
This way is much more comfortable, than using oModel.update().
this.getModel().read("/Object", {
filters: [
new Filter({
path: "firstName",
operator: FilterOperator.EQ,
value1: "Max"
}),
new Filter({
path: "lastName",
operator: FilterOperator.EQ,
value1: "Mustermann"
})
],
success: oData => { },
error: err => { }
});
https://sapui5.hana.ondemand.com/sdk/#/topic/5338bd1f9afb45fb8b2af957c3530e8f.html
There are two ways to use a filter.
Option 1:
items="{
path: '/myItems',
parameters : {
$filter : 'itemName eq \'myItemName\'',
$orderby : 'createdAt desc'
},
}">
Option 2:
items="{
path: '/myItems',
parameters : {
$orderby : 'createdAt desc'
},
filters : {
path : 'itemName ',
operator : 'EQ',
value1 : 'myItemName'
},
}">
There are several different types of buttons you can add to the Shell Header: https://sapui5.hana.ondemand.com/sdk/#/api/sap.ushell.renderers.fiori2.Renderer%23methods/Summary
For my test I choose the “addHeaderEndItem” Button. Add the fowlloing logic in the Component.js file to create the button and the logic for switching the theme:
_addHeaderButton: function () {
const oRenderer = sap.ushell.Container.getRenderer("fiori2");
oRenderer.addHeaderEndItem("sap.ushell.ui.shell.ShellHeadItem", {
id: "toogleTheme",
icon: "sap-icon://circle-task-2",
visible: "{device>/orientation/landscape}",
tooltip: "Switch Theme",
press: (oEvent) => {
const toogleButton = oEvent.getSource();
if (toogleButton.getIcon() === "sap-icon://circle-task-2") {
sap.ui.getCore().applyTheme("sap_fiori_3_dark");
toogleButton.setIcon("sap-icon://circle-task");
} else {
sap.ui.getCore().applyTheme("sap_fiori_3");
toogleButton.setIcon("sap-icon://circle-task-2");
}
}
}, true);
},
Afterwars you need call the method in the init() function of the component. No reload the app and you will find the new button in the top right corner. Pressing will switch the theme to dark or back to light theme.
https://experience.sap.com/fiori-design-web/message-box/
https://sapui5.hana.ondemand.com/#/entity/sap.m.MessageBox
https://sapui5.hana.ondemand.com/#/api/sap.m.MessageBox
onRemoveItem: function (oEvent) {
const sPath = oEvent.getSource().getParent().getBindingContext().getPath()
const oModel = this.getView().getModel()
MessageBox.confirm(
this.getModel("i18n").getProperty("MessageBoxText"),
{
actions: [MessageBox.Action.YES, MessageBox.Action.NO],
emphasizedAction: MessageBox.Action.YES,
onClose: (sAnswer) => {
if (sAnswer === MessageBox.Action.YES) oModel.remove(sPath)
}
}
)
},
https://blogs.sap.com/2020/12/21/using-ui5-web-components/
“With UI5 Web Components, developers can build the core logic of the application using these popular web frameworks, while using UI5 Web Components as the visual elements (controls).
Each of these web frameworks have different ways of handling data layer, persistence, binding, and integration with APIs, etc. but the nice thing about web components is that is integrates easily, regardless of the framework.”