Note: The information in this section applies only to rendering custom properties of contacts when accessed on the storefront by delegated administrators. For more general information about rendering custom properties of shopper profiles, see Access custom properties using the UserViewModel.

To render custom properties of contacts on your storefront, customize the JavaScript in the Account Contacts widget to access the dynamicProperties observable array in the delegatedAdminContacts view model. For example:

define(
    //-------------------------------------------------------------------
    // DEPENDENCIES
    //-------------------------------------------------------------------
    ['jquery', 'knockout', 'ccLogger', 'ccRestClient', 'ccConstants',
    'viewModels/dynamicPropertyMetaContainer'],
    //-------------------------------------------------------------------
    // Module definition
    //-------------------------------------------------------------------
    function($, ko, CCLogger, ccRestClient, CCConstants,
      DynamicPropertyMetaContainer) {
      'use strict';
      return {
        dynamicProperties: ko.observableArray(),
        onLoad : function(widget) {
          var self = this;
          widget.listingViewModel= ko.observable();
          widget.listingViewModel(new DelegatedAdminContacts());
        },
        getDynamicPropertyMetadata: function(widget) {
         var dynamicPropertyMetaInfo = DynamicPropertyMetaContainer.getInstance();
           if (dynamicPropertyMetaInfo &&
           dynamicPropertyMetaInfo.dynamicPropertyMetaCache &&
           dynamicPropertyMetaInfo.dynamicPropertyMetaCache.
           hasOwnProperty("user")) {
             this.dynamicProperties(dynamicPropertyMetaInfo.
           dynamicPropertyMetaCache["user"]);
          }
        },
        beforeAppear: function(page) {
         var widget = this;
         if (widget.listingViewModel&&
           widget.listingViewModel().dynamicPropertyMetaInfo &&
           widget.listingViewModel().dynamicPropertyMetaInfo.
           dynamicPropertyMetaCache && widget.listingViewModel().
           dynamicPropertyMetaInfo.dynamicPropertyMetaCache.
           hasOwnProperty(CCConstants.ENDPOINT_SHOPPER_TYPE_PARAM)) {
             this.getDynamicPropertyMetadata();
         }
        },

       koToJS: function() {
         var widget = this;
         var data = {};

         for(var i =0; i < widget.dynamicProperties().length; i++) {
           data[widget.dynamicProperties()[i].id()] =
           widget.listingViewModel()[this.dynamicProperties()[i].id()]();
         }
         widget.isDelegatedAdminFormEdited = true;
         return data;
       },
    }
  }
);

Modify the widget’s template file to include Knockout bindings similar to the following:

<div id="CC-contact-dynamic-property">
  <!-- ko foreach: dynamicProperties -->
    <label data-bind="attr: {id: 'CC-label-contact-dynamicProperty-'+id()},
      text: label">
    </label>
    <input data-bind="attr: {id: 'CC-edit-contact-dynamicProperty-'+id(),
      type: uiEditorType, required: required},
      value: $parent.listingViewModel()[id()]">
    <br>
  <!--/ko-->
</div>