I am looking at changing the ShellAppTitle in a Fiori app. Refer the highlighted part in the snapshot below:
I already know a way to to this which I am not proud of:
sap.ui.getCore().byId("shellAppTitle").getText() /.setText()
Is there any better approach to achieve this?
The only improvement I could think of is to implement this via the FLP ShellUIService rather than the getCore() method. The reason being that if SAP changes the id of the header text, your code will break since it is not designed to work this way.
To implement the service, first declare it in your manifest.json:
{
...
"sap.ui5": {
"services" : {
"ShellUIService": {
"factoryName": "sap.ushell.ui5service.ShellUIService"
}
}
}
...
}
Then, you can access it in your Component.js via the following code:
// Component.js (the app root component)
...
this.getService("ShellUIService").then( // promise is returned
function (oService) {
oService.setTitle("Application Title"); // also could use .getTitle() first
},
function (oError) {
jQuery.sap.log.error("Cannot get ShellUIService", oError, "my.app.Component");
}
);
...
The full documentation can be found in the SAPUI5 SDK
Related
I'm trying to use the sap.m.Popover as a "rich tooltip" for some controls. This is as per recommendation from SAP because the sap.ui.commons library is now deprecated. We have too much text we want to add to the standard string tooltip. I haven't figured out a way to use the popover directly as a tooltip, which is why I've extended the TooltipBase control to handle the popover.
I've got the popover working fine, However when I interact with my control, I get the following error:
Uncaught Error: failed to load 'myNewToolTip/controls/TooltipBaseRenderer.js' from ../controls/TooltipBaseRenderer.js: 404 - Not Found
I see from these threads that it is because the TooltipBase class is an abstract class and therefore doesn't have a renderer. However, because I'm already using the popover, I don't need to render anything. I've tried to add the TooltipBaseRenderer.js and just have an empty render class. But UI5 really doesn't like that either.
My question is what should I do, I see two options:
There is probably a simple way to use the popover as a tooltip, which I'm just too stupid to figure out (Bear in mind, I'd prefer to bind it directly in the XML view).
Figure out a way to suppress the renderer call as I don't need it.
This is my current source code for the custom control:
sap.ui.define([
"sap/m/Popover"
], function (Popover) {
"use strict";
return sap.ui.core.TooltipBase.extend("myNewToolTip.TooltipBase", {
metadata: {
properties: {
title : {}
},
events: {
"onmouseover" : {},
"onmouseout" : {}
}
},
oView: null,
setView: function(view) {
this.oView = view;
},
onmouseover : function(oEvent) {
var that = this;
if (!this.delayedCall){
this.delayedCall = setTimeout(function() {
if (!that.oPopover){
that._createQuickView();
}
}, 500);
}
},
onmouseout: function(oEvent) {
if (this.oPopover){
this.closePopover();
this.delayedCall = undefined;
}
else{
clearTimeout(this.delayedCall);
this.delayedCall = undefined;
}
},
_createQuickView: function() {
var sTitle = this.getTitle();
this.oPopover = new Popover({
title: sTitle
});
this.oPopover.openBy(this.getParent());
},
closePopover: function(){
this.oPopover.close();
this.oPopover = undefined;
}
});
});
There is no need to create a custom control just to display a popover on mouseover. As you said, there is a simpler way: Adding event delegates.
One of the events that delegates can listen to is onmouseover which can be achieved like this:
this.byId("myTargetControl").addEventDelegate({
onmouseover: function () {
// Open popover here
}
});
Demo: https://embed.plnkr.co/jAFIHK
Extending sap.ui.core.TooltipBase
If you still consider extending TooltipBase (without Popover), take a look at this example: https://embed.plnkr.co/33zFqa?show=control/MyCustomTooltip.js,preview
Keep in mind, though, that tooltips in general shouldn't contain critical information due to its lack of discoverability as Fiori Design Guideline mentions
Tooltips (...) should never contain critical information. They should also not contain redundant information.
Just as a friendly reminder :) Don't make people hover to find things.
I want to hide few UI elements from My Travel and Expense (Standard App). I have tried in different approaches but I am not able to achieve what i want. Here is my requirement:
In My Travel and Expense App (TRV_TE_CRE), I want to hide the following UI elements:
GenericClaim.fragment.xml - Button id="costAssignmentButton"
I have added the extension project for TRV_TE_CRE and tried as below:
In component.js I added the following statement to hide
customizing:
{
"sap.ui.viewModifications": {
"mytravelandexpense.view.GenericClaim": {
"costAssignmentButton": {
"visible": false
},
},
},
Result: not working
Extended the GenericClaim.controller.js:
I added the below code in hookmethod
this.byFragmentId("costAssignmentButton").setVisible(false);
Result : whole claim page is not loading
By using access key I have commented the UI code in GenericClaim.fragment.xml
Result : not getting hide
Instead of the fragment ID, you can access the element ID from the view. Add this method in your view controller.
onAfterRendering : function(){
var buttonToHide = this.getView().byId("costAssignmentButton");
buttonToHide.setVisible(false);
},
we have the problem that a transition from the SAP Fiori Launchpad into our application sets the focus on the SearchField of the Master view.
It's a problem, because on mobile devices it triggers the activation of the keyboard which blocks the list view entries.
Any idea how to prevent that behaviour?
Directly entering the application is not creating this problem.
It's also happening in another Master/Detail application we created.
Across Android and iOS devices, replicated on Safari, Chrome, and Firefox.
Kind regards,
Michael
A bit late to the party but we had the same problem. Using onAfterRendering does work only once because that lifecycle hook gets only called once. To solve the issue do the following:
onInit: function () {
// onAfterShow hook gets called every time the view is shown
this.getView().addEventDelegate({onAfterShow: this._afterShow}, this);
},
_afterShow: function () {
jQuery.sap.delayedCall(0, this, function () {
jQuery('input').blur();
});
}
Hope that helps.
This is a workaround (the easiest solution I could Find as of now)
since I couldn't reproduce your issue :(
onDataLoaded() or in onAfterRedering() methods
//basically set the focus on something like this.. OR just create any SAPUI5 element and setVisible(false) and set the focus()
this.getList().focus();
UPDATE: Catch hold of search in getHeaderFooterOptions()
getHeaderFooterOptions: function () {
var _this = this;
var objHdrFtr = {
//sI18NMasterTitle: "YOUR_TITLE",
onRefresh: function (searchField, fnRefreshCompleted) {
_this._searchField = searchField;
}
};
return objHdrFtr;
}
then
onAfterRendering(){
if(this._searchField){
this._searchField.onAfterRendering = function() {
jQuery(this.getDomRef()).focusout()
};
}
}
Let me know if this works or not!
I will delete the answer.
Is there any good solutions when editing a form to save the model only if the user clicked on the save button and retrieve the old datas if the user canceled the action ?
I've seen some solutions like duplicating the object that is data-binded with each form fields and set the the initial object with the duplicated one when it is saved.
If you could give answers without using ember data could be great.
I understand you would prefer a solution that doesn't use ember-data, but I would argue that using ember-data is best practices. Here is a solution using ember-data because I imagine a lot of people may come across this question...
If you set up your route as follows, it will do exactly that.
App.CommentEditRoute = Em.Route.extend({
model: function(params) {
return this.store.find('comment', params.comment_id);
},
actions: {
willTransition: function(transition) {
var model = this.get('controller.content');
if (model.get('isDirty')) {
model.rollback();
}
}
},
});
If you call this.get('content').save() in the controller (because the user clicked the save button) it will persist the changes through the adapter and isDirty will be set to false. Thus, the model will not rollback. Otherwise, if you did not call this.get('content').save() in the controller, the isDirty property will be true and the unsaved changes will be discarded. See the DS.Model docs for more info.
willTransition is an event automatically called when the route is about to change - you don't have to call it directly.
Your controller might look like this:
App.CommentEditController = Em.ObjectController.extend({
save: function() {
var _this = this;
_this.get('content').save().then(function() {
// Success
_this.transitionToRoute('comments');
}, function() {
// Failure
Em.assert('Uh oh!');
});
},
cancel: function() {
this.transitionToRoute('comments');
},
});
Also, be sure to utilize the default HTML form submission using a proper HTML button or input for submission so you can capture the submission event in your view as follows:
App.CommentEditView = Em.View.extend({
submit: function() {
this.get('controller').save();
},
});
I am on my way building a Fiori like app using SAPUI5. I have successfully built the Master page, and on item click, I pass the context and navigate to Detail page.
The context path from Master page is something like /SUPPLIER("NAME"). The function in App.controoler.js is as follows:
handleListItemPress: function(evt) {
var context = evt.getSource().getBindingContext();
this.myNavContainer.to("Detail", context);
// ...
},
But I would like to know how I can access this context in the Detail page. I need this because I need to use $expand to build the URL and bind the items to a table.
There is an example in the UI5 Documentation on how to deal with this problem using an EventDelegate for the onBeforeShow function which is called by the framework automatically. I adapted it to your use case:
this.myNavContainer.to("Detail", context); // trigger navigation and hand over a data object
// and where the detail page is implemented:
myDetailPage.addEventDelegate({
onBeforeShow: function(evt) {
var context = evt.data.context;
}
});
The evt.data object contains all data you put in to(<pageId>, <data>). You could log it to the console to see the structure of the evt object.
Please refer the "shopping cart" example in SAP UI5 Demo Kit.
https://sapui5.hana.ondemand.com/sdk/test-resources/sap/m/demokit/cart/index.html?responderOn=true
Generally, in 'Component.js', the routes shall be configured for the different views.
And in the views, the route has to be listened to. Please see below.
In Component.js:
routes: [
{ pattern: "cart",
name: "cart",
view: "Cart",
targetAggregation: "masterPages"
}
]
And in Cart.controller.js, the route has to be listened. In this example, cart is a detail
onInit : function () {
this._router = sap.ui.core.UIComponent.getRouterFor(this);
this._router.attachRoutePatternMatched(this._routePatternMatched, this);
},
_routePatternMatched : function(oEvent) {
if (oEvent.getParameter("name") === "cart") {
//set selection of list back
var oEntryList = this.getView().byId("entryList");
oEntryList.removeSelections();
}
}
Hope this helps.