Error in ODataMetadata.js SAP Hana Cloud - odata

In the app that I am creating I have a home view when the createCaseButton is clicked the createCase view is opened, but when I click to open this view I am getting the following error please see attached image. I can't seem to figure out why it is doing this. Any help would be amazing
Errors in console
Here is my code:
CreateCase controller:
jQuery.sap.require("sap.ui.commons.MessageBox");
sap.ui.controller("casemanagement.CreateCase", {
onInit: function() {
var sOrigin = window.location.protocol + "//" + window.location.hostname
+ (window.location.port ? ":" + window.location.port : "");
var caseTrackerOdataServiceUrl = sOrigin + "/CaseTracker/#/case.svc";
var odataModel = new sap.ui.model.odata.ODataModel(caseTrackerOdataServiceUrl);
odataModel.setCountSupported(false);
this.getView().setModel(odataModel);
},
AddCase : function(aCaseType,aReason,aDateOpened,aEmployee,aDescription,aComment,aAttachment){
if(aCaseType != "" && aReason != "" && aDateOpened != "" && aEmployee != "" && aDescription != "" && aComment != "")
{
var Cases = {};
Cases.caseTypeId = aCaseType;
Cases.reasonId = aReason;
Cases.dateOpened = aDateOpened;
Cases.employeeId = aEmployee;
Cases.description = aDescription;
Cases.comments = aComment;
Cases.stageId = "open"
this.getView().getModel().create("/CreateCase", Cases, null, this.successMsg, this.errorMsg);
Cases = {};
this.router = sap.ui.core.UIComponent.getRouterFor(this);
this.router.navTo("CreateCasePage");
}
else
{
sap.ui.commons.MessageBox.alert("Please fill in all fields before submitting")
}
},
successMsg : function() {
sap.ui.commons.MessageBox.alert("Case has been successfully created");
},
errorMsg : function() {
sap.ui.commons.MessageBox.alert("Error occured when creating the case");
},
CreateCase View:
sap.ui.jsview("casemanagement.CreateCase", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* #memberOf casemanagement.CreateCase.CreateCase
*/
getControllerName : function() {
return "casemanagement.CreateCase";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* #memberOf casemanagement.CreateCase.CreateCase
*/
createContent : function(oController) {
var aPanel = new sap.ui.commons.Panel({width:"810px"});
aPanel.setTitle(new sap.ui.core.Title({text:"Create New Case"}));
var aMatrix = new sap.ui.commons.layout.MatrixLayout({layoutFixed:true, width:"610px",columns:8});
aMatrix.setWidths("110px","100px","100px","300px");
var bMatrix = new sap.ui.commons.layout.MatrixLayout({layoutFixed:true,width:"610px", columns:2});
aMatrix.setWidths("110px","500px");
//first row of fields
var caseTypeLabel = new sap.ui.commons.Label({text:"Case Type"});
var caseTypeInput = new sap.ui.commons.TextField({width:"100%", id:"caseTypeId", value:''});
caseTypeLabel.setLabelFor(caseTypeInput);
aMatrix.createRow(caseTypeLabel,caseTypeInput);
//second row
var reasonLabel = new sap.ui.commons.Label({text:"Reason"});
var reasonInput = new sap.ui.commons.TextField({width:"100%", id:"reasonId", value:''});
reasonLabel.setLabelFor(reasonInput);
aMatrix.createRow(reasonLabel,reasonInput);
//third row
var dateOpenedLabel = new sap.ui.commons.Label({text:"Date Opened"});
var dateOpenedInput = new sap.ui.commons.TextField({widht:"100%", id: "dateOpenedId", value:''});
dateOpenedLabel.setLabelFor(dateOpenedInput);
aMatrix.createRow(dateOpenedLabel,dateOpenedInput)
//fourth row
var employeeLabel = new sap.ui.commons.Label({text:"Employee"});
var employeeIDInput = new sap.ui.commons.TextField({width:"100%", id:"employeeId",value:''});
var employeeNameInput = new sap.ui.commons.TextField({width:"100%"});
aMatrix.createRow(employeeLabel,employeeIDInput,employeeNameInput);
//fifth row
var descriptionLabel = new sap.ui.commons.Label({text:"Description"});
var descriptionInput = new sap.ui.commons.TextField({width:"100%",id:"descriptionId",value:''});
descriptionLabel.setLabelFor(descriptionInput);
aMatrix.createRow(descriptionLabel,descriptionInput)
aPanel.addContent(aMatrix);
var bPanel = new sap.ui.commons.Panel({width:"810px"});
bPanel.setTitle(new sap.ui.core.Title({text:"Actions"}));
bPanel.setCollapsed(false);
var cMatrix = new sap.ui.commons.layout.MatrixLayout({layoutFixed:true,width:"810px",columns:2});
cMatrix.setWidths("110px","700px");
var attachmentLabel = new sap.ui.commons.Label({text:"Attachments"});
var addAttachmentButton = new sap.ui.commons.FileUploader({
uploadUrl : "../../../../../upload",
name: "attachmentUploader",
uploadOnChange: true
});
var commentsLabel = new sap.ui.commons.Label({text:"Comments"});
var commentsInput = new sap.ui.commons.TextField({width:"95%",id:"commentsId",value:''});
var submitButton = new sap.ui.commons.Button({id:"createCaseButtonId",text:"Submit", press : function(){oController.AddCase(
sap.ui.getCore().getControl("caseTypeId").getValue(),
sap.ui.getCore().getControl("reasonId").getValue(),
sap.ui.getCore().getControl("dateOpenedId").getValue(),
sap.ui.getCore().getControl("employeeId").getValue(),
sap.ui.getCore().getControl("descriptionId").getValue(),
sap.ui.getCore().getControl("commentsId").getValue()
)}
});
cMatrix.createRow(attachmentLabel,addAttachmentButton);
cMatrix.createRow(commentsLabel,commentsInput);
cMatrix.createRow(submitButton);
bPanel.addContent(cMatrix);
var container = new sap.ui.layout.VerticalLayout({
content: [aPanel,bPanel]
});
return container;
},
});
Home controller:
sap.ui.controller("casemanagement.Home", {
/**
* Called when a controller is instantiated and its View controls (if
* available) are already created. Can be used to modify the View before it
* is displayed, to bind event handlers and do other one-time
* initialization.
*
* #memberOf casemanagement.Home.Home
*/
// onInit : function() {
//
// },
loadCreateCase : function() {
this.router = sap.ui.core.UIComponent.getRouterFor(this);
this.router.navTo("CreateCasePage");
},
loadSearchCase : function() {
this.router = sap.ui.core.UIComponent.getRouterFor(this);
this.router.navTo("SearchCasePage");
}
Home view:
sap.ui.jsview("casemanagement.Home", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* #memberOf casemanagement.Home.Home
*/
getControllerName : function() {
return "casemanagement.Home";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* #memberOf casemanagement.Home.Home
*/
createContent : function(oController) {
var oPanelButtons = new sap.ui.commons.Panel({width:"600px",position:"center"});
oPanelButtons.setTitle(new sap.ui.core.Title({text:"Case Management"}));
var oMatrix = new sap.ui.commons.layout.MatrixLayout({layoutFixed: true, width:"400px",columns:4, position:"center"});
oMatrix.setWidths("100px","100px","100px","100px");
var createCaseButton = new sap.ui.commons.Button({id:'createId',text:"Create Case",press : function(){oController.loadCreateCase()}});
var searchButton = new sap.ui.commons.Button({text:"Search Cases",press : function(){oController.loadSearchCase()}});
var analyticsButton = new sap.ui.commons.Button({id:'analyticsId',text:"Case Analytics"});
var helpButton = new sap.ui.commons.Button({id:'helpId',text:"Help"});
oMatrix.createRow(createCaseButton,searchButton,analyticsButton,helpButton);
oPanelButtons.addContent(oMatrix);
var oPanelTable = new sap.ui.commons.Panel({width:"600px",position:"center"});
var oTable = new sap.m.Table({
inset: true,
headerText: "Open Cases Pending Your Action",
headerDesign : sap.m.ListHeaderDesign.Standard,
mode: sap.m.ListMode.None,
includeItemInSelection: true
});
oTable.addColumn(new sap.m.Column({
inset : true,
header: new sap.ui.commons.Label({text: "Case#"}),
}));
oTable.addColumn(new sap.m.Column({
inset : true,
header: new sap.ui.commons.Label({text: "Submitted By"}),
}));
oTable.addColumn(new sap.m.Column({
inset : true,
header: new sap.ui.commons.Label({text: "Created On"}),
}));
oTable.addColumn(new sap.m.Column({
inset : true,
header: new sap.ui.commons.Label({text: "Case Type"}),
}));
oPanelTable.addContent(oTable);
var container = new sap.ui.layout.VerticalLayout({
id: "container",
content:[oPanelButtons,oPanelTable]
});
return container;
},
});

Related

How to view a single entry with oModel.read in UI5 Application

I want to display a single entry with oModel.read in my UI5 application and store it in a variable.
What i want to do is, to select a single entry of my Model and store it in a variable:
If i execute my code i get the following in the Browser-Console:
https://ibb.co/FmPNSPm
Here is my code (but is not working):
var hostPort = "";
var oDataPath = "/.../KOMMI_SERVICE/";
var sServiceUrl= hostPort + oDataPath;
var oModel = new sap.ui.model.odata.ODataModel (sServiceUrl, true);
var oJsonModel = new sap.ui.model.json.JSONModel();
var text123;
oModel.read("/Komm(ZSMATERIALTEXT ='"+text123+")",oEntry,null,false,
function(oData, oResponse){
},function(err){
console.log("err");
});
I think that this path "/Komm(ZSMATERIALTEXT ='"+text123+")" is not correct.
You can try using filter. For example:
var sPath = "/Komm";
var oFilter = [
new Filter("ZSMATERIALTEXT", "EQ", text123)
];
oModel.read(sPath, {
filters: oFilter,
success: function (oData, oResponse) {
// save variable
},
error: function (oError) {
// show error
}
});
Try this:
I think you're missing a " ' "...
oModel.read("/Komm(ZSMATERIALTEXT ='"+text123+"')",oEntry,null,false,
function(oData, oResponse){
},function(err){
console.log("err");
});
Or
oModel.read("/Komm", {
filters: [
new sap.ui.model.Filter("ZSMATERIALTEXT", sap.ui.model.FilterOperator.EQ, text123)
],
success: function (oData, oResponse) {
// do some...
},
error: function (oError) {
// error
}
});

Odata table not showing odata records

I can store odata records but this records not display on my ui table.
App.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/MessageToast",
"opensap/myapp/model/formatter",
"opensap/myapp/controller/BaseController",
"sap/ui/Device"
], function(Controller, MessageToast, formatter, BaseController, Device) {
"use strict";
return BaseController.extend("opensap.myapp.controller.App", {
formatter: formatter,
onInit: function() {
// View in temasinin ayarlanmasi
var oView = this.getView();
var oComp = this.getOwnerComponent();
oView.addStyleClass(oComp.getContentDensityClass());
this.getRouter().attachRoutePatternMatched(this._onRouteMatched, this);
//View in modelinin ayarlanamsı
var oViewModel = this.getOwnerComponent().getModel();
this.getView().setModel(oViewModel);
},
_onRouteMatched: function(oEvent) {
var oController = this;
var sRouteName = oEvent.getParameter("name");
var oDataModel = this.getView().getModel();
this._getAllMasrafs();
this._getAllMasrafTips();
},
_getAllMasrafs: function(oEvent) {
var oController = this;
var oDataModel = this.getView().getModel();
oDataModel.read("/GetMasrafSet", {
success: function(resp) {
var oMainModel = oController.getView().getModel("mainModel");
if (resp.results.length > 0) {
oMainModel.setProperty('/MasrafId', resp.results[0].MasrafId);
oMainModel.setProperty('/Tarih', resp.results[0].Tarih);
oMainModel.setProperty('/ProjeTanımı', resp.results[0].ProjeTanımı);
oMainModel.setProperty('/FişNumarası', resp.results[0].FişNumarası);
oMainModel.setProperty('/MasrafTipi', resp.results[0].MasrafTipi);
oMainModel.setProperty('/Tutar', resp.results[0].Tutar);
oMainModel.setProperty('/Para', resp.results[0].Para);
oMainModel.setProperty('/Kilometre', resp.results[0].Kilometre);
oMainModel.setProperty('/Lokasyon', resp.results[0].Lokasyon);
oMainModel.setProperty('/Açıklama', resp.results[0].Açıklama);
}
},
error: function(err) {
}
});
},
_getAllMasrafTips: function(oEvent) {
var oController = this;
var oDataModel = this.getView().getModel();
var oViewModel = this.getOwnerComponent().getModel("app");
oDataModel.read("/GetMasrafTipiSet", {
success: function(resp) {
var oMainModel = oViewModel.getData();
/* oMainModel.setProperty("/TAX", resp.results[0].TAX);
oMainModel.setProperty("/Taksi", resp.results[0].Taksi); */
oMainModel.Masraflar=resp.results;
oViewModel.setData(oMainModel);
},
error: function(err) {
}
});
},
getRouter: function() {
var oComponent = this.getOwnerComponent();
return oComponent.getRouter();
},
});
when i press F12 option and debugging, i can see my arrays store in oMainModel but i can not show the records please help me
Where is my mistake?
Thanks
Cansu Koca
There has to be no "/" in your Table "items" binding:
<Panel headerText="Masraf Listesi" expandable="true" expanded="false" >
<content>
<Button press="_onMasrafListesi" text="Click here to see all Masrafs"/>
<Table id="idMasrafTable" items="{Masraf>Masraflar}" visibleRowCountMode="Auto">

Difficulty with upload csv to knockout js table (ASP MVC)

I've been working with these two tutorials, but am having difficulty merging them together to get an upload csv to populate the table. It most likely is my lack of understanding of the view model.
Here's the tutorial for the knockout js editable table from the knockout js site: KnockoutJS: Editable Grid Table
And here's the tutorial for uploading a csv I'm referencing:
KnockoutJS - Upload CSV
Here's the javascript code I've been working on to upload a csv to my table. I keep getting "JavaScript runtime error: Unable to get property 'push' of undefined or null reference" - I marked in comments the problem spot. As you can see, I'm having trouble with the view model.
<script>
var UserModel = function (users) {
var self = this;
self.users = ko.observableArray(users);
self.addUser = function () {
self.users.push({
id: "",
firstName: "",
lastName: ""
});
};
self.removeUser = function (user) {
self.users.remove(user);
};
self.save = function (form) {
sendData = ko.toJSON(self.users);
$.ajax({
url: '/Users/CreateMultiple',
contentType: 'application/json',
async: true,
type: 'POST',
dataType: 'json',
data: sendData,
error: function (jqXHR, textStatus, errorThrown) {
console.log("FAIL: " + errorThrown);
},
success: function (data, textStatus, jqXHR) {
console.log("SUCCESS");
}
});
};
};
var viewModel = new UserModel([
{ id: "", firstName: "", lastName: "" }
]);
ko.applyBindings(viewModel);
// Activate jQuery Validation
$("form").validate({ submitHandler: viewModel.save });
/////
/////Upload CSV
/////
$('#lnkUpload').click(function () {
var FileToRead = document.getElementById('UserFile');
if (FileToRead.files.length > 0) {
var reader = new FileReader();
reader.onload = Load_CSVData;
reader.readAsText(FileToRead.files.item(0));
}
});
function Load_CSVData(e) {
CSVLines = e.target.result.split(/\r\n|\n/);
$.each(CSVLines, function (i, item) {
var element = item.split(",");
var csvID = (element[0] == undefined) ? "" : element[0].trim();
var csvFirstName = (element[1] == undefined) ? "" : element[1].trim();
var csvLastName = (element[2] == undefined) ? "" : element[2].trim();
UserModel.users.push(new UserModel()//here's my problem
.id(csvID)
.firstName(csvFirstName)
.lastName(csvLastName)
)
});
}
</script>
I was able to identify the fully qualified for the observable array which in turn made it work:
function Load_CSVData(e) {
CSVLines = e.target.result.split(/\r\n|\n/);
$.each(CSVLines, function (i, item) {
var element = item.split(",");
var csvID = (element[0] == undefined) ? "" : element[0].trim();
var csvFirstName = (element[1] == undefined) ? "" : element[1].trim();
var csvLastName = (element[2] == undefined) ? "" : element[2].trim();
viewModel.users.push({
id: csvID,
firstName: csvFirstName,
lastName: csvLastName
});
}

Worker path is not fired error says 404 (Not Found)

Reference doc:- https://github.com/ajaxorg/ace/wiki/Syntax-validation
I added createWorker method to the custom mode according to the above doc, and included the worker-example.js in the same file and called require("ace/config").set("workerPath", "ace/mode") in mode definition
Currently, the workerPath is not being fired, I'm seeing a "GET http://localhost:3000/ace/mode/worker-example.js 404 (Not Found)" error in the console.
Here is my custom code index.html.erb :
define('ace/mode/example-custom', [], function(require, exports, module) {
var oop = require("ace/lib/oop");
var TextMode = require("ace/mode/text").Mode;
var Tokenizer = require("ace/tokenizer").Tokenizer;
var ExampleHighlightRules = require("ace/mode/example_highlight_rules").ExampleHighlightRules;
var WorkerClient = require("ace/worker/worker_client").WorkerClient;
require("ace/config").set("workerPath", "ace/mode");
var Mode = function() {
this.HighlightRules = ExampleHighlightRules;
};
oop.inherits(Mode, TextMode);
(function() {
this.lineCommentStart = "--";
this.blockComment = {start: "->", end: "<-"};
this.createWorker = function(session) {
var worker = new WorkerClient(["ace"], workerpath, "WorkerExample");
worker.attachToDocument(session.getDocument());
console.log("worker", worker);
worker.on("errors", function(e) {
session.setAnnotations(e.data);
});
worker.on("annotate", function(results) {
session.setAnnotations(results.data);
});
worker.on("terminate", function() {
session.clearAnnotations();
});
return worker;
};
define('ace/mode/worker-example', [], function(require, exports, module) {
var oop = require("ace/lib/oop");
var Mirror = require("ace/worker/mirror").Mirror;
var WorkerExample = exports.WorkerExample = function(sender) {
Mirror.call(this, sender);
this.setTimeout(200);
};
oop.inherits(WorkerExample, Mirror);
(function() {
this.onUpdate = function() {
var lines = editor.session.doc.getAllLines();
var errors = [];
for (var i = 0; i < lines.length; i++){
if (/[\w\d{(['"]/.test(lines[i])) {
alert("hello");
errors.push({
row: i,
column: lines[i].length,
text: "Missing Semicolon",
type: "error"
});
}
}
this.sender.emit("annotate", errors);
};
}).call(WorkerExample.prototype);
});

OncellChange Event of Slickgrid

I have a slickgrid with a checkbox column.
I want to capture the row id when the checkbox in the selected row is checked or unchecked.
Attached is the script for slickgrid in my view
I want when user checks the checkbox, active column in database should be set to true and when it is unchecked, Active column should be set to false.
<script type="text/javascript">
//$('input[type="button"]').enabled(false);
var grid;
var columnFilters = {};
var jsonmodel = #Html.Raw(Json.Encode(Model));
//function LoadNewMessagesData(messages) {
var dataView;
var data = [];
////console.log('lena:' + subdata.length);
$.each(jsonmodel, function (idx, spotlight) {
var pd = moment(spotlight.PostedDate);
data.push({ id: spotlight.ID, Department: spotlight.SubSection,Title: spotlight.Title, PostedDate: pd.format('YYYY-MM-DD'), Active: spotlight.Active })
});
var columns = [
{ id: '0', name: "Department", field: "Department", sortable: true},
{ id: '1', name: "Title", field: "Title", sortable: true},
{ id: '2', name: "PostedDate", field: "PostedDate", sortable: true }
];
var checkboxSelector = new Slick.CheckboxSelectColumn({
cssClass: "slick-cell-checkboxsel"
})
columns.push(checkboxSelector.getColumnDefinition());
var options = {
enableCellNavigation: true,
explicitInitialization: true,
enableColumnReorder: false,
multiColumnSort: true,
autoHeight: true,
forceFitColumns: true
};
dataView = new Slick.Data.DataView();
grid = new Slick.Grid("#myGrid", dataView, columns, options);
grid.setSelectionModel(new Slick.RowSelectionModel());
var pager = new Slick.Controls.Pager(dataView, grid, $("#pager"));
grid.registerPlugin(checkboxSelector);
dataView.onRowCountChanged.subscribe(function (e, args) {
grid.updateRowCount();
grid.render();
});
dataView.onRowsChanged.subscribe(function (e, args) {
grid.invalidateRows(args.rows);
console.log('testing');
grid.render();
});
dataView.onPagingInfoChanged.subscribe(function (e, pagingInfo) {
var isLastPage = pagingInfo.pageNum == pagingInfo.totalPages - 1;
var enableAddRow = isLastPage || pagingInfo.pageSize == 0;
var options = grid.getOptions();
if (options.enableAddRow != enableAddRow) {
grid.setOptions({ enableAddRow: enableAddRow });
}
});
var rowIndex;
grid.onCellChange.subscribe(function (e, args) {
console.log('onCellChange');
rowIndex = args.row;
});
if (grid.getActiveCell()) {
}
//onSelectedRowsChanged event, if row number was changed call some function.
grid.onSelectedRowsChanged.subscribe(function (e, args) {
if (grid.getSelectedRows([0])[0] !== rowIndex) {
console.log('onSelectedRowsChanged');
}
});
grid.onSort.subscribe(function (e, args) {
var cols = args.sortCols;
var comparer = function (dataRow1, dataRow2) {
for (var i = 0, l = cols.length; i < l; i++) {
var field = cols[i].sortCol.field;
var sign = cols[i].sortAsc ? 1 : -1;
var value1 = dataRow1[field], value2 = dataRow2[field];
var result = (value1 == value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign;
if (result != 0) {
return result;
}
}
return 0;
}
dataView.sort(comparer, args.sortAsc);
});
grid.init();
dataView.beginUpdate();
dataView.setItems(data);
// dataView.setFilter(filter);
dataView.endUpdate();
//}
function RefreshMessagesGrid() {
//console.log('RefreshMessagesGrid');
//grid.invalidate();
grid.invalidateRows();
// Call render to render them again
grid.render();
grid.resizeCanvas();
}
</script>`enter code here`
Thanks in Advance !!!
You have to bind click event on rows....and get the id of the row whose checkbox is checked/unchecked
function bindClickOnRow() {
if($(this).find('.checkboxClass').attr('checked') == 'checked'){
checked = true;
} else {
checked = false;
}
rowId = $(this).attr('id');
}

Resources