Skip to Main Content

DevOps, CI/CD and Automation

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

Receiving Uncaught TypeError: self.userName is not a function

User_ZX4B1Aug 6 2021

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.
Screenshot 2021-08-05 at 9.20.41 PM.pngUsers.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

Comments
Post Details
Added on Aug 6 2021
2 comments
510 views