To set the value of a custom property, your widget must update the dynamicProperties array in the UserViewModel using the current value of the widget-level observable. For example, the code below updates the dynamic property with id=age to the value of the age observable.

for (var i=0; i< widget.user().dynamicProperties().length; i++){
    if (widget.user().dynamicProperties()[i].id() == 'age') {
        widget.user().dynamicProperties()[i].value(widget.age());
            break;
    }
}

To propagate the change in the view model to the server side, the handleUpdateProfile function of the UserViewModel must be called. This function detects modifications in the observables of the UserViewModel and triggers a call to the updateProfile REST endpoint to update the data on the server. Typically, the process of making this call is triggered via clicking a Save button on the page. In the code sample below, taken from the customerProfileDetails.template for the Customer Profile widget, the Save button has a click binding that calls the widget.handleUpdateProfile() method. This method publishes a PubSub event to the USER_PROFILE_UPDATE_SUBMIT topic which, in turn, triggers a call to the handleUpdateProfile() method in the UserViewModel.

<!-- Define the Save and Cancel buttons -->
<button class="cc-button-primary col-sm-2 col-xs-12 pull-right
        cc-customer-profile-button" id="CC-customerProfile-save"
        data-bind="click: handleUpdateProfile,
        event: { mousedown: handleMouseDown, mouseup: handleMouseUp}">
  <span data-bind="widgetLocaleText: 'buttonSave'"></span>
</button>
<button class="cc-button-secondary col-sm-2 col-xs-12 pull-right
        cc-customer-profile-button" id="CC-customerProfile-cancel"
        data-bind="click: handleCancelUpdate,
        event: { mousedown: handleMouseDown, mouseup: handleMouseUp}">
  <span data-bind="widgetLocaleText: 'buttonCancel'"></span>
</button>

Note that the widget.handleUpdateProfile() method is defined in the Customer Profile widget’s customerProfile.js file and it looks like this:

// Handles User profile update
widget.handleUpdateProfile = function () {

  if(widget.isUserProfilePasswordEdited()) {
    widget.user().isPasswordValid();
  }

  // Sends a PubSub message for the update
  $.Topic(PubSub.topicNames.USER_PROFILE_UPDATE_SUBMIT).publishWith(
            widget.user(),
            [{message: "success"}]
  );
};

Copyright © 1997, 2017 Oracle and/or its affiliates. All rights reserved. Legal Notices