I have a SearchField with liveChange properties:
<SearchField id="searchField" liveChange="onSearch" width="100%" />
In my controller i manage the live-action:
onSearch : function (oEvt) {
// add filter for search
var aFilters = [];
var sQuery = oEvt.getSource().getValue();
if (sQuery && sQuery.length > 0) {
var fileterCol=this.byId("selectSearch789").getSelectedKey();
var filter = new sap.ui.model.Filter(fileterCol, sap.ui.model.FilterOperator.Contains, sQuery);
aFilters.push(filter);
}
// update list binding
var tableArtConNom = this.getView().byId("tableResult");
var binding = tableArtConNom.getBinding("items");
binding.filter(aFilters, "Application");
}
But at every char that I write, the cursor return al position 0. For example if I want search HOUSE i write the word but i see ESUOH....
If i use search and not liveChange it work!
There is a solution for you. Please set property of SearchField: selectOnFocus="false".
Please also see the documentation.
Regards,
Allen
Related
This is my first post to Stack, appreciate the work you guys do, amazing.
I have a sap.m.table sap ui5 and i have 4 records
out of 4, 2 are selected by default, i want to disable the preselected once based on condition.
I have tried below code but its not working, any input please?
View
/results' }" **mode="MultiSelect"**
Controller logic
//--->disable the selected department checkboxes
var tbl = that.getView().byId('idImpactTable');
var header = tbl.$().find('thead');
var selectAllCb = header.find('.sapMCb');
selectAllCb.remove();
tbl.getItems().forEach(function(r) {
var obj = r.getBindingContext("impactModel").getObject();
var oStatus = obj.COMPLETED;
var cb = r.$().find('.sapMCb');
var oCb = sap.ui.getCore().byId(cb.attr('id'));
if (oStatus === "X") {
oCb.setSelected(true);
oCb.setEnabled(false);
} else {
oCb.setEnabled(false);
}
});
Multiselect Mode Table - Make selected check box read only
Last time I tried this I found it easiest to use the updateFinished event on the table, and then use an internal property of the column list item, like so:
onTableUpdateFinished: function (oEvent) {
oEvent.getSource().getItems().forEach(function (item) {
var data = item.getBindingContext().getObject();
item._oMultiSelectControl.setEnabled(!data.IsEnabled); //whatever your check is
});
}
You'll have to find a way to keep them disabled though when using the Select All checkbox at the top of the table. I ended up extending sap.m.Table to accomplish that, there might be easier ways...
My extension is like this
sap.ui.define([
"sap/m/Table"
], function(Control) {
return Control.extend("myapp.controls.MyTable", {
updateSelectAllCheckbox: function(oEvent) {
if (this._selectAllCheckBox && this.getMode() === "MultiSelect") {
var aItems = this.getItems();
var iSelectedItemCount = this.getSelectedItems().length;
var iSelectableItemCount = aItems.filter(function(oItem) {
//standard table does not check if the item is enabled
return oItem.getSelected() || oItem._oMultiSelectControl.getEnabled();
}).length;
// set state of the checkbox by comparing item length and selected item length
this._selectAllCheckBox.setSelected(aItems.length > 0 && iSelectedItemCount === iSelectableItemCount);
}
}
});
});
And just the standard renderer
sap.ui.define([
"sap/m/TableRenderer"
], function(Control) {
return Control.extend("myapp.controls.MyTableRenderer", {
});
});
I suppose I could have extended the ColumnListItem but that was more effort than I wanted to put into the table extension
I have managed to find the solution, please find sample code to achieve.
//--->disable the selected department checkboxes
var tbl = that.getView().byId("idImpactTable");
var header = tbl.$().find("thead");
var selectAllCb = header.find(".sapMCb");
selectAllCb.remove();
var aItems = that.byId("idImpactTable").getItems();
//---> Check individual item property value and select the item
aItems.forEach(function(oItem) {
debugger;
//---> If using OData Model items Binding, get the item object
var mObject = oItem.getBindingContext().getObject();
var sPath = oItem.getBindingContextPath();
var completed = oItem.oBindingContexts.impactModel.getProperty("COMPLETED");
//--->get the id of Multi Checkbox
var cb = oItem.$().find(".sapMCb");
var oCb = sap.ui.getCore().byId(cb.attr("id"));
if (completed === "X") {
oCb.setEditable(false);
oItem.setSelected(true);
oItem.getCells()[4].setEnabled(false);
} else {
oItem.setSelected(false);
}
});
Thank you,
Jacob.Kata
//--->disable the selected department checkboxes
var tbl = that.getView().byId('idImpactTable');
tbl.getItems().forEach(function(r) {
// this makes the trick --->
var oMultiSelCtrl = r.getMultiSelectControl();
oMultiSelCtrl.setDisplayOnly( true );
});
I Need to add a different css class to each FeedListItem.
I need it to added to each class separately & dynamically (onPost method in JS file) since i'm adding different class according to the feed input entered.
I'v checked the sapui5 guide line but i see no property of FeedListItem related to styling&CSS.
Wanted result:
<ul> //FeedListItems
<li class="<MY_CUTOM_CLASS_1>"></li>
<li class="<MY_CUTOM_CLASS_2>"></li>
<li class="<MY_CUTOM_CLASS_3>"></li>
</ul>
What is the best way to do it?
How can i do that?
XML file:
<FeedInput
post="onPost"
icon="test-resources/sap/m/images/dronning_victoria.jpg"
class="sapUiSmallMarginTopBottom" />
<List
showSeparators="Inner"
items="{/EntryCollection}" >
<FeedListItem
sender="{Author}"
icon="{AuthorPicUrl}"
senderPress="onSenderPress"
iconPress="onIconPress"
iconDensityAware="false"
info="{Type}"
timestamp="{Date}"
text="{Text}" />
</List>
JS file:
sap.ui.define([
'jquery.sap.global',
'sap/m/MessageToast',
'sap/ui/core/format/DateFormat',
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel'
], function(jQuery, MessageToast, DateFormat, Controller, JSONModel) {
"use strict";
var CController = Controller.extend("sap.m.sample.Feed.C", {
onInit: function () {
// set mock model
var sPath = jQuery.sap.getModulePath("sap.m.sample.Feed", "/feed.json")
var oModel = new JSONModel(sPath);
this.getView().setModel(oModel);
},
onPost: function (oEvent) {
var oFormat = DateFormat.getDateTimeInstance({style: "medium"});
var oDate = new Date();
var sDate = oFormat.format(oDate);
// create new entry
var sValue = oEvent.getParameter("value");
var oEntry = {
Author : "Alexandrina Victoria",
AuthorPicUrl : "http://upload.wikimedia.org/wikipedia/commons/a/aa/Dronning_victoria.jpg",
Type : "Reply",
Date : "" + sDate,
Text : sValue
};
// update model
var oModel = this.getView().getModel();
var aEntries = oModel.getData().EntryCollection;
aEntries.unshift(oEntry);
oModel.setData({
EntryCollection : aEntries
});
} });
return CController;
});
edit: up to version 1.48 it's not possbile to set a binding to the property "class". however "addStyleClass" and this work around work out.
i'm afk and therefore can't validate the following. but this should solve it. in the xml view is the property "class" to add to the feedlistitem. in the js controller the property to the object "oEntry". and the model needs to handle the class attribute as well.
xml view:
<FeedInput
post="onPost"
icon="test-resources/sap/m/images/dronning_victoria.jpg"
class="sapUiSmallMarginTopBottom" />
<List
showSeparators="Inner"
items="{/EntryCollection}">
<FeedListItem
class="{Class}"
sender="{Author}"
icon="{AuthorPicUrl}"
senderPress="onSenderPress"
iconPress="onIconPress"
iconDensityAware="false"
info="{Type}"
timestamp="{Date}"
text="{Text}" />
</List>
controller js:
onPost: function (oEvent) {
var oFormat = DateFormat.getDateTimeInstance({style: "medium"});
var oDate = new Date();
var sDate = oFormat.format(oDate);
// create new entry
var sValue = oEvent.getParameter("value");
var oEntry = {
Class: "CSSClass",
Author : "Alexandrina Victoria",
AuthorPicUrl : "http://upload.wikimedia.org/wikipedia/commons/a/aa/Dronning_victoria.jpg",
Type : "Reply",
Date : "" + sDate,
Text : sValue
};
// update model
var oModel = this.getView().getModel();
var aEntries = oModel.getData().EntryCollection;
aEntries.unshift(oEntry);
oModel.setData({
EntryCollection : aEntries
});
}
I´m using SAPUI5, I have a MasterPage and a DetailPage, in the MasterPage I have a List and when I select de Item in the List the information is displayed in the DetailPage.
In the DetailPage I have a PositiveAction, When I press the PositiveAction I need to get the Data of the DetailPage but I don't know how to do this.
My code of the Item Press
onPoSelect : function(oEvent) {
var oListItem = oEvent.getParameter('listItem');
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("DetailPanel", {
invoicePath: oListItem.getBindingContext("solped").getPath().substr(1)
});
},
My code in the DetailPanel
onInit: function (){
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.getRoute("DetailPanel").attachPatternMatched(this._onObjectMatched, this);
},
_onObjectMatched: function (oEvent) {
this.getView().bindElement({
path: "/" + oEvent.getParameter("arguments").invoicePath,
model: "solped"
});
},
The line "oEvent.getParameter("arguments").invoicePath,"
returns this.
Invoices(CustomerName='Alfreds Futterkiste',Discount=0f,OrderID=10702,ProductID=3,ProductName='Aniseed Syrup',Quantity=6,Salesperson='Margaret Peacock',ShipperName='Speedy Express',UnitPrice=10.0000M)
I have the information but it is a String, How can I convert this String in an Object? Or, how else can I access the information in the view?
The image of the View
enter image description here
I assume you can already see the data of the detail in your Detail view.
You binded the data to the view by bindElement function and to retrieve them back in the code you are looking for "getBindingContext" function.
Create following function in your Detail controller:
// this must be connected to Button -> <Button press="onPositivePress">
onPositivePress: function(oEvent) {
var oBindingContext = this.getView().getBindingContext("solped");
// this is the path you can use to call odata service
var sPath = oBindingContext.getPath();
// this is data you are looking for
var oReqData = oBindingContext.getObject();
}
You can get all the properties as an object by passing the binding path as an argument to the getProperty function of the underlying Data model.
var oModel = this.getView().getModel("solped");
var oProps = oModel.getProperty(oListItem.getBindingContext("solped").getPath());
You can then access these properties as
oProps.CustomerName;
oProps.OrderID;
...
for converting string to object see below example.
var a = "how r u";
var b = [a];
you will get object of a in b.
In my masterview of an split-app I have a list with purchase order items. Initially, the list is ordered descending by the purchase order numbers. I achieved this by defining a sorter in the xml-View declaratively:
<List
id="listBestellungen"
noDataText="{i18n>masterListNoDataText}"
growing="true"
growingScrollToLoad="true"
updateFinished="onUpdateFinished"
selectionChange="onSelectionChange"
items="{
path: '/PO_HeadInfoSet',
sorter: {
path: 'POHI_Ebeln',
descending: true
}
}"
mode="SingleSelectMaster"
>
...
Then I have a SortSelect-Button in the footer with the press-Event "onSorting".
The onSorting function looks like this:
onSorting: function(oEvent) {
var oView = this.getView();
var oList = oView.byId("listBestellungen");
var oBinding = oList.getBinding("items");
var SORTKEY = "POHI_Ebeln";
var DESCENDING = false;
var GROUP = false;
var aSorter = [];
aSorter.push(new sap.ui.model.Sorter(SORTKEY, DESCENDING, GROUP));
oBinding.sort(aSorter);
}
The onSorting function is invoked when I click on the sorting button. Also I can see, that the sorting direction is changed in the binding.
But why or how do I change the sorting of the list in the UI?
Kind regards
Michael
try refreshing the model. since the list is bound to the model, this will refresh all bound objects(the UI elements you want to change)
var oModel = this.getView().getModel();
oModel.refresh();
I understand your issue is to press a sort button which will sort the list by ascending order, then upon press again the list will be sorted by descending order.
This is how it's done:
onInit:function(){
this.bDescending = true;
},
onListSort:function(){
var oList=this.byId("listNotesAttachments"),
oBinding = oList.getBinding("items");
var sSortKey = "Time";
this.bDescending= !this.bDescending; //switches the boolean back and forth from ascending to descending
var bGroup = false;
var aSorter = [];
aSorter.push(new sap.ui.model.Sorter(sSortKey, this.bDescending, bGroup));
oBinding.sort(aSorter);
}
I'm having trouble accessing some innerHTML that I need to use as a title for a menu bar:
See the attached image for details...
The title "AMRIS" is what I need to store to a javascript variable as a string.
I will later be using the following code to fill a Bootstrap menu with the title I grab:
echo '<script type="text/javascript">
var subTitle = document.getElementById("mobMenuTitle2");
//This is currently filling the Sub Menu with a title//
subTitle.innerHTML = "Sub Test";
</script>';
RIGHT-CLICK > OPEN IMAGE IN NEW TAB TO SEE FULL SIZE
If you need the html of opend item, try like this
var openedList = document.getElementsByClassName('opened');
var menuLink = openedList[0].getElementsByClassName('menu-link');
var anchorText = menuLink[0].innerHTML;
Instead if you want to retrieve the html of list X (X is a numer 0 based)
var accordion = document.getElementsByClassName('accordion-menu');
var list = accordion[0].getElementsByTagName('li');
var menuLink = list[X].getElementsByClassName('menu-link');
var anchorText = menuLink[0].innerHTML;
var opn = $(".accordion-menu.opened.menu-link").context.title;
var opnr = opn.replace("MagLab", "");
var subTitle = document.getElementById("mobMenuTitle2")
subTitle.innerHTML = opnr;