I am using an xml view (Form.view.xml) where i have a submit button:
<mvc:View controllerName="articleIntroductionmdg.article.controller.Form" xmlns:mvc="sap.ui.core.mvc" xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form" displayBlock="true" xmlns:core="sap.ui.core" xmlns:u="sap.ui.unified" xmlns="sap.m">
<Page busy="{local>/busy}">
<headerContent>
<Text text="{path: 'local>/vendorName', formatter: '.formatter.getUser'}"/>
<Button icon="sap-icon://customer"/>
</headerContent>
<Button type="Emphasized" text="{i18n>SubmitBtn}" press=".onSubmit($event, 'true')"></Button>
The event handler 'onSubmit' is defined in the controller:
onSubmit: function (oStatus) {
if ((oStatus) !== "false") {
this._validateForm();
}
}
I am calling the same 'onSubmit' from another 'common.js' file under the controller folder and it works:
onUploadCSV: function () {
this.onSubmit("false");
}
But when i try to fire the press the button from the Form.view.xml,
The even it self doesn't fire.
I checked the sapui5 document and its written that you can pass the parameter to the press event like:
<Button text="click" tap=".callFunction($event, 'mycustomString')" />
But im my case the event from the view doesn#t fire and i get no message in the console.
Passing parameters within the view to the controller function is firstly supported as of version 1.56 (maybe you are using an older one): https://sapui5.hana.ondemand.com/#/topic/53b4b5ec2c83408a8da2cb6b9154c246
Related
I am working with a SAPUI5 version 1.38 and use in an application the control sap.uxap.ObjectPageSection within sap.uxap.ObjectPageLayout. At a certain section, when you click on it, an event should happen.
I haven't found a solution for this yet unfortunately. See:
I have already tried with attachBrowserEvent and addEventDelegate. But unfortunately, this does not work for this control.
Does anyone have any other ideas how to solve this problem? A workaround?
I would be very grateful for any help.
View1.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict";
return Controller.extend("test123.test123.controller.View1", {
onInit: function () {
},
onAfterRendering: function () {
var showMessage = function () {
sap.m.MessageToast.show("text");
return false;
};
this.byId("section2").attachBrowserEvent("click", showMessage);
this.byId("section2").addEventDelegate({
onclick: function () {
sap.m.MessageToast.show("text");
}
});
}
});
});
View1.view.xml
<mvc:View controllerName="test123.test123.controller.View1" xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml"
displayBlock="true" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:uxap="sap.uxap">
<App id="idAppControl">
<pages>
<Page title="{i18n>title}">
<content>
<uxap:ObjectPageLayout id="ObjectPageLayoutId"
useIconTabBar="true"
alwaysShowContentHeader="true">
<!-- SECTION 1 -->
<uxap:sections>
<uxap:ObjectPageSection titleUppercase="false" id="section1" title="Section 1">
<uxap:subSections>
<uxap:ObjectPageSubSection>
<uxap:blocks>
<Label text="Content 1" />
</uxap:blocks>
</uxap:ObjectPageSubSection>
</uxap:subSections>
</uxap:ObjectPageSection>
</uxap:sections>
<!-- SECTION 2 -->
<uxap:sections >
<uxap:ObjectPageSection titleUppercase="false" id="section2" title="Section 2">
<uxap:subSections>
<uxap:ObjectPageSubSection>
<uxap:blocks>
<Label text="Content 2" />
</uxap:blocks>
</uxap:ObjectPageSubSection>
</uxap:subSections>
</uxap:ObjectPageSection>
</uxap:sections>
</uxap:ObjectPageLayout>
</content>
</Page>
</pages>
</App>
</mvc:View>
Check out the documentation of 1.38. There is an event called tabSelect. The event is comparable to the event navigate in 1.40.[1]
You can use it as long as the property useIconTabBar equals true:
<uxap:ObjectPageLayout tabSelect=".onTabSelect" useIconTabBar="true">
[1] ⚠️ BREAKING CHANGE: with commit eb75945 (merged with the 1.40 release), the event tabSelect gets removed in favor of navigate! If the application runs with 1.40 or higher in the future, tabSelect should be renamed to navigate also in your code. But please review the differences between the two events beforehand.
I want to bind text from my JSON-Model to the text of a button.
My controller initializes my model:
onInit: function () {
var oModel = new JSONModel({
"test": "Hello"
});
this.getView().setModel(oModel, "jsonFile");
}
My View looks like this:
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" controllerName="sap.ui.demo.nav.controller.Home">
<Page id="_IDEGen_page0" title="{i18n>homePageTitle}" class="sapUiResponsiveContentPadding">
<content>
<Button id="_IDEGen_button0" text="Start new Game" press="onPressStartGame"/>
<Button text="{jsonFile>test}"/>
</content>
</Page>
</mvc:View>
But when I run my application, the ui5-inspector show my that the binding is active, but the text is not shown.
I have no idea, what the problem could be in this case. Who can help me? What could be the problem, that the text is not shown?
You forgot the slash in your binding
<Button text="{jsonFile>/test}"/>
Hi I'm trying to get a function defined in my controller to execute when I press on a specific area of a picture. I'm using an html map to define the areas of my picture (code below)
<mvc:View id="Main" controllerName="Demo.picture.controller.Main" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
displayBlock="true" xmlns="sap.m" xmlns:core="sap.ui.core">
<App id="idAppControl">
<pages>
<Page title="{i18n>title}">
<content>
<Image src = "Some image source" alt="Image" useMap="Map"/>
</content>
</Page>
</pages>
</App>
<html:map name="Map" id="Map">
<html:area id= "area_1" shape="rect" coords= "0,0,240,215" alt="Chart" onclick="???"/>
<html:area id = "area_2" shape="rect" coords="240,0,480,215" alt="Start" onclick="???"/>
</html:map> </mvc:View>
Not sure if using onclick is the right way of doing this.
Controller code:
sap.ui.define([
"sap/ui/core/mvc/Controller"], function (Controller) {
"use strict";
return Controller.extend("Demo.picture.controller.Main", {
SomeMethodFoo: function () {
"method to be executed when area_1 is pressed"
},
SomeMethodGoo: function () {
"method to be executed when area_2 is pressed"
}
});});
Is it possible to attach an eventHandler for a onclick event to these areas? Or is there some other way to do this?
I guess that it would be something like this:
onclick="sap.ui.getCore().byId('__xmlview0').getController().SomeMethodFoo()"
but your need to manage yourself to know your view ID, which won't be always '__xmlview0'
I've created an app with SAPUI5 that makes use of a Flexible Column Layout.
I'm trying to navigate between pages, but I'm having difficulty.
Here is the main xml view:
<mvc:View id="Main" controllerName="SAP.demo.controller.Main" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
displayBlock="true" xmlns="sap.f" xmlns:core="sap.ui.core" xmlns:m="sap.m">
<m:App id="idAppControl">
<m:pages>
<m:Page title="{i18n>title}">
<m:content>
<FlexibleColumnLayout id="fcl" initialMidColumnPage="start" layout="TwoColumnsBeginExpanded">
<beginColumnPages>
<m:Page title = "Master">
<m:content>
<Button text="Chart Button" press="displayChart"/>
</m:content>
</m:Page>
</beginColumnPages>
<midColumnPages>
<m:Page id="start" title = "Detail">
<m:content>
<core:Fragment fragmentName="SAP.demo.view.Start" type="XML"/>
</m:content>
</m:Page>
<m:Page id="charts" title="Charts">
<m:content>
<core:Fragment fragmentName="SAP.demo.view.Charts" type="XML"/>
</m:content>
</m:Page>
</midColumnPages>
</FlexibleColumnLayout>
</m:content>
</m:Page>
</m:pages>
</m:App>
I want to navigate from the start page to the charts page. The controller is as follows:
sap.ui.define([
"sap/ui/core/mvc/Controller"], function (Controller) {
"use strict";
return Controller.extend("SAP.demo.controller.Main", {
displayChart:function(oEvent){
this.byId("fcl").toMidColumnPage("charts");
}
});});
Can someone please advise as to what I'm doing wrong, because it stays on the start page even after I press the button.
This is because the real ID of the view is not "charts" but "__xmlview0--charts".
Be careful with the ID always and use the API method byId('theIDHere').
In your case use one of the following options:
displayChart:function(oEvent){
this.getView().byId("fcl").toMidColumnPage(this.getView().byId("charts"));
}
Or
displayChart:function(oEvent){
this.getView().byId("fcl").toMidColumnPage(this.getView().byId("charts").getId());
}
And also add the correct XML namespace to your button
<m:Button text="Chart Button" press="displayChart"/>
Managed to fix it with the following code:
displayChart: function () {
this.byId("fcl").toMidColumnPage(this.createId("charts"));
},
I need to retrieve id of a control (VBox which has id="multipleChoiceQuestion") and need to hide it on button press.
How to do this?
App.view.xml
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form" xmlns:core="sap.ui.core"
displayBlock="true" controllerName="opensap.onlinequestionnaire.controller.App" height="100%">
<VBox id="multipleChoiceHolder">
<HBox width="700px" backgroundDesign="Solid" alignItems="Center" id="mCHorHolder1">
<CheckBox id="checkBox1"/><Label text="{questionnaire>/data/0/answers/0}" id="multipleChoice1"/>
</HBox>
</VBox>
App.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller){
Controller.extend("opensap.onlinequestionnaire.controller.App", {
goToNext:function() {
alert("Next Question");
alert(this.byId('multipleChoiceQuestion'));
}
});
});
In my goToNext:function() I would like to retrieve the id of the VBox and would like to hide it.
I tried alerting this.byId() but it returns undefined.
Get the VBox:
// id as stated in the description
oVBox = this.getView().byId("multipleChoiceQuestion");
// or
// id as stated in the view in the code sample
oVBox = this.getView().byId("multipleChoiceHolder");
Set visibility:
oVBox.setVisible(false);
By the way, the id's of your post description and the view in your post's code sample are not identical. But I'm sure you're aware of this minor mix-up which has nothing to do with your question of a general approach to retrieve and hide a control. Just wanted to mention it to be on the safe side
The ID of your VBox is "multipleChoiceHolder" and not "multipleChoiceQuestion". So, shouldn't it be this.byId('multipleChoiceHolder') instead of this.byId('multipleChoiceQuestion')?