Hi Experts,
I am a beginner in Ojet and was doing a course. While in Lecture 44 I am receiving below error while running this.
Could you please let me know where am I going wrong.
Users.html
<div class="oj-hybrid-padding">
<h1>Users</h1>
<div id="pagingControlDemo">
<oj-dialog id="newUserDialog" dialog-title="Add New User">
<div slot="body">
<oj-input-text id="username-input" value="{{userName}}" label-hint="User Name" label-edge="inside">
</oj-input-text>
<br><br>
<oj-input-password id="password" aria-label="oj-input-password component" value="{{userPassword}}">
</oj-input-password>
<br><br>
<oj-input-text id="userdisplayname-input" value="{{userDisplayName}}" label-hint="Display Name"
label-edge="inside"></oj-input-text>
<br><br>
<oj-combobox-one id="combobox1" value="{{userType}}" label-hint="User Type" label-edge="inside"
class="oj-form-control-max-width-md">
<oj-option value="ADMIN">ADMIN</oj-option>
<oj-option value="USER">USER</oj-option>
</oj-combobox-one>
<br>
<oj-checkboxset id="checkboxSetAgreeId" label-hint="Active" label-edge="inside" value="{{userActive}}">
<oj-option value="Y">ACTIVE</oj-option>
</oj-checkboxset>
</div>
<div slot="footer">
<oj-button id="okButton" on-oj-action="[[save]]">Save
<oj-avatar id="savePng" role="img" aria-label="Avatar of Amy Bartlet" size="xxs" initials="AB"
slot="startIcon" src="css/images/ok_24.png">
</oj-button>
<oj-button id="cancelButton" on-oj-action="[[cancel]]">Cancel
<oj-avatar id="savePng" role="img" aria-label="Avatar of Amy Bartlet" size="xxs" initials="AB"
slot="startIcon" src="css/images/cancel_24.png">
</oj-button>
</div>
</oj-dialog>
<oj-button id="buttonOpener1" on-oj-action="[[open]]" chroming="callToAction">
Add New User
<oj-avatar id="jpg" role="img" aria-label="Avatar of Amy Bartlet" size="xxs" initials="AB" slot="startIcon"
src="css/images/add_24.png">
</oj-avatar>
</oj-button>
<oj-table id="table" aria-label="Users Table" data="[[pagingDataProvider]]" columns='[{"headerText": "User Name", "field": "userName"},
{"headerText": "User Display Name", "field": "userDisplayName"},
{"headerText": "User Active", "field": "userActive"},
{"headerText": "User Type", "field": "userType"}]' style="width: 100%;">
<oj-paging-control id="paging" data="[[pagingDataProvider]]" page-size="3" slot="bottom">
</oj-paging-control>
</oj-table>
</div>
<oj-messages id="oj-messages-id" messages="[[messagesDataprovider]]" display="notification"
display-options.category="none" position='{"my":{"vertical" :"top", "horizontal": "end"},
"at": {"vertical": "top", "horizontal": "end"},
"of": "window"}'>
</oj-messages>
</div>
Users.js
define(['require','knockout', 'ojs/ojbootstrap', 'ojs/ojpagingdataproviderview', 'ojs/ojarraydataprovider',
'ojs/ojknockout', 'ojs/ojtable', 'ojs/ojpagingcontrol',
"ojs/ojtable", "ojs/ojknockout", "ojs/ojbutton",
"ojs/ojdialog", "ojs/ojmessages", "ojs/ojinputtext","ojs/ojavatar",'ojs/ojselectcombobox','ojs/ojcheckboxset'],
function (req,ko, Bootstrap, PagingDataProviderView, ArrayDataProvider) {
function UserViewModel() {
this.usersArray = ko.observableArray([]);
this.messagesDataprovider = ko.observableArray([]);
var self = this;
self.userName = ko.observable();
self.userDisplayName = ko.observable();
self.userType = ko.observable('USER');
self.userActive = ko.observable();
self.userPassword = ko.observable();
callGetService('getUsers')
.then((response) => {
this.usersArray(response);
})
.catch((error) => {
console.log("Error while calling Service");
})
this.pagingDataProvider = new PagingDataProviderView(new ArrayDataProvider
(this.usersArray, { idAttribute: 'userName' }));
this.open = function () {
self.userName('');
self.userDisplayName('');
self.userType('USER');
self.userPassword('');
document.getElementById("newUserDialog").open();
}
}
this.cancel = function() {
document.getElementById("newUserDialog").close();
}
this.save = function() {
console.log("User Name : " + self.userName() + " - User Display Name : " + self.userDisplayName());
console.log("User Type : " + self.userType() + " - User Active : " + self.userActive());
if (self.userName() === undefined || self.userPassword() === undefined) {
self.messagesDataprovider.push(
{
severity: "error",
summary: "Error",
detail: "Please enter User Name and Password",
autoTimeout: UTIL.message_timeout,
}
);
}
else {
var input = {
"userName": self.serviceName(),
"userPassword": self.serviceDesc(),
"userDisplayName":self.userDisplayName(),
"userActive": self.userActive(),
"userType": self.userType()
}
callPostServiceReturnString("insertUser", input)
.then((response) => {
if (response === 'Y') {
document.getElementById("newUserDialog").close();
callGetService('getUsers')
.then((response) => {
this.usersArray(response);
})
.catch((error) => {
console.log("Error while calling Service");
})
self.messagesDataprovider.push(
{
severity: "confirmation",
summary: "New User",
detail: "New User Added Successfully",
autoTimeout: UTIL.message_timeout,
}
);
}
else {
self.messagesDataprovider.push(
{
severity: "error",
summary: "Error",
detail: "Error While Inserting User from JET",
autoTimeout: UTIL.message_timeout,
}
);
}
})
.catch((error) => {
console.log("Error while calling the service");
})
}
}
return UserViewModel;
}
);
Please help!
Regards,
Deb