I'm trying to build a SAPUI5 application using JSON model.
I want to add 2 dropdown select menus, so that the second one fills in depending on the current selection of the first one.
I tried to get it done, but stucked at the very beginning.
This is what I get from Ajax (the object itself is passed from the server):
var data = {
"firm1":["firm1project1","firm1project2","firm1project3"],
"firm2":["firm2project1","firm2project2","firm2project3"],
"firm3":["firm3project1","firm3project2","firm3project3"],
"firm4":["firm4project1","firm4project2","firm4project3"]
};
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(data);
sap.ui.getCore().setModel(oModel);
The first menu should be the list of firms and the second one - is the selected firm's projects. And now I have no idea how to bind the data to the controls the right way.
Thank you.
EDIT:
According to what I've read in the developer's guide, the data that should appear in different controls is contained under fixed keys (as shown in "Aggregation Data Binding in a Simple Application" part of the page that I linked above), so it would be possible to just write something like:
var oListItemTemplate = new sap.ui.commons.ListItem("ListItemTemplate", {
text : "{firm}",
});
and for the projects:
var oListItemTemplate = new sap.ui.commons.ListItem("ListItemTemplate", {
text : "{firm/project}",
});
But in my case there is no firm key. My ListItems for the firm selection menu are keys, not values. And ListItems for the project selection menu are in an array, not just separate values under fixed keys.
So, is there a way or to bind somehow the data I have in its current form to controls, or how the data should look like to be useful for binding?
your data looks better like the following, the data binding JSON objects are with keys. And there are two data models needed for two dropdown boxes, multi data model binding should be used. I did a example at JSBin which fulfills your requirements, you can have a look and get some thoughts.
{
"firms": [
{
"name": "firm1",
"projects": [
{
"name": "firm1project1"
},
{
"name": "firm1project2"
},
{
"name": "firm1project3"
}
]
},
{
"name": "firm2",
"projects": [
{
"name": "firm2project1"
},
{
"name": "firm2project2"
},
{
"name": "firm2project3"
}
]
},
{
"name": "firm3",
"projects": [
{
"name": "firm3project1"
},
{
"name": "firm3project2"
},
{
"name": "firm3project3"
}
]
},
{
"name": "firm4",
"projects": [
{
"name": "firm4project1"
},
{
"name": "firm4project2"
},
{
"name": "firm4project3"
}
]
}
]
}
Related
I've used the Mask-Extension in TYPO3 to create a custom content element for news articles.
Now I want to generate a thumbnail preview on the news parent page that contains images and texts from that mask element.
This means I need to access the data inside of a custom content element of a foreign page.
I've used <f:debug> to see if I can get information from the {data} Array on the page / childpage but there is nothing with content of the mask element.
I suspect that I might need to add a new dataProcessor in my setup.typoscript, but I do not understand how those work well. Mask has its own dataProcessor but I was unable to include it inside my extension.
Do I need to work with dataProcessors here at all and if yes how do I do that?
The field names of the mask-news element are:
tx_mask_news_innertext
tx_mask_news_innerpicture
The tca in mask.json looks like this:
"tca": {
"tx_mask_news_innerpicture": {
"cTypes": [
"image"
],
"config": {
"appearance": {
"collapseAll": 1,
"enabledControls": {
"dragdrop": 1
},
"levelLinksPosition": "top",
"showAllLocalizationLink": 1,
"showPossibleLocalizationRecords": 1,
"useSortable": 1
},
"foreign_sortby": "sorting",
"foreign_table": "tt_content",
"overrideChildTca": {
"columns": {
"colPos": {
"config": {
"default": 999
}
}
}
},
"type": "inline"
},
"description": "",
"key": "news_innerpicture",
"l10n_mode": "",
"name": "content"
},
"tx_mask_news_innertext": {
"config": {
"enableRichtext": 1,
"richtextConfiguration": "",
"type": "text"
},
"description": "",
"key": "news_innertext",
"l10n_mode": "",
"name": "richtext"
},
We are trying to add new Alternate Id to a current Stock Item, when pushing the service body we receive the point back without any error. However, it does not add the additional Cross Reference Item.
{
"InventoryID": {
"value": "APR000195XXX"
},
"CrossReferences": [
{
"AlternateID": {
"value": "19405"
},
"AlternateType": {
"value": "Global"
},
"Description": {
"value": "XXXPUL0001"
},
"Subitem": {
"value": "000000"
},
"VendorOrCustomer": {},
"custom": {},
"files": []
}
]
}
the issue came down to screen rights on roles that were not set
If you want add line Cross-Reference to existing stock Item your request should work.
Just check that you use correct type - "PUT" and correct endpoint:
I'm trying to populate a dropdown list with names of employees fetched from success factors, but I can't get the response to display correctly. I can display the managerId and userId no problem just not the first and last name.
Here is the response:
{
"d": {
"results": [{
"__metadata": {
"uri": "https://apisalesdemo8.successfactors.com:443/odata/v2/EmpJob(seqNumber=1L,startDate=datetime'2010-02-01T00:00:00',userId='spappar1')",
"type": "SFOData.EmpJob"
},
"userId": "spappar1",
"managerId": "rmaxx1",
"employmentNav": {
"__metadata": {
"uri": "https://apisalesdemo8.successfactors.com:443/odata/v2/EmpEmployment(personIdExternal='spappar1',userId='spappar1')",
"type": "SFOData.EmpEmployment"
},
"personNav": {
"__metadata": {
"uri": "https://apisalesdemo8.successfactors.com:443/odata/v2/PerPerson('spappar1')",
"type": "SFOData.PerPerson"
},
"personalInfoNav": {
"results": [{
"__metadata": {
"uri": "https://apisalesdemo8.successfactors.com:443/odata/v2/PerPersonal(personIdExternal='spappar1',startDate=datetime'1990-01-01T00:00:00')",
"type": "SFOData.PerPersonal"
},
"lastName": "Pappar",
"firstName": "Steve"
}]
}
Here is my data binding for the dropdown:
var employeeTemplate = new sap.ui.core.ListItem({
text: "{employeeDropDownModel/employmentNav/personNav/personalInfoNav/results>firstName} {employeeDropDownModel/employmentNav/personNav/personalInfoNav/results>lastName}"
});
sap.ui.getCore().getElementById('employeeId').bindItems("employeeDropDownModel>/d/results", employeeTemplate);
Any help would be awesome, I have tried many different combinations to get the binding to work, but to no avail.
Can you provide a jsbin of the entire UI flow. One thing that strikes me immediately from my experiences is that you are trying a complex binding and your index.html should have the following
**data-sap-ui-xx-bindingSyntax="complex"**
If this does not fix, can you provide a jsbin example?
Thanks and Regards,
Veera
Thanks for the comments and suggestions guys, I tried many different ways:
employeeDropDownModel>/employmentNav/personNav/personalInfoNav/results/firstName
employeeDropDownModel>/employmentNav/personNav/personalInfoNav/results/0/firstName
Neither of thses worked and I do have data-sap-ui-xx-bindingSyntax="complex" in my index.html.
So what I ended up doing was binding the model in the usual way and then just moving the first and last name up in the model to the same level as userId and managerId:
$.each(
this.employeeModel,function(index, value) {
if (value.employmentNav.personNav.personalInfoNav.results.length > 0) {
var firstName = value.employmentNav.personNav.personalInfoNav.results[0].firstName;
var lastName = value.employmentNav.personNav.personalInfoNav.results[0].lastName;
value['firstName'] = firstName;
value['lastName'] = lastName;
} else {
value['firstName'] = '';
value['lastName'] = '';
}
});
This solved my issue pretty well. I'm not sure if this is a very good solution, but it worked for me.
Thanks again
I want to store website menus in Mongo for the navigation of my CMS, but since I'm new to Mongo and the concept of documents, I'm trying to figure out what would be best:
a) Should I store menu documents, containing children and those having more children, or
b) Should I store menu item documents with parent_id and child_ids ?
Both would appear to have benefits, since in case A it's normal to load an entire menu at once as you'll need everything to display, but B might be easier to update single items?
I'm using Spring data mongo.
PS: If I asked this question in a wrong way, please let me know. I'm sure this question can be expanded to any general parent-child relationship, but I was having trouble finding the right words.
Since menus are typically going to be very small (under 16MB I hope) then the embedded form should give you the best performance:
{
"topItem1": [
{ "name": "item1", "link": "linkValue" },
{ "name": "item2", "link": "linkValue" }
],
"topItem2": [
{ "name": "item1", "link": "linkValue" },
{ "name": "item2", "link": "linkValue" }
{
"name": "sub-menu",
"type": "sub",
"items": [
{ "name": "item1", "link": "linkValue" },
{ "name": "item2", "link": "linkValue" }
}
}
]
}
The only possible issue there is with updating the content inside nested arrays, as MngoDB can only "match" the first found array index. See the positional $ operator documentation for this.
But as long as you know the positions then this should not be a problem, using "dot notation" concepts:
db.menu.update({}, {
"$set": {
"topItem2.2.items.1": { "name": "item3", "link": "linkValue" }
}
})
But general adding should be simple:
db.menu.update(
{ "topItem2.name": "sub-menu" },
{
"$push": {
"topItem2.2.items": { "name": "item4", "link": "linkValue" }
}
}
)
So that is a perspective on how to use the inherrent embedded structure rather than associate "parent" and "child" items.
After long hard thinking I believe I would use:
{
_id: {},
submenu1: [
{label: "Whatever", url: "http://localhost/whatever"}
]
}
I thought about using related documents with IDs all sitting in a collection but then you would have to shoot off multiple queries to get the parent and its range, possibly even sub-sub ranges too. With this structure you have only one query for all.
This structure is not infallible however, if you change your menu items regularly you might start to notice fragmentation. You can remedy this a little with powerof2sizes allocation: http://docs.mongodb.org/manual/reference/command/collMod/#usePowerOf2Sizes
But yes, with careful planning you should be able to use one single document for every parent menu item
i have data view with following tpl.
<tpl for=".">
<tpl for="departments">
{title}
</tpl>
<tpl for="records">
<div class="thumb-wrap">
{name}
</div>
</tpl>
</tpl>
and my json redear like this
reader : new Ext.data.JsonReader(
{
root : 'data',
},
[
'departments' ,
'records'
]
),
and my item selectore in on my recordes
itemSelector : 'div.thumb-wrap',
and this is my json data
{
"success": true,
"data": [
{
"departments": [
{
"title": "name"
}
],
"records": [
{
"name": "name"
},
{
"name": "name"
}
]
},
{
"departments": [
{
"title": "name"
}
],
"records": [
{
"name": "name"
}
]
}
]
}
how cat i select my records in data view with extjs?
and how can i get selected recordes ?
i used getSelectedRecords() but it return array of departments and records.
tnx
I'm pretty sure that getSelectedRecords() is deprecated on ExtJS 4.
You can try doing something like this:
var records = data.getRecords();
That will return a Ext.data.Model[]. Than, you can access all the properties like an usual model:
record.get('departments');
record.get('records');
You are working against the system here with your record structure. DataView wants one record to correspond with one selectable item. But you want to have multiple selectable items inside one record. Doesn't work - the API was not designed for such a thing.
Your options seem to be:
Create a separate DataView component for each set of records.
Create your own DataView component that can handle grouping.
Use Grid with GroupingView. You have to change your record structure to something like below, but it's the easiest option to get working. Though... you have to sacrifice quite a bit of flexibility offered by DataView.
"data": [
{
{
"department": "Department 1"
"name": "record 1"
},
{
"department": "Department 1"
"name": "record 2"
},
{
"department": "Department 2"
"name": "record 1"
},
{
"department": "Department 2"
"name": "record 2"
},
]
}