All dropdown selected item value getting from first oDATA and Second oDATA.
Once select or choose all dropdown
value item then
I want to push all
selected item value to third oDATA.(Eg: After click Append button)
Sample Screenshot Image Output Code below:
function() {
//get first dropdown box selected key from first odata
var plant = sap.ui.getCore().byId("plant").getSelectedKey();
if (plant != 0) {
var sServiceUrl = "/sap/opu/odata/SAP/Z_M_EPM_BOM_SRV/";
var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, true);
var filterList = [];
var i;
filterList.push(new sap.ui.model.Filter("Plant", sap.ui.model.FilterOperator.EQ, plant));
// first dropdown box selected value filter to second odata key
oModel.read("/MatCharFieldSet", {
context: null,
async: false,
filters: filterList,
urlParameters: {
"$expand": "MatCharValuesSet"
},
success: function(data) {
var res = data.results;
var content = [];
for (i = 0; i < res.length; i++) {
content.push(new sap.m.Label({
text: res[i].DescrChar,
name: res[i].FieldName
}));
var items = [];
for (var j = 0; j < res[i].MatCharValuesSet.results.length; j++) {
items.push(new sap.ui.core.Item({
text: res[i].MatCharValuesSet.results[j].FieldValue,
key: res[i].MatCharValuesSet.results[j].FieldValue
}));
}
content.push(new sap.m.Select({
items: items
}));
}
fields = new sap.ui.layout.form.SimpleForm({
editable: true,
layout: sap.ui.layout.form.SimpleFormLayout.ResponsiveGridLayout,
labelSpanL: 4,
labelSpanM: 4,
adjustLabelSpan: true,
emptySpanL: 0,
emptySpanM: 0,
columnsL: 4,
columnsM: 4,
content: content
});
fields.placeAt("fields", "only");
}
How to push all selected value item to another oDATA ?
SAMPLE SCREENSHOT
var getAllSelectInstances = $(".sapMSlt").control();
getAllSelectInstances.forEach(function(oSelect){
var getSelectedItem = oSelect.getSelectedItem();
var getSelectedText = getSelectedItem ? getSelectedItem.getText() : null;
Console.log("Selected Value : " + getSelectedText);
});
Related
I wish to generate a custom dropdown filter, based on categories from a database.
How is this achieved?
In my example, this is (poorly) implemented with some hard coding and duplication.
var serviceOverlays = [
{name:"Cardiology", value:"cardiology"},
{name:"Opthamology", value:"opthamology"}
];
var oSelect = L.control({position : 'topright'});
oSelect.onAdd = function (map) {
var overlayParent = document.getElementById('new-parent'); // overlays div
var node = L.DomUtil.create('select', 'leaflet-control');
node.innerHTML = '<option value="cardiologist">Cardioligist</option><option value="opthamology">Opthamology</option>';
overlayParent.appendChild(node);
L.DomEvent.disableClickPropagation(node);
L.DomEvent.on(node,'change',function(e){
var select = e.target;
for(var name in serviceOverlays){
serviceOverlays[name].removeFrom(map);
}
serviceOverlays[select.value].addTo(map);
});
Fiddle
I created a Control for you:
L.Control.Select = L.Control.extend({
options: {
position : 'topright'
},
initialize(layers,options) {
L.setOptions(this,options);
this.layers = layers;
},
onAdd(map) {
this.overlayParent = L.DomUtil.create('div', 'leaflet-control select-control');
this.node = L.DomUtil.create('select', 'leaflet-control',this.overlayParent);
L.DomEvent.disableClickPropagation(this.node);
this.updateSelectOptions();
L.DomEvent.on(this.node,'change',(e)=>{
var select = e.target;
for(var value in this.layers){
this.layers[value].layer.removeFrom(map);
}
this.layers[select.value].layer.addTo(map);
});
return this.overlayParent;
},
updateSelectOptions(){
var options = "";
if(this.layers){
for(var value in this.layers){
var layer = this.layers[value];
options += '<option value="'+value+'">'+layer.name+'</option>';
}
}
this.node.innerHTML = options;
},
changeLayerData(layers){
this.layers = layers;
this.updateSelectOptions();
}
});
var oSelect = new L.Control.Select(serviceOverlays,{position : 'topright'}).addTo(map);
The data structure have to be:
var serviceOverlays = {
"cardiology": {name:"Cardiology", layer: cities},
"opthamology": {name:"Opthamology", layer: badCities}
};
Demo: https://jsfiddle.net/falkedesign/1rLntbo5/
You can also change the data dynamicl< with oSelect.changeLayerData(serviceOverlays2)
I am trying to plot the following sample data using a LineChart with a CategoryFilter to filter on year.
Data table is defined as:
aggData: [Date: date][Team: string][Score: number]
From the aggData table I dynamically calculate the default hAxis ticks as
var hAxisTicks = [];
var dateRange = aggData.getColumnRange(0);
for (var date = dateRange.min; date <= dateRange.max; date = new Date(date.getFullYear(), date.getMonth() + 1)) {
hAxisTicks.push(date);
}
The year picker and the line chart are configured as:
var yearPicker = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'categoryFilter_div',
options: {
filterColumnIndex: 0,
ui: {
allowTyping: false,
allowMultiple: false,
label: 'Year:',
labelStacking: 'vertical'
},
useFormattedValue: true
}
});
var lineChart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div',
options: {
width: 900,
height: 500,
hAxis: {
format: 'MMM', ticks: hAxisTicks
}
}
});
I added the following event listener
google.visualization.events.addListener(yearPicker, 'statechange', function () {
google.visualization.events.addOneTimeListener(lineChart, 'ready', getTicks);
});
I need to create/recreate the hAxis ticks everytime the yearPicker changes by calling getTicks
function getTicks() {
var ticks = [];
if (yearPicker.getState().selectedValues.length > 0) {
for (var i = 0; i <= hAxisTicks.length; i = i + 1) {
var date = new Date(hAxisTicks[i]);
if (date.getFullYear() == yearPicker.getState().selectedValues[0]) {
ticks.push(date)
}
}
}
else {
for (var i = 0; i <= hAxisTicks.length; i = i + 1) {
var date = new Date(hAxisTicks[i]);
ticks.push(date);
}
lineChart.setOption('hAxis.ticks', ticks);
lineChart.draw();
}
lineChart.setOption('hAxis.ticks', ticks);
lineChart.draw();
}
Here's what happens at different stages
1- When page first loads the graph looks like (the getTicks function is NOT called) which is correct:
2- When the year is changed to 2019, for example, the hAxis ticks get recalculated (the getTicks function is does get called) and the graph appears to be correct
3- Attempting to go back to the default chart to display all years, an a.getTime is not a function error message appears under the CategoryFilter
4- Any subsequent attempts to change the CategoryFilter to any value throws a ```One or more participants failed to draw()
How can I rectify this behavior?
I realized my iteration over the hAxisTics array was incorrect. I should stop at < hAxisTics.length instead of <= hAxisTics.length and I should recalculate inside the event handler
google.visualization.events.addListener(yearPicker, 'statechange', function () {
var ticks = [];
if (yearPicker.getState().selectedValues.length > 0) {
for (var i = 0; i < hAxisTicks.length; i = i + 1) {
var date = new Date(hAxisTicks[i]);
if (date.getFullYear() == yearPicker.getState().selectedValues[0]) {
ticks.push(date)
}
}
}
else {
for (var i = 0; i < hAxisTicks.length; i = i + 1) {
var date = new Date(hAxisTicks[i]);
ticks.push(date);
}
lineChart.setOption('hAxis.ticks', ticks);
lineChart.draw();
}
lineChart.setOption('hAxis.ticks', ticks);
lineChart.draw();
});
I am doing adding/delete of the panel section container in openui5. While deleting the selected panel container I can able to do it. But after the deletion of container and again adding the new container I am getting the error of "adding element with duplicate id txn_1". How to fix this issue?
I am using the below code:
var Iconadd = new sap.ui.commons.Button({ //add container code
text : "ADD",
width:"65px",
icon : "sap-icon://add",
press : function() {
var len=$('#panelcontainer .sapUiPanel').length;
//alert("len"+len);
Createnewtransaction(len+1);
//alert(""+len);
//var content=$("#panelcontainer").html();
//$("#panelcontainer").append(content);
//var length=$('#panelcontainer').length;
// alert(""+length);
}
});
Createnewtransaction(1);//onload defaultly one conatiner should show
function Createnewtransaction(len){ //panel code and delete container code
//alert("in"+len);
var oPanel3 = new sap.ui.commons.Panel("txn_"+len,{width: "100%", showCollapseIcon: false});
oPanel3.setAreaDesign(sap.ui.commons.enums.AreaDesign.Fill);
oPanel3.setBorderDesign(sap.ui.commons.enums.BorderDesign.None);
oPanel3.setTitle(new sap.ui.core.Title({text:"Transaction Details"}));
//oPanel3.setTitle(new sap.ui.core.Title({text:"Transaction Details"}));
var oMatrix3 = new sap.ui.commons.layout.MatrixLayout({ width: '600px', columns: 8,width:"auto"});
//oMatrix3.setWidths('150px', '200px','200px','170px','200px');
oMatrix3.setWidths('150px','200px','200px','170px','200px','210px');
oMatrix3.setLayoutFixed(true);
var oLabelmaterial = new sap.ui.commons.Label({text: 'Material:*'});
var oCustomserachmaterial = new sap.ui.commons.TextField({value: '', width: '88%'},{
enabled:true,
change:function(){
}
});
oLabelmaterial.setLabelFor(oCustomserachmaterial);
var oLabelinvoice = new sap.ui.commons.Label({text: 'Invoice Number:'});
var oLabelText = new sap.ui.commons.TextField({value: '', width: '100%'});
oLabelinvoice.setLabelFor(oLabelText);
var oLabelInvoicedate = new sap.ui.commons.Label({text: 'Invoice Date:*'});
// create a simple DatePicker
var oDatePicker1 = new sap.ui.commons.DatePicker('');
oDatePicker1.setWidth("170px");
// oDatePicker1.setYyyymmdd("20100101");
oDatePicker1.setLocale("en-US"); // Try with "de" or "fr" instead!
oDatePicker1.attachChange(
function(oEvent){
if(oEvent.getParameter("invalidValue")){
oEvent.oSource.setValueState(sap.ui.core.ValueState.Error);
}else{
oEvent.oSource.setValueState(sap.ui.core.ValueState.None);
}
}
);
// attach it to some element in the page
//oDatePicker1.placeAt("sample1");
//oMatrix3.createRow(oLabelmaterial,oCustomserachmaterial,oLabelinvoice,oLabelText,oLabelInvoicedate,oDatePicker1,oLabelcurrency,oCustomserachcurrency,oLabelinvoiceline,oLabelInvoicelinetext,oLabelShipmentdate,oDatePicker2,oLabelunits,oCustomserachunits,oLabelAgreement,oCustomserachagreementnumber);
oMatrix3.createRow(oLabelmaterial,oCustomserachmaterial,oLabelinvoice,oLabelText,oLabelInvoicedate,oDatePicker1);
var oLabelcurrency = new sap.ui.commons.Label({text: 'Currency:*'});
var oCustomserachcurrency = new sap.ui.commons.TextField({value: '', width: '88%'});
oLabelcurrency.setLabelFor(oCustomserachcurrency);
var oLabelinvoiceline = new sap.ui.commons.Label({text: 'Invoice Line Number:'});
var oLabelInvoicelinetext= new sap.ui.commons.TextField({value: '', width: '100%'});
oLabelinvoiceline.setLabelFor(oLabelInvoicelinetext);
var oLabelShipmentdate = new sap.ui.commons.Label({text: 'Shipment Date:'});
// create a simple DatePicker
var oDatePicker2 = new sap.ui.commons.DatePicker('');
oDatePicker2.setWidth("170px");
// oDatePicker1.setYyyymmdd("20100101");
oDatePicker2.setLocale("en-US"); // Try with "de" or "fr" instead!
oDatePicker2.attachChange(
function(oEvent){
if(oEvent.getParameter("invalidValue")){
oEvent.oSource.setValueState(sap.ui.core.ValueState.Error);
}else{
oEvent.oSource.setValueState(sap.ui.core.ValueState.None);
}
}
);
oMatrix3.createRow(oLabelcurrency,oCustomserachcurrency,oLabelinvoiceline,oLabelInvoicelinetext,oLabelShipmentdate,oDatePicker2);
var oImage = new sap.ui.commons.Image();
oImage.setSrc("icon:image/required_field_icon.png");
oImage.setAlt("alternative image text for image");
var oLabelunits = new sap.ui.commons.Label({text: 'Units:*'});
var oCustomserachunits= new sap.ui.commons.TextField({value: '', width: '88%'});
oLabelunits.setLabelFor(oCustomserachunits);
var oLabelAgreement = new sap.ui.commons.Label({text: 'Agreement Number:'});
var oLabelagreement = new sap.ui.commons.TextField({value: '', width: '100%'});
oLabelAgreement.setLabelFor(oLabelagreement);
//Create Search Field for Custom column search
/* var oCustomserachagreementnumber = new sap.ui.commons.SearchField("s9",{
enableListSuggest:false,
placeholder:"Search",
width:"170px",
serach:function(oEvent){
}
});*/
var oLabelnone = new sap.ui.commons.Label({text: ''});
var oLabelnone1 = new sap.ui.commons.Label({text: ''});
var deletebton=new sap.ui.commons.Button({
text:"Delete",
width:"70px",
icon:"sap-icon://delete",
//lite:true,
press:function(oEvent){
if(!oPanel3.getCollapsed()){
oPanel3.setCollapsed(false);
}else{
oPanel3.setCollapsed(false);
}
var len=$('#panelcontainer .sapUiPanel').length;
// var headlen=$('#panelcontainer .sapUiPanel .sapUiPanelHdr').length;
// alert(len);
var selected=oPanel3.getId();
// $('#panelcontainer .sapUiPanel').not( "#txn_1" ).remove();
if(len==1){
$("#"+selected).not("#txn_1").remove();
}else{
$("#"+selected).remove();
}
var splitdata=selected.split('_');
var delposition=parseInt(splitdata[1]);
// alert(delposition);
$('#panelcontainer .sapUiPanel').each(function(i, obj) {
//alert("i22"+i);
var i=i+1;
if(delposition >= i )
{
var newid=splitdata[0]+"_"+i;
$(this).attr("id", newid);
$(this).attr("data-sap-ui", newid);
$(this).attr("aria-labelledby",newid+"-title");
$(this).attr("aria-describedby",newid+"-acc");
}
});
$('#panelcontainer .sapUiPanel .sapUiPanelHdr').each(function(i, obj) {
//alert("i22"+i);
var i=i+1;
if(delposition >= i )
{
var newid=splitdata[0]+"_"+i;
$(this).attr("id",newid+"-hdr");
}
});
$('#panelcontainer .sapUiPanel .sapUiPanelHdr .sapUiPanelTitle').each(function(i, obj) {
//alert("i22"+i);
var i=i+1;
if(delposition >= i )
{
var newid=splitdata[0]+"_"+i;
$(this).attr("id",newid+"-title");
}
});
$('#panelcontainer .sapUiPanel .sapUiPanelHdr .sapUiPanelTb ').each(function(i, obj) {
//alert("i22"+i);
var i=i+1;
if(delposition >= i )
{
var newid=splitdata[0]+"_"+i;
$(this).attr("id",newid+"-tb");
}
});
$('#panelcontainer .sapUiPanel .sapUiPanelCont').each(function(i, obj) {
//alert("i22"+i);
var i=i+1;
if(delposition >= i )
{
var newid=splitdata[0]+"_"+i;
$(this).attr("id",newid+"-cont");
}
});
/*for(i;i<len;i++){
var newid=splitdata[0]+"_"+i;
var j = i+1;
var oldID = splitdata[0]+"_"+j;
$("#"+oldID).css({"border-color":"red","border-width":"1px","border-style":"solid"});
$("#"+selected).attr("id",newid);
}*/
//$(this).parent().remove();
// dispAlert() ;
}
}).addStyleClass("datacheck");
//deletebton.addStyleClass("deletedata");
//oPanel3.addButton(deletebton);
oPanel3.onAfterRendering = function() {
if (sap.ui.commons.Panel.prototype.onAfterRendering) {
sap.ui.commons.Panel.prototype.onAfterRendering.apply(this, arguments);
}
var $this = this.$();
var span = $this.find('.sapUiPanelIco');
span.detach();
$this.find('.sapUiPanelHdr').append(span);
};
oMatrix3.createRow(oLabelunits,oCustomserachunits,oLabelAgreement,oLabelagreement,oLabelnone,deletebton);
oPanel3.addContent(oMatrix3);
oPanel3.placeAt("panelcontainer");
}
It's quite clear that you get errors. SAPUI5 offers controls with a powerful API on top of jQuery, including DOM manipulation. If I understand your source code correctly your are manipulationg the DOM by yourself, but you should do this via the API. Please check the documentation for the Panel, there is a method to safely remove content. And please provide well formatted coding examples in future, this is just a mess and only are few people will be helping you through this mess.
I have a listbox with several listitems, I post one for example:
var listboxChooseColumns = new sap.ui.commons.ListBox("chooseColumns", {
allowMultiSelect: true,
items: [
nameItem,
new sap.ui.core.ListItem({
text: "Functional Location",
test: "lastName"
})
]
})
The listitems from one box can be moved to another one:
var moveAllToTableColumn = new sap.ui.commons.Button({
press: function() {
//var selectedItems = listboxChooseColumns.getSelectedItems();
var selectedItems = listboxChooseColumns.getItems();
for (var i=0; i<selectedItems.length;i++) {
var listItem = selectedItems[i];
listBoxChosenColumns.addItem(listItem);
}
}
});
If I want to bring the item back from the second list to the first one, the item goes to the end of the list, not in its initial position.
var moveFromTableColumn = new sap.ui.commons.Button({
press: function(){
var selectedItems = listBoxChosenColumns.getSelectedItems();
for (var i=0; i<selectedItems.length;i++) {
var listItem = selectedItems[i];
listBoxChosenColumns.removeItem(listItem);
listboxChooseColumns.addItem(listItem);
}
}
});
How can I return item from the second list to the first list into initial position?
Instead of addItem(), consider using insertItem(oItem, iIndex) which allows you to position the item being inserted (e.g. at the top, if you specify 0 for iIndex):
listboxChooseColumns.insertItem(listItem, 0);
So i have a dynamic tableview.
when i click on one of the rows i got a new screen. It works, but on the top left the back button shows the title of the current window, so i have to click min 2 times on, to get back to the tableviews tab. Any idea why?
var win = Titanium.UI.currentWindow;
Titanium.include('strip_tags.js');
var tab = Titanium.UI.currentTab;
var tableView = Titanium.UI.createTableView({top:43,
separatorStyle: 'none',
backgroundColor:'transparent'});
win.add(tableView);
Ti.UI.currentWindow.addEventListener('focus', function() {
loadTweets();
});
function loadTweets()
{
var rowData = [];
var loader = Titanium.Network.createHTTPClient();
loader.open("GET","url", true);
loader.onload = function()
{
var tweets =JSON.parse(this.responseText);
for (var i = 0; i < tweets.length; i++)
{
var id = tweets[i].id;
var title = tweets[i].name; // The tweet message
var special=tweets[i].special;
if(special>0) {
var price=tweets[i].special;
var color2='#4C6B22';
} else {
var color2='#fff';
var price=tweets[i].price;
}
var thumb = tweets[i].thumb; // The profile image
title=title.replace('®', '');
title=title.replace('™', '');
var row = Titanium.UI.createTableViewRow({height:'auto',top:20 , backgroundImage:Ti.Filesystem.resourcesDirectory + '/images/row_bg.png', borderWidth:0, separatorStyle: 'none'});
var post_view = Titanium.UI.createView({
height:'auto',
layout:'vertical',
top:0,
right:5,
bottom:0,
left:5,
borderWidth:0,
height:49
});
var av_thumb = Titanium.UI.createImageView({
url:thumb, // the image for the image view
top:0,
left:0,
height:48,
width:48
});
post_view.add(av_thumb);
var av_title = Titanium.UI.createLabel({
text:title,
left:54,
width:210,
top:-30,
bottom:2,
height:16,
textAlign:'left',
color:'#fff',
font:{fontFamily:'Trebuchet MS',fontSize:14,fontWeight:'bold'}
});
post_view.add(av_title);
var av_desc = Titanium.UI.createLabel({
text:special,
left:270,
top:-20,
color:'#fff',
bottom:2,
height:'auto',
width:236,
textAlign:'left',
font:{fontSize:14}
});
post_view.add(av_desc);
row.add(post_view);
row.className = "item"+i;
row.thisTitle = title;
row.thisId = id;
rowData[i] = row;
}
var winCount = Titanium.UI.createLabel({
text:tweets.length+' blalba',
height:43,
top:0,
left:0,
width:320,
height:50,
textAlign:'center',
color:'#fff',
backgroundImage:Ti.Filesystem.resourcesDirectory + '/images/row_bg.png',
font:{fontFamily:'Trebuchet MS',fontSize:14,fontWeight:'bold'}
});
win.add(winCount);
tableView.setData(rowData);
tableView.addEventListener('click', function(e){
var w2 = Titanium.UI.createWindow({
title:e.rowData.thisTitle,
url:'cikk.js',
barColor:'#000',
backgroundImage:Ti.Filesystem.resourcesDirectory + '/images/winbg.png'
});
w2.stringProp1 = strip_tags(e.rowData.thisId);
tab.open(w2, {
animated:true
});
}
)};
loader.send();
}
my hunch is the that the eventListener focus is getting called twice and that is causing the tweets to get loaded twice which then cause the tableView eventListener to get loaded twice.
if you are going to use focus to add the eventListener, then I would suggest using blur to remove the eventListener.