on 11-24-2017 5:46 AM
Hi All,
I am trying to display the form validation messages below the form and on clicking a message i need to focus the corresponding field.
My view and Controller code are
view.xml
<content>
<sap.ui.layout.form:Form xmlns:sap.ui.layout.form="sap.ui.layout.form" editable="true" id="__form0">
<sap.ui.layout.form:formContainers>
<sap.ui.layout.form:FormContainer title="Details" id="__container1">
<sap.ui.layout.form:formElements>
<sap.ui.layout.form:FormElement label="Name" id="__element1">
<sap.ui.layout.form:fields>
<Input width="100%" id="name" required="true"/>
</sap.ui.layout.form:fields>
</sap.ui.layout.form:FormElement>
</sap.ui.layout.form:formElements>
</sap.ui.layout.form:FormContainer>
</sap.ui.layout.form:formContainers>
<sap.ui.layout.form:layout>
<sap.ui.layout.form:ResponsiveGridLayout id="__layout0"/>
</sap.ui.layout.form:layout>
</sap.ui.layout.form:Form>
<Button text="Submit" press="onPress" width="100px" id="button"/>
</content>
controller.js
onPress: function() {
var a = this.getView().byId("name").getValue();
if (a === "") {
var msg = new sap.m.MessageStrip("id", {
link: new sap.m.Link("linkid", {
text: "EnterName",
press: this.onClick
})
});
this.getView().byId("form").addContent(msg);
}
},
onClick: function(oEvent) {
alert("Success");
//sap.ui.getCore().byId("name").focus;--- error: focus() of undefined
}
If i use ---this.getView().byId("name").focus();
in onClick() function I am getting error: this.getView is not a function
For sap.ui.getCore().byId("name").focus(); error: Cannot read property 'focus' of undefined
Please help me with this.
Thanks,
Janani
Hello,
First, as a better practise try to display the message in-box using the "value-state" and "value state message".
Easy to implement and better UX practise. The one you are trying to send the control back to controller and populate a sepaarte control onto the page. This is resource intensive and affects performance.
The reason why you getting the error is: you are looking for this variable inside the error/success within the function. The context changes and many a times people move the the "this" variable into something called "that". Ex: var that = this;
However, you requirement is w.r.t messages and that should be fine with value-state option.
Regards,
Sharath
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Check the link: https://experience.sap.com/fiori-design-web/input-field/
Hello Janani. Could you try to modify your input and button by using sap.m library tag? and press: this.onTest()
should be onTest() with parentheses. with all of this adjustment. It will work fine. thanks.
<m:Text text="hello" width="auto" maxLines="3" />
<m:Input width="100px" id="name" required="true" />
<m:Button text="Submit" press="onPress" width="100px" id="button"/>
onPress : function() {
var a = this.getView().byId("name").getValue();
if (a === "") {
var msg = new sap.m.MessageStrip("id", {
link: new sap.m.Link("linkid", {
text: "EnterName",
press: this.onTest()
})
});
}
},
onTest : function() {
console.log("good");
this.getView().byId("name").focus();
}
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
95 | |
11 | |
11 | |
10 | |
9 | |
7 | |
6 | |
5 | |
4 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.