Hello i set the binding context for an oData request, and the request is called fine.
But on ui5, i get the following error:
Failed to drill-down into Id, invalid segment: Id - ../oData/Users('44ce4852-5985-44c3-9a75-03e252747d29')?$select=Email,FirstName,Id,LastName,UserName sap.ui.model.odata.v4.lib._Cache
Controller:
onInit: function () {
this.getRouter().getRoute("userDetails").attachPatternMatched(this._onObjectMatched, this);
},
_onObjectMatched: function (oEvent) {
var sUserId = oEvent.getParameter("arguments").userId;
console.log(sUserId);
this.getView().bindElement({
path: "/Users('"+sUserId+"')",
model: "som"
});
console.log(sUserId);
},
View:
<Page >
<fLayout:SimpleForm editable="true"
layout="ResponsiveGridLayout"
title="{i18n>settings.user.title}"
labelSpanXL="3"
labelSpanL="3"
labelSpanM="3"
labelSpanS="12"
emptySpanXL="4"
emptySpanL="4"
emptySpanM="4"
emptySpanS="0"
columnsXL="1"
columnsL="1"
columnsM="1" >
<fLayout:content>
<Label text="{i18n>settings.user.id}" />
<Input editable="false" value="{som>Id}" />
<Label text="{i18n>settings.user.userimage}" />
<f:Avatar press="onAvatarPressed" imageFitType="Contain" displaySize="XL" />
<Label text="{i18n>settings.user.username}" />
<Input value="{som>UserName}" />
<Label text="{i18n>settings.user.email}" />
<Input value="{som>Email}" />
<Label text="{i18n>settings.user.firstname}" />
<Input value="{som>FirstName}" />
<Label text="{i18n>settings.user.lastname}" />
<Input value="{som>LastName}" />
</fLayout:content>
</fLayout:SimpleForm>
</Page>
I found the solution, my request was returning a list ant not a single object.
I develop a little demo application with SAP Netweaver Gateway OData as a backend and SAPUI5 1.44 as UI. I am facing a problem with expanding data with the OData v2 model.
My OData service has 3 entity sets: INDSet, INFSet and INDINFSet. INDSet has a 1:N navigation to INDINFSet, so I'm able to get all INDINFs for particular IND via the following URL:
/sap/opu/odata/SAP/ZGW_ODATA_TEST_SRV/INDSet('IND0000001')/INDINFSet
My UI consists of 2 views:
master view: only has one table.
detail view: a form which I display as a dialog screen. The form has fields of the IND entity and a table which contains INDINFSet records.
The problem is that there is no data on detail view - neither in master entity fields, nor in details table. I don't see any requests in "Network" tab of Chrome dev tools when I open Dialog form - neither on mock server, nor on NW Gateway backend.
Here is a code in master controller which opens the form dialog:
var tbl = this.getView().byId('IndsTable');
var ctx = tbl.getContextByIndex(tbl.getSelectedIndex());
var oData = ctx.getProperty(ctx.sPath);
var sContentDensityClass = this.getOwnerComponent().getContentDensityClass();
var oView = this.getView();
var controller = sap.ui.controller("demo.modules.indform.controller.IndFormDialog");
controller._indFormDialog = oView.byId('IndFormDialog');
if (!controller._indFormDialog) {
controller._indFormDialog = sap.ui.xmlfragment(oView.getId(),
'demo.modules.indform.view.IndFormDialog', controller);
jQuery.sap.syncStyleClass(sContentDensityClass, oView,
controller._indFormDialog);
oView.addDependent(controller._indFormDialog);
}
oView.bindElement({
path: sPath,
model: 'mInd'
});
controller.openDialog(oView);
And here is the dialog itself:
<core:FragmentDefinition
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form"
xmlns:t="sap.ui.table"
xmlns:fb="sap.ui.comp.filterbar"
xmlns:core="sap.ui.core">
<Dialog
id="IndFormDialog"
contentWidth="44rem"
contentHeight="49rem"
class="sapUiNoContentPManageing"
showHeader="false"
verticalScrolling="false"
>
<content>
<f:SimpleForm
class='IndForm'
id="IndForm"
maxContainerCols="2"
editable="false"
layout="ResponsiveGridLayout"
labelSpanL="12"
labelSpanM="12"
labelSpanS="12"
emptySpanL="0"
emptySpanM="0"
emptySpanS="0"
columnsL="2"
columnsM="2"
columnsS="2">
<f:content>
<core:Title/>
<Label text="Index code" />
<Input
type="Text"
value="{mInd>/Id}"
/>
<Label text="Index name" />
<Input
type="Text"
value="{mInd>/Sname}"
/>
<Label text="Actual till" />
<DatePicker
value="{mInd>/Eusdt}"
/>
</f:content>
</f:SimpleForm>
<t:Table
id="Infosystems"
rows="{mInd>INDINFSet}"
visibleRowCount="10"
visibleRowCountMode="Auto"
selectionMode="None"
enableSelectAll="false"
ariaLabelledBy="title"
>
<t:toolbar>
<Toolbar>
<Title
id="infosystableTitle"
text="Infosystems"
level="H3"/>
</Toolbar>
<Button
icon="sap-icon://add"
tooltip="Add record"
press="addInfosystem" >
<layoutData>
<OverflowToolbarLayoutData priority="NeverOverflow" />
</layoutData>
</Button>
</t:toolbar>
<t:columns>
<t:Column>
<Label text="Infosystem"/>
<t:template>
<ComboBox
items="{
path: 'mInfs>/INFSet',
sorter: { path: 'Name' },
templateShareable: true
}"
>
<items>
<core:Item key="{mInfs>Id}" text="{mInfs>Name}" selectedKey="{mInd>Infosys}"/>
</items>
</ComboBox>
</t:template>
</t:Column>
<t:Column
width="5em">
<Label text="Is source"/>
<t:template>
<CheckBox selected="{mInd>IsSrc}" />
</t:template>
</t:Column>
</t:columns>
</t:Table>
</content>
<buttons>
<Button
id="IndFormDialogButtonSave"
text="Save"
type="Accept"
press="onPressSave" />
<Button
id="IndFormDialogButtonCancel"
text="Close"
type='Reject'
press="onPressCancel" />
</buttons>
</Dialog>
</core:FragmentDefinition>
Could you try this? Let me know afterwards...
oView.bindElement({
path: sPath,
model: 'mInd',
parameters: {expand:'INDINFSet'}
});
I have the following domain classes.
Address
String number
String roadName
String country
Person
String fName
String age
Address address
I have a view called PersonViewSave i want the user to be able to save Person information from this view. When creating a Person record the user needs to create a Address record as well.
My Person controller looks like this:
PersonViewSave ={
def ad = new Address(number: '11', roadName: 'round road', country:'France').save()
new Person(fName: 'Alex', age: '23', address:ad).save()
}
1.) How do i collect parameters from the view and bring it to the PersonViewSave method ? (And can someone show me a sample GSP view file with the Person and Address textfields)
2.) Incase if there's an error in the Address created, how do i prevent creating a Person object with an address as shown in this line new Person(fName: 'Alex', age: '23', address:ad).save()
UPDATE
<g:form name="myForm" method="post" action="doIt">
<p>Person info:</p>
<label for="firstName">First Name</label>
<g:textField name="firstName" id="firstName" />
<p>Address Info:</p>
<label for="roadName">Street Number</label>
<g:textField name="roadName" id="roadName" />
<g:submitButton name="submit" value="Submit" />
Here, i have only used few objects from the Domain classes just to see if it works.
I also have a parameter called createdDate in both Domain classes. That as well needs to be auto inserted.
My Service Class is as follows:
def saveService () {
def ad = new Address(params)
if (ad.save(flush: true)) {
def p = new Person(params)
p.address = ad
p.save()
} else {
// display validation errors
}
}
1.) I get an error and it is > No such property: params for class: pro.PersonService
2.) What hapence i have 2 domain class with parameters that has the same Name. For example Animal and Person domain classes have an parameter called firstName. According to your previous solution how will grail distinguish to what domain class it belongs to ?
I am using Grails 2.2.4
Here is a way to check that the Address saved correctly:
def ad = new Address(params)
if (ad.save(flush: true)) {
def p = new Person(params)
p.address = ad
p.save()
} else {
// display validation errors
}
This returns the Address if it saved properly, which results in true, otherwise it returns null (or false).
Also, you can use data binding via the params map to create your objects from parameters. As long as the key in params matches up to a property name in your Address and Person class, the value of the parameter will be assigned to the object.
So, for instance, to map your Person, you will need fields like the following:
<g:form name="personForm" method="post" action="PersonViewSave">
<p>Person info:</p>
<label for="fName">First Name</label>
<g:textField name="fName" id="fName" />
<label for="age">Age</label>
<g:textField name="age" id="age" />
<p>Address Info:</p>
<label for="number">Street Number</label>
<g:textField name="number" id="number" />
<label for="roadName">Road</label>
<g:textField name="roadName" id="roadName" />
<label for="country">Country</label>
<g:textField name="country" id="country" />
<g:submitButton name="submit" value="Submit" />
</g:form>
you can try this
def ad = new Address(number:params.number , roadName:params.roadName , country: params.country)
if (ad.save(flush: true)) {
def p = new Person(fName:params.fName , age: params.age, address:ad)
p.save()
} else {
// display validation errors
}
I'm trying to create my own 'edit' form in my grails application.
My g:select is currently populated with stuff from my database and looks like this:
<g:select name="nameList" from="${Card.list()}" value="${name} " />
And then the value :
<g:field name="amount" type="number" value="" required=""/>
My domain has only two variables - name and amount. I want to select the item from the dropdown box, type in the amount and just click 'update', my update method is a default one generated by grails so it requires ID and Version, how would I go about passing it through?
My update button ;
<g:actionSubmit class="save" action="update" value="${message(code: 'default.button.update.label', default: 'Update')}" />
My domain code:
package cardstorage
class Card {
String name;
int amount;
static constraints = {
name(blank:false);
amount(blank:false);
}
String toString(){
return name;
}
}
Thank you
I have fixed it but I'm sure it is not a proper way to do so.
<g:form method="post" >
<g:select name="card" from="${Card.list()}" optionValue ="name" optionKey="id" />
<g:field name="amount" type="number" value="" required=""/>
<fieldset class="buttons">
<g:actionSubmit class="save" action="update" value="${message(code: 'default.button.update.label', default: 'Update')}" />
</fieldset>
</g:form>
thats my code for the g:select. In my Controller method, passing the value of 'card' to the 'Long id' would result in 'id' being 49 (null + 1 = 49?)
def update(Long id, Long version) {
id = params.card;
id = id- 48;
...
}
Now I'm able to update my records, however I'm curious how should I have done this more properly.
Ok so this is beginning to drive me insane. I have for several hours now searched and searched, and every single solution doesnt work for me. So yes, this question might be redundant, but i cant for the life of me get solutions to work.
I have a bunch of checkboxes being generated by a jquery template that is databound via knockout.js. However, it turns up unstyled. Afaik, it is something about jquery mobile does the styling before knockout renderes the template, so it ends up unstyled.
I have tried numerous methods to no avail, so i hope someone here can see what i am doing wrong.
(i am using jquery mobile 1.2.0 , jquery 1.8.2 and knockout 2.2.1)
This is the scripts:
<script type="text/javascript">
jQuery.support.cors = true;
var dataFromServer = "";
// create ViewModel with Geography, name, email, frequency and jobtype
var ViewModel = {
email: ko.observable(""),
geographyList: ["Hovedstaden","Sjælland","Fyn + øer","Nordjylland","Midtjylland","Sønderjylland" ],
selectedGeographies: ko.observableArray(dataFromServer.split(",")),
frequencySelection: ko.observable("frequency"),
jobTypes: ["Kontor (administration, sekretær og reception)","Jura","HR, Ledelse, strategi og udvikling","Marketing, kommunikation og PR","Handel og service (butik, service, værtinde og piccoline)","IT","Grafik og design","Lager, chauffør, bud mv.","Økonomi, regnskab og finans","Kundeservice, telefoninterview, salg og telemarketing","Sprog","Øvrige jobtyper"],
selectedJobTypes: ko.observableArray(dataFromServer.split(",")),
workTimes: ["Fulltid","Deltid"],
selectedWorkTimes: ko.observableArray(dataFromServer.split(","))
};
// function for returning checkbox selection as comma separated list
ViewModel.selectedJobTypesDelimited = ko.dependentObservable(function () {
return this.selectedJobTypes().join(",");
}, ViewModel);
var API_URL = "/webapi/api/Subscriptions/";
// function used for parsing json message before sent
function omitKeys(obj, keys) {
var dup = {};
var key;
for (key in obj) {
if (obj.hasOwnProperty(key)) {
if (keys.indexOf(key) === -1) {
dup[key] = obj[key];
}
}
}
return dup;
}
//Function called for inserting new subscription record
function subscribe() {
if($("#jobmailForm").valid()=== true){
//window.alert("add subscriptiooncalled");
var mySubscription = ko.toJS(ViewModel);
//var json = JSON.stringify(mySubscription);
var jsonSmall = JSON.stringify(omitKeys(mySubscription, ['geographyList','jobTypes','selectedJobTypesDelimited','workTimes']));
//window.alert(jsonSmall);
$.ajax({
url: API_URL,
cache: false,
type: 'POST',
contentType: 'application/json',
data: jsonSmall,
success: function (data) {
window.alert("success");
},
error: function (error) {
window.alert("ERROR STATUS: " + error.status + " STATUS TEXT: " + error.statusText);
}
});
}
}
function initializeViewModel() {
// Get the post from the API
var self = this; //Declare observable which will be bind with UI
// Activates knockout.js
ko.applyBindings(ViewModel);
}
// Handle the DOM Ready (Finished Rendering the DOM)
$("#jobmail").live("pageinit", function() {
initializeViewModel();
$('#jobmailDiv').trigger('updatelayout');
});
</script>
<script id="geographyTmpl" type="text/html">
<input type="checkbox" data-role="none" data-bind="attr: { value: $data }, attr: { id: $data }, checked: $root.selectedGeographies" />
<label data-bind="attr: { for: $data }"><span data-bind="text: $data"></span></label>
</script>
<script id="jobTypeTmpl" type="text/html">
<label><input type="checkbox" data-role="none" data-bind="attr: { value: $data }, checked: $root.selectedJobTypes" /><span data-bind="text: $data"></span></label>
</script>
Note, "jobmail" is the surrounding "page" div element, not shown here. And this is the markup:
<div data-role="content">
<umbraco:Item field="bodyText" runat="server"></umbraco:Item>
<form id="jobmailForm" runat="server" data-ajax="false">
<div id="jobmailDiv">
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email" class="required email" data-bind="'value': email" />
</p>
<fieldset data-role="controlgroup" data-mini="true" data-bind="template: { name: 'geographyTmpl', foreach: geographyList, templateOptions: { selections: selectedGeographies } }">
<input type="checkbox" id="lol" />
<label for="lol">fkfkufk</label>
</fieldset>
<fieldset data-role="controlgroup" data-mini="true">
<p data-bind="template: { name: 'jobTypeTmpl', foreach: jobTypes, templateOptions: { selections: selectedJobTypes } }"></p>
</fieldset>
<fieldset data-role="controlgroup" data-mini="true">
<input type="radio" id="frequency5" name="frequency" value="5" data-bind="checked: frequencySelection" /><label for="frequency5">Højst 5 gange om ugen</label>
<input type="radio" id="frequency3" name="frequency" value="3" data-bind="checked: frequencySelection" /><label for="frequency3">Højst 3 gange om ugen</label>
<input type="radio" id="frequency1" name="frequency" value="1" data-bind="checked: frequencySelection" /><label for="frequency1">Højst 1 gang om ugen</label>
</fieldset>
<p>
<input type="button" value="Tilmeld" class="nice small radius action button" onClick="subscribe();">
</p>
Tilbage
</div>
</form>
Alternate method of invoking the restyling (doesnt work either):
$(document).on('pagebeforeshow', '#jobmail', function(){
// Get the post from the API
var self = this; //Declare observable which will be bind with UI
// Activates knockout.js
ko.applyBindings(ViewModel);
});
// Handle the DOM Ready (Finished Rendering the DOM)
$("#jobmail").live("pageinit", function() {
$('#jobmail').trigger('pagecreate');
});
Use a custom binding (Knockout) to trigger jQuery Mobile to enhance the dynamically created content produced by Knockout.
Here is a simple custom binding:
ko.bindingHandlers.jqmEnhance = {
update: function (element, valueAccessor) {
// Get jQuery Mobile to enhance elements within this element
$(element).trigger("create");
}
};
Use the custom binding in your HTML like this, where myValue is the part of your view model that changes, triggering the dynamic content to be inserted into the DOM:
<div data-bind="jqmEnhance: myValue">
<span data-bind="text: someProperty"></span>
My Button
<input type="radio" id="my-id" name="my-name" value="1" data-bind="checked: someOtherProperty" /><label for="my-id">My Label</label>
</div>
In my own case, myValue was part of an expression in an if binding, which would trigger content to be added to the DOM.
<!-- ko if: myValue -->
<span data-bind="jqmEnhance: myValue">
<!-- My content with data-bind attributes -->
</span>
<!-- /ko -->
Every dynamically generated jQuery Mobile content must be manually enhanced.
It can be done in few ways, but most common one can be done through the jQuery Mobile function .trigger( .
Example:
Enhance only page content
$('#page-id').trigger('create');
Enhance full page (header + content + footer):
$('#page-id').trigger('pagecreate');
If you want to find more about this topic take a look my other ARTICLE, to be more transparent it is my personal blog. Or find it HERE.