I have dynamically attached live search event for my Multi Input control (please refer the below code). Even after attaching the .bindAggregation function for suggestionItems, the suggestion popup doesn't appear.
onAfterRendering: function(oEvent){
var that = this;
var oFacetFilters = sap.ui.getCore().byId
("xyzID").getContent()[0].getContent();
var oCapTreeFilter = oFacetFilters[6].getContent()[1];
oCapTreeFilter.attachLiveChange(function(oEvt){
//build filter array
var aFilter = [];
var sQuery = oEvt.getParameter("value");
if (sQuery) {
aFilter.push(new sap.ui.model.Filter("RootID",
sap.ui.model.FilterOperator.Contains, sQuery));
}
that.oModel.read("/RootName", {
async : false,
filters : aFilter,
success : function(oData, response){
var oJSONModel = new sap.ui.model.json.JSONModel();
oJSONModel.setData(oData);
oCapTreeFilter.setModel(oJSONModel);
oCapTreeFilter.bindAggregation("suggestionItems",{
path: "/results",
template: new sap.ui.core.Item({text: "{RootID}"})
});
},
error : function(response){
sap.m.MessageBox.show("Error occurred");
}
});
});
Related
I am trying to upload a file using the FileUploader module in SAPUI5. The code I am trying to follow is from a blog https://blogs.sap.com/2016/11/08/step-by-step-on-how-to-use-the-sapui5-file-upload-feature/ however the code does not seem to execute the reader.onload function? It gets to reader.readAsDataURL(file) and dose not do anything? I am not sure where the problem lies and how to get it to work? Hekp will be much appreciated, there is a similar issue in the blog response but no help has been given.
XML
<u:FileUploader
id="VRCFileUploader"
value="{VRCFileUpload}"
placeholder="Please Attach document"
fileType="jpg,png,pdf"
style="Emphasized"
useMultipart="false" >
</u:FileUploader>
JS
function upload(evnt) {
var token;
var oView = this.getView();
var oFileUploader = this.byId("VRCFileUploader");
var sFileName = oFileUploader.getValue();
if (sFileName === "") {
sap.m.MessageToast.show("Please select a File to Upload");
return;
}
var file = jQuery.sap.domById(oFileUploader.getId() + "-fu").files[0];
var base64_marker = "data:" + file.type + ";base64,";
var reader = new FileReader();
//on load
reader.onLoad = (function(theFile){
return function(evt) {
//locate base64 content
var base64Index = evt.target.result.indexOf(base64_marker) + base64_marker.lenght;
// get base64 content
var base64 = evt.target.result.substring(base64Index);
var sTasksService = "SOME URL";
var sService2 = "SOME URL";
var oViewModel = oView.getModel();
var oContext = oView.getBindingContext();
var oTask = oViewModel.getProperty(oContext.getPath());
var oDataModel = sap.ui.getCore.getModel();
var sWorkitemId = JSON.stringify(oTask.wiId);
var service_url = sService2;
$.ajaxsetup({
cache: false
});
jQuery.ajax({
url: service_url,
asyn: false,
datatype: "json",
cache: false,
data: base64,
type: "post",
beforeSend: function(xhr) {
xhr.setRequestHeader("x-csrf-Token", token);
xhr.setRequestHeader("content-Type", file.type);
xhr.setRequestHeader("slug", sFileName);
xhr.setRequestHeader("WorkitemId", oTask.WiId);
},
success: function(odata) {
sap.m.MessageToast.show("file successfully uploaded");
oFileUploader.setValue("");
},
error: function(odata) {
sap.m.MessageToast.show("file Upload error");
}
});
};
})(file);
//Read file
reader.readAsDataURL(file);
}
In reply to Vortex:
Why is there an IIFE on the method being used on the onLoad Property?
Try to do somenthing like this:
reader.onload = event => {
let fileAsDataUrl = event.target.result;
....
};
I have the issue that the pressItem event is triggered twice at smarttable ( sapui5).
The smarttable has type ResponsiveTable.
onAfterRendering : function(){
var tTable = this.byId("LineItemsSmartTable");
var oTable = this.byId("LineItemsSmartTable").getTable();
oTable.setMode(sap.m.ListMode.SingleSelectMaster);
oTable.onAfterRendering = function(){
this.attachItemPress(function(oEvent){ alert( "Pressed" ); });
};
// var fnItemPress = function(){ alert("press2") };
tTable.attachDataReceived(function(){
var aItems = oTable.getItems();
if(aItems.length === 0 ) return;
$.each(aItems, function(oIndex, oItem) {
//oItem.detachPress(fnItemPress);
oItem.setType("Active");
// oItem.attachPress(fnItemPress);
});
});
}
If onAfterRendering is not being called already onInit then reconsider renaming the function oTable.onAfterRendering.
onAfterRendering is already called in the controller lifecycle, you could try creating a new function and then calling that in onAfterRendering.
See this answer
onAfterRendering: function() {
this.tableItems();
},
tableItems: function() {
var tTable = this.byId("LineItemsSmartTable");
var oTable = this.byId("LineItemsSmartTable").getTable();
oTable.setMode(sap.m.ListMode.SingleSelectMaster);
oTable.attachItemPress(function(oEvent) {
alert("Pressed");
});
tTable.attachDataReceived(function() {
var aItems = oTable.getItems();
if (aItems.length === 0) return;
$.each(aItems, function(oIndex, oItem) {
oItem.setType("Active");
});
});
}
I have an SAPUI5 application deployed on my portal.
I am trying get the user login logged on portal in my SAPUI5.
But when I run my application it is not get any data.
Bellow is my code
sap.ui.define([
'jquery.sap.global',
'sap/ui/core/Fragment',
'sap/ui/core/mvc/Controller',
'sap/ui/model/Filter',
'sap/ui/model/json/JSONModel'
], function(jQuery, Fragment, Controller, Filter, JSONModel) {
"use strict";
var CController = Controller.extend("sap.m.ZHRUI001.C", {
inputId: '',
valueHelpRequest: function(oController) {
this.inputId = oController.oSource.sId;
var sServiceUrl = "http://<my server host>:<my server port>/sap/bc/ui2/start_up";
var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, true, "user", "password");
var oJsonModel = new sap.ui.model.json.JSONModel();
oModel.read("/?", null, null, true, function(oData, response) {
oJsonModel.setData(oData);
});
sap.ui.getCore().setModel(oJsonModel);
// Handling of both confirm and cancel; clear the filter
var that = this;
var handleClose = function(oEvent) {
var oSelectedItem = oEvent.getParameter("selectedItem");
if (oSelectedItem) {
that.byId(that.inputId).setValue(oSelectedItem.getTitle());
}
oEvent.getSource().getBinding("items").filter([]);
};
// Create a SelectDialog and display it; bind to the same
// model as for the suggested items
if (!this._valueHelpSelectDialog) {
this._valueHelpSelectDialog = new sap.m.SelectDialog("valueHelpSelectDialog", {
title: "{fullName}",
items: {
template: new sap.m.StandardListItem({
title: "{fullName}",
active: true
})
},
search: function(oEvent) {
var sValue = oEvent.getParameter("value");
var oFilter = new sap.ui.model.Filter(
"name",
sap.ui.model.FilterOperator.Contains, sValue
);
oEvent.getSource().getBinding("items").filter([oFilter]);
},
confirm: handleClose,
cancel: handleClose
});
this._valueHelpSelectDialog.setModel(oJsonModel);
} else {
this._valueHelpSelectDialog.setModel(oJsonModel);
}
this._valueHelpSelectDialog.open();
}
});
return CController;
});
From what I'm reading you are speaking of a SAP Portal, I expect you have a 7.3+ version.
I have found the SAP doc you used to find the user, be careful because this is not the code for a SAPUI5 application running on a portal but for one running on a R/3 system, the endpoint /sap/bc/ui2/start_up doesn't exist on a NetWeaver portal.
What you could do is develop a simple REST service (by developping a Servlet) that will send back the user and all the details that you need.
These details can be found in the PortalComponentRequest which holds a IUser object, you can find a sample portal servlet on my Git here :
https://gitlab.com/Almiriad/sap-portal-samples
You simply have to send a GET request to the url
http[s]://youserver:your port/irj/servlet/prt/portal/prtroot/UserServletSample.UserInfoSampleServlet
and you'll get a JSo
{
"user": {
"user-name":"<LASTNAME>, <FIRSTNAME>",
"user-id":"<USER_ID>",
"user-email":"<USER#EMAIL.COM>"
}
}
I hope this will help you.
`
var oUserData;
var y = "/sap/bc/ui2/start_up";
var xmlHttp = null;
xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
oUserData = JSON.parse(xmlHttp.responseText);
}
};
xmlHttp.open("GET", y, false);
xmlHttp.send(null);
`
console oUserData to get login details of that user who logged in.
experts,
I've just started to study sapui5, and right now the thing that bothers me is that I can't get a dropdown menu to be shown, while a button I create together with the drop down menu is displayed.
Here is my view:
createContent : function(oController) {
var aControls = [];
var oButton = new sap.ui.commons.Button({
id : this.createId("MyButton"),
text : "Get response from servlet"
});
oButton.attachPress(oController.getResponse);
aControls.push(oButton);
$.ajax({
url : "GetEmployees",
type : "post",
success : function(response) {
var oEmployeeSelection = new sap.ui.commons.DropdownBox("employee");
oEmployeeSelection.setTooltip("Employee");
oEmployeeSelection.setWidth("300px");
$.each(response, function(index, employee) {
alert("entered selection creation");
var oItem = new sap.ui.core.ListItem("Employee"+index);
oItem.setText(employee);
oEmployeeSelection.addItem(oItem);
alert("processed: "+oItem);
});
alert(oEmployeeSelection);
// Attach the DropdownBox to the page
aControls.push(oEmployeeSelection);
}, // end success call handler
error: function(){
alert("error while building employee select menu");
}
});// end Employee selection
return aControls;
}// end createContent
I do get data from the server, alerts inside the success function shoot, but I see only the button on screen.
What an I doing wrong?
Thanks.
The root cause is that you add the Dropdown box in the service callback method and the aControls is already returned with only oButton inserted before the service callback.
Adjust the code as following will do:
createContent: function(oController) {
var aControls = [];
var oButton = new sap.ui.commons.Button({
id: this.createId("MyButton"),
text: "Get response from servlet"
});
oButton.attachPress(oController.getResponse);
aControls.push(oButton);
//Add dropdown box before your service call
var oEmployeeSelection = new sap.ui.commons.DropdownBox("employee");
oEmployeeSelection.setTooltip("Employee");
oEmployeeSelection.setWidth("300px");
aControls.push(oEmployeeSelection);
$.ajax({
url: "GetEmployees",
type: "post",
success: function(response) {
$.each(response, function(index, employee) {
alert("entered selection creation");
var oItem = new sap.ui.core.ListItem("Employee" + index);
oItem.setText(employee);
oEmployeeSelection.addItem(oItem);
alert("processed: " + oItem);
});
alert(oEmployeeSelection);
}, // end success call handler
error: function() {
alert("error while building employee select menu");
}
}); // end Employee selection
return aControls;
} // end createContent
I'm trying to make a jquery plugin
but it's not working what a'm i doing wrong
(function($){
$.fn.rss({
//pass the options variable to the function
rss: function(options) {
//Set the default values, use comma to separate the settings, example:
var defaults = {
feedUrl: ''
}
var options = $.extend(defaults, options);
return this.each(function() {
var Setting = options;
//code to be inserted here
$.ajax({
type: "GET",
url: Setting.feedUrl,
dataType: "xml",
success: function(xml) {
$(xml).find('channel').each(function(){
$(xml).find('image').each(function(){
var title2 = $(this).find('title').text();
var url2 = $(this).find('link').text();
$('<div class="title"></div>').html(''+title2+'').fadeIn(1000).appendTo('#title');
});
$(xml).find('item').each(function(){
var title = $(this).find('title').text();
var brief = $(this).find('description').text();
var url = $(this).find('link').text();
$('<div class="items"></div>').html('<div class="dis">'+brief+'</div>').fadeIn(1000).appendTo('#blab');
});
});
}
});
});
}
});
})(jQuery)
By writing $.fn.rss(...), you're calling a non-existent function.
You need to create a function by writing
$.fn.rss = function(...) { ... };