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

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

Related

CanĀ“t to bind or show data from ModelData.read to form in 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.

Deselect Radiobuttons when leaving the view via cancel button

I have a table(sap.m.table) with radiobutton control in the first column.
The table shows different "prices" from which the user should be able to choose only one. My problem is, when i use the cancel button it should delete all selections made (in dropdowns, datefilter, etc.). It works for every control except radiobutton.
<ColumnListItem> <cells>
<RadioButton id="radiobutton" groupName="tablebuttons" select="onSelect"/>.....
When i leave the view with the cancel button and then open it again in the same session, the previous selected radiobutton is still selected.
I cant find any method to set it to unselected. When i use this.getView().byId("radiobutton").getSelected()
it always gives back "false".
Is it because there is one button for each table row and i only select (the first?) one? If so, how can i search all button for the selected one and deselect it?
You must have added id="radiobutton" to the template list item which is used for aggregation binding. That is why calling byId("radiobutton") does not return any rendered radio button but the template instance. If you check the IDs of the radio buttons from the HTML document, you'll notice that they all contain the generated prefix __clone0, __clone1, etc.
I can't find any method to set it to unselected.
To deselect a radio button, use:
In case of RadioButton: .setSelected(false)
In case of RadioButtonGroup: .setSelectedIndex(-1)
But you might not even need any sap.m.RadioButton to add manually to the table. Since sap.m.Table extends from sap.m.ListBase, it can have a radio button in each list item via mode="SingleSelectLeft". Here is a demo:
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/ui/model/json/JSONModel"
], JSONModel => sap.ui.xmlview({
async: true,
viewContent: `<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
controllerName="MyController"
>
<Table
mode="SingleSelectLeft"
selectionChange=".onSelectionChange"
includeItemInSelection="true"
items="{prices>/}">
<columns>
<Column>
<Text text="Price"/>
</Column>
<Column>
<Text text="Foo"/>
</Column>
</columns>
<items>
<ColumnListItem selected="{prices>selected}" >
<ObjectNumber number="{prices>price}" />
<Text text="bar" />
</ColumnListItem>
</items>
</Table>
<Button
class="sapUiTinyMargin"
text="Deselect"
type="Emphasized"
press=".onResetPress"
/>
</mvc:View>`,
controller: sap.ui.controller("MyController", {
onInit: function() {
const model = new JSONModel(this.createModelData());
this.getView().setModel(model, "prices");
},
onResetPress: function() {
const model = this.getView().getModel("prices");
model.setProperty("/", this.createModelData());
},
createModelData: () => [{
price: 111.01,
}, {
price: 222.0245,
}, {
price: 333,
}],
}),
}).loaded().then(view => view.placeAt("content"))));
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-preload="async"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatVersion="edge"
data-sap-ui-xx-waitForTheme="true"
></script><body id="content" class="sapUiBody sapUiSizeCompact"></body>
IMO, you should use a model to set/reset values and not called the setter function of control. here is an example of using MVC
http://jsbin.com/zijajas/edit?html,js,output
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>MVC</title>
<script id="sap-ui-bootstrap" type="text/javascript"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m,sap.ui.table"
data-sap-ui-xx-bindingSyntax="complex">
</script>
<script id="oView" type="sapui5/xmlview">
<mvc:View height="100%" controllerName="myView.Template"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns:table="sap.ui.table">
<table:Table id="Table1" rows="{/}"
selectionMode="None">
<table:title>
<Button icon="sap-icon://reset" press="reset" />
</table:title>
<table:columns>
<table:Column>
<Label text="Employee name"/>
<table:template>
<Text text="{name}" ></Text>
</table:template>
</table:Column>
<table:Column>
<Label text="Company"/>
<table:template>
<Text text="{company}"></Text>
</table:template>
</table:Column>
<table:Column>
<Label text="Radio"/>
<table:template>
<RadioButtonGroup selectedIndex="{radio}">
<RadioButton text="no" />
<RadioButton text="yes" />
</RadioButtonGroup>
</table:template>
</table:Column>
<table:Column>
<Label text="Bonus"/>
<table:template>
<Input value="{bonus}" />
</table:template>
</table:Column>
</table:columns>
</table:Table>
</mvc:View>
</script>
</head>
<body class="sapUiBody sapUiSizeCompact" role="application">
<div id="content"></div>
</body>
</html>
controller
sap.ui.define([
'jquery.sap.global',
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel'
], function(jQuery, Controller, JSONModel) {
"use strict";
var oController = Controller.extend("myView.Template", {
onInit: function(oEvent) {
this.getView().setModel(new JSONModel([{
name : "John",
company: "apple inc",
radio: 0,
bonus: "0"
}, {
name : "Mary",
company: "abc inc",
radio: 0,
bonus: "0"
},
]));
},
reset: function() {
var oModel = this.getView().getModel();
oModel.getProperty('/').forEach(function(item) {
item.radio = 0;
item.bonus = 0;
});
oModel.refresh();
}
});
return oController;
});
var oView = sap.ui.xmlview({
viewContent: jQuery('#oView').html()
});
oView.placeAt('content');

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?

How to push the data in XML view into the newly created JSON model?

How to push the data in XML view into the newly created JSON model? I have created the comboBox and retrieved the data from JSON model and also created the text area when I select the item in combo box and insert data into the text area and submit a button both the data should be pushed to newly created JSON model in sapweb ide ui5
page.view.xml:
<mvc:View height="100%" controllerName="pro.controller.Page" xmlns:core="sap.ui.core" xmlns:l="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<Page title="{i18n>title}">
<content>
<l:VerticalLayout>
<ComboBox items="{ path: '/ProductCollection', sorter: { path: 'Name' } }">
<core:Item text="{Name}" /> </ComboBox>
<TextArea value="" rows="8" />
<Button type="Accept" text="Submit" press="onPress" /> </l:VerticalLayout>
</content>
</Page>
</mvc:View>
page.controller.js
sap.ui.define([
'jquery.sap.global',
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel'
], function(jQuery, Controller, JSONModel) {
"use strict";
var PageController = Controller.extend("pro.controller.Page", {
onInit: function() {
// set explored app's demo model on this sample
var oModel = new JSONModel(jQuery.sap.getModulePath("pro", "/model/model.json"));
this.getView().setModel(oModel);
}
});
return PageController;
});
add a 'key' attribute to the combobox item. Also give the combobox and teaxarea some IDs.
<ComboBox id="selectBox" items="{ path: '/ProductCollection', sorter: { path: 'Name' } }">
<core:Item key="{Naame}" text="{Name}" /> </ComboBox>
<TextArea id="textArea" value="" rows="8" />
On click of submit, get the selected values from the combobox and text area and push them into the model. I assume that you wanted to push this new data to the existing model and also your existing model is an array of objects.
sap.ui.define([
'jquery.sap.global',
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel'
],function(jQuery, Controller, JSONModel) {
"use strict";
var PageController = Controller.extend("pro.controller.Page", {
onInit: function() {
var oModel = new JSONModel(jQuery.sap.getModulePath("pro", "/model/model.json"));
this.getView().setModel(oModel);
},
onPress: function() {
//get the value of the selected item in the combobox
var selectedVal = this.getView().byId("selectBox").getSelectedKey();
//get the textarea value
var textAreaVal = this.getView().byId("textArea").getValue();
this.getView().getModel().oData.push({
key: selectedVal,
value: textAreaVal
});
}
});
return PageController;
});

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 :)