Can´t to bind or show data from ModelData.read to form in SapUi5 - sapui5

i have a big trouble that's freaking me out, check it out:
This is my xml for a View, program is divided in two differents Views, first of them, a table with navigation and second one is the details, involved in a form.
<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="Hello_World.Hello_World.controller.View2"
xmlns:html="http://www.w3.org/1999/xhtml" xmlns:form="sap.ui.layout.form">
<App>
<pages>
<Page title="Detalles" showHeader="true">
<Button type="Back" press="patras" tooltip="test"/>
<VBox>
</VBox>
<form:SimpleForm id="formPruebas" maxContainerCols="2" layout="ResponsiveGridLayout" labelSpanL="5" labelSpanM="4" labelSpanS="6" title="Formulario">
<Label text="CustomerID"/>
<Text text="{jsonmodel>CustomerID}"/>
<Label text="CompanyName"/>
<Text text="{CompanyName}"/>
<Label text="ContactTitle" />
<Text text="{ContactTitle}"/>
<Label text="Adress"/>
<Text text="{Adress}"/>
<Label text="City"/>
<Text text="{City}"/>
<Label text="PostalCode"/>
<Text text="{PostalCode}"/>
<Label text="Country" />
<Text text="{i18n>Country}"/>
<Button text="Aceptar" type="Accept">
<layoutData>
<FlexItemData growFactor="1" />
</layoutData>
</Button>
<Button text="Editar" width="100px">
<layoutData>
<FlexItemData growFactor="1" />
</layoutData>
</Button>
</form:SimpleForm>
</Page>
</pages>
</App>
Alright so this is my controller:
onInit: function() {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.getRoute("View2").attachMatched(this._onRouteMatched, this);
},
_onRouteMatched: function(oEvent) {
var idDevuelto = oEvent.getParameter("arguments").data;
var idCompleto = "/Customers('" + idDevuelto + "')";
//var oForm = this.getView().byId("formPruebas");
var oForm = this.getView().byId("formPruebas");
var serviceUrl = "myurl";
var oModelData = new sap.ui.model.odata.ODataModel(serviceUrl,{
JSON:true,
useBatch: false
});
oModelData.read(idCompleto, {
success: function (oData) {
sap.m.MessageToast.show(oData.CustomerID);
var oModel = new JSONModel(oData.results);
oForm.setModel(oModel.results);
},
error: function (oError) {
sap.m.MessageToast.show("No funca");
}
});
},
However the result is not showing on my view when i run the program, any idea?
PD: I'm pretty noob on sapui5

Finally i found the solution of the problem, if you check the XML code at the beginning of the question , you realize there is not path in Form element.
In mi first view i have a table with id and a PATH which i don't have in the Form so the fastest way i solve it is to put in the XML a slash, an example:
<form:SimpleForm id="formPruebas" maxContainerCols="2" layout="ResponsiveGridLayout" labelSpanL="5" labelSpanM="4" labelSpanS="6" title="Formulario">
<Label text="CustomerID"/>
<Text text="{/CustomerID}"/> // the slash i mean
With that fix, i only do oForm.setModel(oModel) so everything is connected and works
fine, i want to share this information if more people deal with the same error as i did.
Thanks all ideas.

Related

How to have multiple dialogs in a single fragment

I have been working on dialog in fragment , for a sample :
test.fragment.xml :
<core:FragmentDefinition
xmlns="sap.m"
xmlns:f="sap.ui.layout.form"
xmlns:core="sap.ui.core">
<Dialog title="P Selection" id='TestDialog1'>
<content>
<f:SimpleForm id="SimpleFormDisplay354"
minWidth="1024"
maxContainerCols="2"
editable="false"
layout="ResponsiveGridLayout"
title=""
labelSpanL="3"
labelSpanM="3"
emptySpanL="4"
emptySpanM="4"
columnsL="1"
columnsM="1">
<f:content>
<Label text="DC" />
<Select id='Test1DCId'
forceSelection="false"
items="{
path: '/P/DC',
sorter: { path: 'Name' }
}">
<core:Item key="{key}" text="{value}" />
</Select>
<Label text="Quantity" />
<Select id='Test1Quantity'
forceSelection="false"
items="{
path: '/P/Quantity',
sorter: { path: 'Name' }
}">
<core:Item key="{key}" text="{value}" />
</Select>
</f:content>
</f:SimpleForm>
</content>
<buttons>
<Button text="OK" press="onTest1OkButtonPress" />
</buttons>
<buttons>
<Button text="Cancel" press="onTest1CancelButtonPress" />
</buttons>
</Dialog>
</core:FragmentDefinition>
In test.view.xml:
The view part when I want to open a dialog is as:
<m:Select id="Gu" items="{/Gu/GList}" change="onTestPress">
<c:Item key="{key}" text="{value}" />
<m:layoutData>
<l:GridData span="L2 M2 S2"/>
</m:layoutData>
</m:Select>
In test.Controller.js:
onTestPress: function () {
this.ADD = 'Yes';
if (!this.byId("TestDialog1")) {
this._oDialog = sap.ui.xmlfragment("test", this);
this.getView().addDependent(this._oDialog);
}
this._oDialog.open();
},
here in similar way may I how can I use multiple dialogs in the same fragment ? Is this possible ?
I have tried as giving another dialog with different ID TestDialog2 ,
And in view some test button and on press , i need to open a Dialog and i tried as:
onTestButtonPress: function () {
this.ADD = 'Yes';
if (!this.byId("TestDialog2")) {
this._oDialog1 = sap.ui.xmlfragment("test1", this);
this.getView().addDependent(this._oDialog1);
}
this._oDialog1.open();
},
But this doesn't work as expected also Throws error Error: Error: adding element with duplicate id.....
I have searched Doc's and many examples but i have been stuck finding an example which shows this use case......
Any help or a sample or a guiding link is much appreciated , TIA

oData binding to Simple Form

I'm creating a read only form that will be used to display a summary of information. I need to send a parameter to the backend first before getting the information but I don't seem to see that parameter is reaching it.
It does reach the entity set but it does not show the parameter. Am I binding correctly?
This is on the controller:
onInit: function() {
var urlEnding = "1000012233";
var oFilterDist = new sap.ui.model.Filter("ID",
sap.ui.model.FilterOperator.EQ, urlEnding);
var summaryText = this.getView().byId("summaryForm");
summaryText.bindElement({
path: "/SummaryScreenSet",
filters: [oFilterDist]
});
}
This is on the View
<VBox class="sapUiSmallMargin" fitContainer="true"
height="100%" width="100%" justifyContent="End"
displayInline="true" id="leftVBox" items="{/SummaryScreenSet}">
<items>
<f:SimpleForm editable="true" layout="ResponsiveGridLayout" id="summaryForm" columnsL="1" columnsXL="1" labelSpanL="5" title="Account Summary" labelSpanM="5">
<f:content>
<Label text="Status" id="__label6" design="Bold" class="sizeText"/>
<ObjectStatus text="{CONTRACT_STATUS}" id="__status6" state="Success" class="boldText"/>
<Label text="Permit Required" id="__label10" design="Bold" class="sizeText"/>
<Text text="{PERMIT_REQD}" id="__text32" wrapping="false" class="sizeText"/>
<Label text="Bill Date | Due Date" id="__label11" design="Bold" class="sizeText"/>
<Text text="{BILL_DATE} | {DUE_DATE}" id="__text33" wrapping="false" class="sizeText"/>
<Label text="Last Estimated Date | Next MR Date" id="__label17" design="Bold" class="sizeText"/>
<Text text="{LAST_PAYMENT_DATE} | {nextMRDate}" id="__text39" wrapping="false" class="sizeText"/>
</f:content>
</f:SimpleForm>
</items>
</VBox>
Going to assume you want a single, specific entry. In that case, what you're looking for is the Entity, not the EntitySet + filter. Coincidentally, here's one I wrote yesterday that works. I've changed the paths and ID's to reflect yours:
var form = this.getView().byId('summaryForm');
form.bindElement({
path: "/SummaryScreenSet('" + urlEnding + "')",
events: {
change: function() {
//triggers on error too I think
form.setBusy(false);
},
dataRequested: function() {
form.setBusy(true);
}
}
});
In that case you don't need the VBOX either, just the form. Don't forget to implement SUMMARYSCREEN_GET_ENTITY or whatever the method is on your DPC_EXT.
Edit: might want to set editable on the form to false, it shrinks the layout to suit text instead of inputs.

how to push data into seperate json model folder in sapui5 onsubmitting button

View1.view.xml
<mvc:View controllerName="Register.controller.View1" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form" xmlns:core="sap.ui.core" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<App>
<pages>
<Page title="{i18n>title}">
<content>
<f:SimpleForm>
<f:content>
<Label text="FirstName" />
<Input value="" id="a1" width="50%" />
<Label text="LastName" />
<Input value="" id="a2" width="50%" />
<Label text="username" />
<Input value="" id="a3" width="50%" />
<Label text="Password" />
<Input value="" id="a4" width="50%" />
</f:content>
</f:SimpleForm>
<Button id="btn1" type="Accept" text="Submit" press="onPress" />
</content>
</Page>
</pages>
</App>
</mvc:View>
Controller
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"
], function(Controller, JSONModel) {
"use strict";
var sValue, data, oModel, selectedVal, textAreaVal;
return Controller.extend("Register.controller.View1", {
onPress: function() {
//get the value of the selected item in the combobox
selectedVal = this.getView().byId("a3").getValue();
//get the textarea value
textAreaVal = this.getView().byId("a4").getValue();
var oModel = new JSONModel(jQuery.sap.getModulePath("Register", "model/model1.json"));
this.getView().setModel(oModel);
oModel.data.push({ selectedVal: selectedVal, textAreaVal: textAreaVal });
}
});
});
I have created this but getting push is not a function
You are setting the data incorrectly. There is no data array inside oModel, it is an object (push is for array's)
You should set the data using the model's setData method instead:
oModel.setData({ selectedVal: selectedVal, textAreaVal: textAreaVal });
Updated answer
I understand you want to update an array inside your model. In that case, first retrieve the array from the model, then push the new object, and then finally store the updated array back into your model:
var oModel = this.getView().getModel();
var aData = oModel.getProperty("/data");
aData.push({ selectedVal: selectedVal, textAreaVal: textAreaVal });
oModel.setProperty("/data", aData);
See this working example: https://jsbin.com/kosaji/edit?html,output

creation of login page along with authentication sapui5 by storing data in json and comparing json values with user input values

View1.view.xml
<mvc:View xmlns:f="sap.ui.layout.form" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="Login.controller.View1">
<App>
<pages>
<Page title="Login">
<f:SimpleForm maxContainerCols="2" editable="true" layout="ResponsiveGridLayout" labelSpanL="4" labelSpanM="4" emptySpanL="0" emptySpanM="0" columnsL="2" columnsM="2">
<f:content>
<Input width="100%" id="__input0" placeholder="UserID" liveChange="true" />
<Input width="100%" id="__input1" type="Password" placeholder="Password" />
<Button text="Login" width="100px" id="__button0" type="Accept" press="Validation" />
</f:content>
</f:SimpleForm>
<Table items="{ path: '/Item' }" id="tableID" width="90%">
<items>
<ColumnListItem counter="0" id="__item0">
<cells>
<Text id="a1" text="{OrderID}" />
<Text text="{Quantity}" />
</cells>
</ColumnListItem>
</items>
<columns>
<Column id="__column0">
<header>
<Label text="OrderID" id="__label0" />
</header>
</Column>
<Column id="__column1">
<header>
<Label text="Quantity" id="__label1" />
</header>
</Column>
</columns>
</Table>
<content/>
</Page>
</pages>
</App>
</mvc:View>
view1.controller.js
sap.ui.define(["sap/m/MessageToast",
"sap/ui/core/mvc/Controller", 'sap/ui/model/json/JSONModel'
], function(MessageToast, Controller, JSONModel) {
"use strict";
return Controller.extend("Login.controller.View1", {
onInit: function(oEvent) {
// set explored app's demo model on this sample
var oModel = new JSONModel(jQuery.sap.getModulePath("Login", "/model/Products.json"));
sap.ui.getCore().setModel(oModel);
this.getView().byId("tableID").setModel(oModel);
// this.getView().byId("samplepie").setModel(oModel);
},
Validation: function() {
var UserID = this.getView().byId("__input0").getValue();
var Password = this.getView().byId("__input1").getValue();
if (UserID == "") {
MessageToast.show("Please Enter UserID");
return false;
} else if (Password == "") {
MessageToast.show("Please Enter Password");
return false;
} else if (UserID == sap.ui.getCore().byId("a1").getValue()) {
MessageToast.show("authenticated ");
}
}
});
});
products.json
{
"Item": [{
"OrderID": "1100M",
"Quantity": 100
}, {
"OrderID": "11001I",
"Quantity": 250
},
{
"OrderID": "11002D",
"Quantity": 400
}
]
}
I have tried this code for login along with authentication but am getting error as getValue not defined when i used to fetch JSON values from view to controller,can anyone please give a solution?

SAPUI5 NavContainer inside sap.m.Dialog Fragement

Is there a possibilty of using a NavContainer inside a sap.m.Dialog fragment. In PopOver it is possible to have it done but when trying with Dialog nothing is rendered inside the dialog .
Here is the code :
<core:FragmentDefinition xmlns:core="sap.ui.core"
xmlns:layout="sap.ui.layout" xmlns="sap.m">
<Dialog title="Customer Search" type="Message">
<NavContainer id="navCon">
<Page id="master" title="Search ">
<Label text="Customer Name"></Label>
<Input></Input>
<Label text="Payer Code"></Label>
<Input></Input>
<Label text="Customer City"></Label>
<Input></Input>
<Label text="Customer Postal Code"></Label>
<Input></Input>
<Label text="SBU" />
<layout:ResponsiveFlowLayout>
<RadioButton groupName="supplierCaused" text="Yes" />
<RadioButton groupName="supplierCaused" text="No" />
<RadioButton groupName="supplierCaused" text="No" />
</layout:ResponsiveFlowLayout>
<Label text="CBT"></Label>
<Select id="searchCBT" width="100%"></Select>
<Label text="Region" />
<layout:ResponsiveFlowLayout>
<RadioButton groupName="hisTransaction" text="Yes" />
<RadioButton groupName="hisTransaction" text="No" />
<RadioButton groupName="hisTransaction" text="No" />
</layout:ResponsiveFlowLayout>
</Page>
<!--
<Page id="detail" showNavButton="true" navButtonPress="onNavBack"
title="Product">
<Label text="Search Results" />
</Page> -->
</NavContainer>
<beginButton>
<Button text="Random" press="onDialogClose" />
</beginButton>
</Dialog>
</core:FragmentDefinition>
It will be a lot easier for me to answer you via pure javascript. Because in any way you need to attach a open handler to this dialog right? And separating the code will make this rather simple example really complicated one. So would something like that, putted in simple script tags work ?
var btn = new sap.m.Button({text:'Open Dialog', press: function(){oDialog.open();}});
var oDialog = new sap.m.Dialog({
showHeader : false,
stretch: sap.ui.Device.system.phone ? true : false,
beginButton : new sap.m.Button({
text : 'OK',
press : function() {
oDialog.close();
}
}),
contentHeight : "500px"
});
var oNavContainer = new sap.m.NavContainer();
var oPage = new sap.m.Page({
enableScrolling : true,
title : 'Test Page',
subHeader : new sap.m.Bar({
contentMiddle : new sap.m.Button({text:'SubHeader Button'})
}),
content : [ new sap.m.Button({text:'Content Button'}) ]
});
oNavContainer.addPage(oPage);
oNavContainer.setInitialPage(oPage);
oDialog.addContent(oNavContainer);
btn.placeAt('content');
</script>
You just need to have an div item with id = "content" and it should work :)