I tried to set up UI5 development on my local machine follow this turoial. The general setup seems to be fine, but when I add a button and want to let it show a MessageToast or a MessageBox (since I've read that MessageToast is deprecated) it does not work. The Button is showed, but when I click on it I get the following issues:
In Edge Developer Tools: "MessageToast is not defined" (same with MessageBox)
In Console: Error: connect ECONNREFUSED 127.0.0.1:80 at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1187:16)
Here is my coding:
View:
<mvc:View controllerName="testproject.controller.Test123"
xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
xmlns="sap.m">
<Page id="page" title="{i18n>title}">
<content>
<Button id="test" text="Press Button" press="onClick"/>
</content>
</Page>
</mvc:View>
Controller:
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/MessageToast",
"sap/m/MessageBox"
],
/**
* #param {typeof sap.ui.core.mvc.Controller} Controller
*/
function (Controller) {
"use strict";
return Controller.extend("testproject.controller.Test123", {
onInit: function () {
},
onClick: function() {
//MessageToast.show("Test");
MessageBox.information("Test2");
}
});
});
I tried this via VS-Code and since I could not be sure if my setup is wrong I used the trial instance of the BAS. So if you want to reproduce it, just generate a freestyle UI5 project via BAS (or VS-Code) and then basically just add the button and the code of the controller. I've done nothing more.
I am running on UI5 version 1.48.0, have chosen no data source (would have added it manually later, since I just wanted to test first) and thats it. maybe you can tell me what I am missing (I programmed UI5 in the past and this was basically also more or less my hello world, but I can't get my head around what is wrong this time)
You import 3 dependencies here
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/MessageToast",
"sap/m/MessageBox"
],
but only 1 of them (the first) will be accessible because you didn't add them to the method signature here
function (Controller) {
So just add the other dependencies to your signature
function (Controller, MessageToast, MessageBox) {
Related
I am building a view with hardcoded data. which comes from home screen to the next view which is supposed to be a split view screen.
I am using FlexibleColumnLayout and inside of it begin and end layout to call views from my view folder. I have been following this tutorial. and even then my split view is not expanding on click.
My aggregation looks like this (I am not sure if it is correct):
App -> (View1, FCLView)
FCLView -> (MasterVIew, DetailView)
FCLView:
<mvc:View displayBlock="true" height="100%" xmlns="sap.f" xmlns:mvc="sap.ui.core.mvc">
<FlexibleColumnLayout id="flexibleColumnLayout" backgroundDesign="Solid">
<beginColumnPages>
<mvc:XMLView id="beginView" viewName="Ui5.Ui.view.MasterView"/>
</beginColumnPages>
<midColumnPages>
<mvc:XMLView id="detailView" viewName="Ui5.Ui.view.DetailView"/>
</midColumnPages>
</FlexibleColumnLayout>
</mvc:View>
component.js
...
getHelper: function () {
var oFCL = this.getRootControl().byId('flexibleColumnLayout'),
oSettings = {
defaultTwoColumnLayoutType: sap.f.LayoutType.TwoColumnsMidExpanded,
initialColumnsCount: 2
};
return FlexibleColumnLayoutSemanticHelper.getInstanceFor(oFCL, oSettings);
}
MasterViewController
...
onListItemPress: function (oEvent) {
MessageToast.show("here");
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
var oFCL = this.oView.getParent().getParent();
oFCL.setLayout(fioriLibrary.LayoutType.TwoColumnsMidExpanded);
}
I am following this tutorial
The scenario is, I have my first fullscreen view (View1) in which there's a button and it will navigate to second view which is a split view. (table and on clicking a row, the detail view will expand).
I am new to SAP, any kind of help would be appreciated.
It is difficult to debug your code excerpts, because there are several other things that can go wrong. (e.g. did you configure the use the sap.f.router instead of the sap.m.router in the manifest?)
The easiest way to start with a FlexibleColumnLayout is to begin with the UI5 MasterDetail-Template
This can be downloaded from Github or easily created in the WebIDE with a few clicks (new Project from template -> select Master Detail Application)
You can read more about the Template in the Demokit
I am using a custom control for a popover like this:
sap.ui.define([
"sap/m/Popover"
], function(Popover) {
"use strict";
return Popover.extend("name of controle", {
init: function() {
Popover.prototype.init.apply(this, arguments);
this.oPopup.setAutoClose(false);
},
renderer : "sap.m.PopoverRenderer"
});
});
And I am using this popover custom control like this:
<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:path="path to custom popover"
>
<path:CustomPopover
placement="Left"
contentHeight="80%"
contentWidth="25%"
>
<path:content>
<!-- xmlview that has search field in it -->
</path:conent>
</path:CustomPopover>
</core:FragmentDefinition>
Now, if I use this fragment to create Popover, then the select event keeps on emitting for that search field.
2017-02-15 09:53:47.456659 Event fired: 'select' on Element sap.m.SearchField#__field0 - sap.ui.core.UIArea
This popover works fine in chrome even after continuous emission of an event but in Internet Explorer, it keeps on rerendering, so not able to use it. How to fix this?
I'm trying to create a launchpad for a set of applications that we use here. One of my problems is that I need to add different tiles in a tile container (slide,custom,standard, etc) and what I think that may be a solution is use XML templating to do that. What I want to achieve is something like that:
<TileContainer id="tileList"
allowAdd="true"
tileDelete="onDelete"
tiles="{path:'Atalhos>/' ,sorter:{path:'Atalhos>TileText',group:false}}">
<template:if test="{path:'Atalhos>TileCode', operator:'EQ',value1:'teste1'}">
<template:then>
<core:Fragment fragmentName="pelissari.soficom.launchpad.view.StandardTile" type="XML"/>
</template:then>
<template:else>
<core:Fragment fragmentName="pelissari.soficom.launchpad.view.StandardTile" type="XML"/>
</template:else>
</template:if>
</TileContainer>
but the problem is that I'm having this error when I try to do that.
UIComponent-dbg.js:52 Uncaught Error: failed to load
'http://schemas/sap/com/sapui5/extension/sap/ui/core/template/1/if.js'
from
resources/http://schemas/sap/com/sapui5/extension/sap/ui/core/template/1/if.js:
404 - Not found
I know that I need to start the preprocessor to use preprocessing instructions but all the examples that I found makes me more confuse that I was before.
My project is based on the sapui5 tutorial "WalkThrough where I have a component that starts an app view configured in the manifest and this view is navigate to the launchpad view by routing configuration again in the mainfest. all the examples create a view in the component CreateComponent function or in some controller function that loads other view. I just need to start the preprocessor for the list of tiles that I load from the entity set "/TileSet".
I found another way to do what I want. Now I'm using factory function to create the tiles as I need.
tileFactory: function(sId, oContext) {
var atalho = oContext.getProperty(oContext.sPath)
var oUIControl = null;
if (atalho.TileCode == 'teste2') {
oUIControl = new sap.m.StandardTile(sId, {
title: atalho.TileText
});
oUIControl.addStyleClass('tileSize3');
} else {
oUIControl = new sap.m.StandardTile(sId, {
title: atalho.TileText
});
oUIControl.addStyleClass('tileSize1');
}
oUIControl.attachPress(this.onPress, this);
oUIControl.addStyleClass('tile');
return oUIControl;
}
<Page id="tileGroup" showHeader="true"
content="{path:'Atalhos>/' ,sorter:{path:'Atalhos>TileOrder',group:false},factory:'.tileFactory'}">
I'm a beginner to OpenUI5 and have written a menu like below:
view:
<NavigationList id="navigationList" width="12rem">
<NavigationListItem text="People" icon="sap-icon://card" select="goToRoute"></NavigationListItem>
</NavigationList>
controller:
goToRoute: function() {
this.getRouter().navTo("peoplelist");
}
That works, but it's bad, as I have a couple of menu items and JS events for each of them.
I wish I had something like this below, without any JS behind, but couldn't find anything in documentation and examples.
view:
<NavigationList id="navigationList" width="12rem">
<NavigationListItem text="People" icon="sap-icon://card" linkToRoute="peoplelist"></NavigationListItem>
</NavigationList>
Anyone knows?
You can build a generic event handler which derives the target route from the corresponding item. To achieve this you can make use of custom data which you can add to controls in a declarative way. For this add the following line to your opening View tag:
xmlns:custom="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
Adopt your navigation list:
<NavigationList id="navigationList" width="12rem">
<NavigationListItem text="People" icon="sap-icon://card" select="onItemSelect" custom:route="peopleList"/>
</NavigationList>
And your controller:
onItemSelect : function(event) {
var item = event.getSource();
var route = item.data("route");
this.getRouter().navTo(route);
}
Here you find further details.
Given two XML Views:
<mvc:View
controllerName="my.namespace.controller.First"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Button press=".onBtnPress" />
</mvc:View>
<mvc:View
controllerName="my.namespace.controller.Second"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Button press=".onBtnPress" />
</mvc:View>
As expected, the press event is handled by First.controller.js or Second.controller.js.
Instead of duplicating the event handler code or implementing handlers in each Controller to chain/hand off the work, I want to declare a shared event handler.
According to docs this should be possible, using a naming convention for the handler:
Names starting with a dot ('.') are always assumed to represent a method in the controller.
Names containing a dot at a later position are assumed to represent global functions and are resolved by calling jQuery.sap.getObject with the full name.
So I change the handler and declare a shared object, like so:
First.view.xml:
<Button press="my.namespace.Shared.onBtnPress" />
Shared.js:
jQuery.sap.declare("my.namespace.Shared");
my.namespace.Shared = (function() {
var onBtnPress = function() {
console.log("button pressed");
};
return { onBtnPress : onBtnPress };
}());
Warning logged (debug sources) during view initialisation:
sap.ui.core.mvc.XMLView#__xmlview1: event handler function "my.namespace.Shared.onBtnPress" is not a function or does not exist in the controller. -
Calling jQuery.sap.getObject("my.namespace.Shared") yields undefined
Same issue when using sap.ui.define to make the object known.
Since UI5 1.69, it has become easier to share JS modules in XML view and fragment.doc
Here is an example: https://embed.plnkr.co/5G80I5HWObCuM5cG
<mvc:View controllerName="..."
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:core="sap.ui.core"
core:require="{ onButtonPress: 'my/shared/onButtonPress' }">
<Button text="Press" press="onButtonPress" />
</mvc:View>
As we can see, each button displays a different message depending on the view, even though the handler itself isn't included in the controller definition.
The this context is still the controller instance as documented in the topic Handling Events in XML Views:
As long as no event handler parameters are specified and regardless of where the function was looked up, it will be executed with the controller as the context object (this).
Your shard object looks weird
Try something like this:
sap.ui.define([], function() {
return sap.ui.base.Object.extend("my.namespace.Shared", function() {
onBtnPress : function() {
console.log("button pressed");
}
};
});
Also remember to put the object in the right directory.
I was able to copy-paste your sap.ui.define and verified it was created correctly jQuery.sap.getObject.
Make sure that your sap.ui.define has been called prior to your view being rendered.
You can set a breakpoint in the XMLTemplateProcessor where the event callbacks are handled for XML views for further debugging/timing issues.
If you look in the _resolveEventHandler function it should take you here which will perform the jQuery.sap.getObject.