I have one SplitApp with Master -Detail layout. I would like to know how can I set the first item in Master view to default so that on loading of application Detail view shows the information about the select list item. So when user open the application automatically first item in Master should be selected and Detail View show the information.
I am using Objectlist Item as control for Master view. And currently using the select event for selecting the list item.
var oList = new sap.m.List("idMasterList",{
mode: sap.m.ListMode.SingleSelect,
select: [oController.onSelectItem, oController]
});
onSelectItem: function(oEvent){
//var app = sap.ui.getCore().byId("splitApp");
var oMasterList = sap.ui.getCore().byId("idMasterList");
var oSelItem = oMasterList.getSelectedItem();
var sPath = oSelItem.oBindingContexts.druginfo.sPath;
var oItem = sap.ui.getCore().getModel("druginfo").getProperty(sPath);
var oSelModel = new sap.ui.model.json.JSONModel(oItem) ;
sap.ui.getCore().setModel(oSelModel, "SelectedItem");
}
Regards,
Mayank
It seems like there is (hidden) API to make the select event fire when setting the selected item:
ListBase.prototype.setSelectedItem = function(oListItem, bSelect, bFireEvent) {
if (this.indexOfItem(oListItem) < 0) {
jQuery.sap.log.warning("setSelectedItem is called without valid ListItem parameter on " + this);
return;
}
if (this._bSelectionMode) {
oListItem.setSelected((bSelect === undefined) ? true : !!bSelect);
bFireEvent && this._fireSelectionChangeEvent([oListItem]);
}
};
You could use setSelectedItem once your lists data is loaded (e.g. change event of aggregation binding items) like this:
var oList = this.getView().byId("MyListID"),
oFirstItem = oList.getItems()[0];
oList.setSelectedItem(oFirstItem, true, true);
This will trigger the selectionChange resp. select event and your already existing event listener will be triggered.
Related
I am using a kendo editor and I have a select event
function onselect(e) {
var editor = e.sender;
var selection = editor.getSelection();
var selectedNode = selection.anchorNode;
var targetelement = $(selectedNode).closest("[contenteditable='false']");
}
Problem is when I click a single character then I am not getting the correct selected node and when I click any text(more than one character) I am getting proper selected node.
I have a SmartTable control (with tableType="Table") in a custom app (sapui5 version 1.71).
The xml view (Main) has a filter, which when executed correctly brings the data via custom odata service and shows in the table. This part works as expected. Table threshold is set to 10k.
We are not selecting any rows on the Main view's smarttable (underlying Table has selectionMode="None").
The requirement is to have a 'summarise' button on the Main view that when pressed will show a Summary view (route navigation) with summarised information based on some columns (not keys).
How to get all the data from the Main's view smarttable?
getRows() method of the underlying table returns only visible rows.
I don't want to switch to use ui.table.Table as there are some nice features you get for free for a SmartTable.
Many thanks,
Wojciech
I had exactly same requirement. It's strange that UI5 makes it so hard to achieve something which is very basic. The code below is from my project but it gives the basic gist:
var allItems = oSmartTable.getTable().getItems();
var highestSortOrder = 1;
for (var i=0; i<allItems.length; i++) {
var anItem = allItems[i];
var sPath = anItem.getBindingContext().sPath;
var currentObject = oSmartTable.getModel().getObject(sPath);
var currentSortOrder = currentObject.SORTORDER;
if (null !== currentSortOrder) {
if (currentSortOrder > highestSortOrder) {
highestSortOrder = currentSortOrder;
}
}
}
I've a popover component and I added a multi-select list inside of it. I would like to set checked property to true for all items in case of the first item of list is selected. But selectionChange event works for every item's selection event. So, index value of the for loop always starts with zero. What should I do in this situation? Thanks for your suggestions.
Here is my part of a code and screenshot of image;
image url
new sap.m.List('statusTypesList', {
mode: 'MultiSelect',
selectedKeys: " ,1,2,3",
includeItemInSelection: true,
selectionChange: function(oEvent) {
var keyValues = "";
var itemArray = oEvent.oSource.getItems();
if(itemArray[0].getSelected()==true){
for (var i = 0; i < itemArray.length; i++) {
oEvent.oSource.setSelectedItem(itemArray[i], true, true);
}
}
}
})
Check if the item that fired the event is the first one in your list. Something like this:
function(oEvent) {
var changedItem = oEvent.getParameter('listItem');
if(changedItem isTheFirstItem){
//Where 'isTheFirstItem' is the condition you define to identify your first item
var keyValues = "";
var itemArray = oEvent.getSource().getItems();
if(itemArray[0].getSelected()==true){
for (var i = 0; i < itemArray.length; i++) {
oEvent.getSource().setSelectedItem(itemArray[i], true, true);
}
}
}
Define the condition you want in the if(changedItem isTheFirstItem) statement
Try this condition, maybe it works: if(changedItem === oEvent.getSource().getItems()[0])
If not, just build your own condition to check if it is the first one or not
NOTE: User getSource() to get the source from the event. It is always better than accessing the object directly
i need to build the page by binding aggregation as below
view
<NavContainer
id="navCon"
class="navContainerControl sapUiSmallMarginBottom" height="50%">
</NavContainer>
controller
onInit : function()
{
var navCon = this.getView().byId("navCon");
navCon.bindAggregation('pages',{
path:'/pages',
factory : jQuery.proxy(this.createPages,this)
});
}
createPages : function(sid,context)
{
var eachpageData = context.getObject();
var grid = new sap.ui.layout.Grid({
defaultSpan:"L4 M6 S6"
});
var page = new sap.m.Page({
id : eachpageData.name,
title : eachpageData.name,
content : grid
});
grid.bindAggregation('content',{path:'data',factory :this.createPageContent});
return page;
},
But when i see from the debugger it has only one page
But when i call navto
handleNav : function(evt)
{
var navCon = this.getView().byId("navCon");
var target = evt.getSource().getText();
if (target) {
//var animation = this.getView().byId("animationSelect").getSelectedKey();
navCon.to(this.getView().byId(target));
} else {
navCon.back();
}
}
and if i see the navCon.getPages() will give 2 pages.
What mistake i have done here?
You are trying to pass the DOM element to the NavContainers.to(DOM) method. This is where its gone wrong.
But NavContainers.to() method can accept id(String) as parameter.
Change your handleNav method as follows it will work.
handleNav : function(evt)
{
var navCon = this.getView().byId("navCon");
var target = evt.getSource().getText();
if (target) {
navCon.to(target);
} else {
navCon.back();
}
}
NavContainers can display only one page. You can add more pages to the pages aggregation, but they will be visible only if a navigation event is fired with the proper parameters. After that, the layout of the new page is loaded and added to the DOM.
In case of SplitApp, application can display two pages (master and detail) if you see it on tablet or desktop; however it's implemented by the use of two NavContainers.
That's why the control inspector returns with one page before the navigation, second page is not part of the DOM until you navigates to it.
If you place a breakpoint into your code instead of using the control inspector, you can call the navCon.getPages() which should return with the number of pages in the aggregation.
I have dropdown options where options populate dynamically, I have a multifield,checkbox,dropdown. When i click on the checkbox[event on selectionchanged] its fetch the items count from multifield and display options.
var select2opts = [];
var dialog = this.findParentByType('dialog');
var panel1 = this.findParentByType('panel');
var dropdown = panel1.getComponent("dropdown1");
var button = panel1.getComponent("button1");
var customfield = panel1.getComponent("customfield");
for (var i = 1; i <= customfield.items.getCount()-1 ; i++) {
select2opts.push({value: i, text:"Tab "+i});
}
dropdown.setOptions(select2opts);
dropdown.show();
But Rather than checkbox, i want some image to be place there like refresh & on click this function will get call. Which type of widget and event i can use for that.
Thanks
You can use the button xtype. It has a icon property that takes url of the image to be used. Set your function as the value of handler property. The handler function gets called every time the button is clicked. button and event objects are passed to the handler function. The button object can be used to get reference to the dialog object.
Reference : http://dev.day.com/docs/en/cq/current/widgets-api/output/CQ.Ext.Button.html