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

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?

Related

Table grouping resets selected values when adding new item

Here we have a very basic table with an Add button and grouping activated. When I select values for the existing items and then press the button to add a new row, my selected values are getting reset, but without grouping it works fine. Am I doing something wrong or is this a bug?
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/ui/core/mvc/XMLView",
"sap/ui/model/json/JSONModel" // sample model. Can be also an ODataModel.
], async (XMLView, JSONModel) => {
"use strict";
const control = await XMLView.create({
definition: `<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc">
<Table items="{
path: '/tableItems',
sorter: { path : 'group', group: true }
}">
<headerToolbar>
<OverflowToolbar>
<Title text="Test Table" />
<ToolbarSpacer/>
<Button id="addButton" text="Add" type="Emphasized" />
</OverflowToolbar>
</headerToolbar>
<columns>
<Column width="20rem">
<Label text="col0"/>
</Column>
<Column width="20rem">
<Label text="col1"/>
</Column>
</columns>
<ColumnListItem vAlign="Middle">
<Text text="{text}" />
<Select forceSelection="false" width="100%" xmlns:core="sap.ui.core">
<core:Item text="test1" key="test1" />
<core:Item text="test2" key="test2" />
<core:Item text="test3" key="test3" />
<core:Item text="test4" key="test4" />
</Select>
</ColumnListItem>
</Table>
</mvc:View>`,
afterInit: function() {
this.byId("addButton").attachPress(onPressAdd, this);
function onPressAdd() {
const oModel = this.getModel();
const aItems = oModel.getProperty("/tableItems");
const newItems = aItems.concat({
group: "3",
text: "3-1",
key: "3-1",
});
oModel.setProperty("/tableItems", newItems);
}
},
models: new JSONModel({
number: 0,
tableItems: [
{
group: "1",
text: "1-1",
key: "1-1",
},
{
group: "1",
text: "1-2",
key: "1-2",
},
{
group: "2",
text: "2-1",
key: "2-1",
},
{
group: "2",
text: "2-2",
key: "2-2",
},
],
}),
});
control.placeAt("content");
}));
<script id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/1.82.2/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core,sap.m"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-compatversion="edge"
data-sap-ui-async="true"
data-sap-ui-excludejquerycompat="true"
data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>
Set the growing="true" to the sap.m.Table.
This enables GrowingEnablement internally which prevents rerendering the entire ListBase (Table) when the target gets invalidated. Only the necessary item will be then appended to the table.
Generally, in order to optimize the rendering behavior, it's always a good practice to..:
Enable the growing property if the table / list is editable, shrinkable, or expandable.
Add key: <propertyName with unique values> to the ListBinding info object to benefit from the Extended Change Detection if the model is a client-side model such as JSONModel. With an ODataModel, the key is automatically added by the framework.
<Table xmlns="sap.m"
growing="true"
items="{
path: 'myModel>/myCollection',
key: <propertyName>, (if 'myModel' is not an ODataModel)
sorter: ...
}"
>

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

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.

SAPUI5 : JSONModel is not a constructor

I have an SAPUI5 app with 2 views. When I try navigate from the first view to the second view with an router it throws this error:
"Uncaught TypeError: JSONModel is not a constructor(…)"
The problem is I have to consume the content of the JSON to fill a table and with this error it is still empty
In a similar case/application my code runs without a problem, so I would be happy if someone can read my code if there are some errors...
Main.view.xml
<mvc:View controllerName="App.controller.Main" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
displayBlock="true" xmlns="sap.m">
<App>
<pages>
<Page>
<content>
<Table id="paramTable" items="{/callbackData}" width="auto" class="sapUiResponsiveMargin">
<columns>
<Column>
<Label text="Parameter"></Label>
</Column>
<Column width="10%">
<Label text="CurrentVal"></Label>
</Column>
<Column width="10%">
<Label text="TargetVal"></Label>
</Column>
<Column width="30%">
<Label text="Description"></Label>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<ObjectIdentifier title="{key}"></ObjectIdentifier>
</cells>
<Text text="{currentVal}"></Text>
<Text text="{operator} {targetVal}"></Text>
</ColumnListItem>
</items>
</Table>
</content>
</Page>
</pages>
</App>
Main.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"
], function(Controller , JSONModel) {
"use strict";
return Controller.extend("App.controller.Main", {
onInit : function() {
this.getView().setModel(new JSONModel({
callbackData: []
}));
},
setTableData : function() {
var here = this;
$.ajax({
url : '../../test.xsjs',
type : "GET",
success : function(data) {
here.getView().getModel().setProperty("/callbackData", data);
}
});
}
});
});
Thanks in advance!!!
var oModel = new JSONModel({
callbackData: []
});
this.getView().setModel(oModel);

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