To render custom properties of accounts on your storefront, customize the JavaScript in the Account Details widget to access the dynamicProperties observable array in the Organization 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) {
        },

        beforeAppear: function(page) {
         var widget = this;
         if (widget.user() && widget.user().organizations &&
            widget.user().organizations().length > 0) {
              this.getDynamicPropertyMetadata(widget);
            }
         },

        getDynamicPropertyMetadata: function(widget) {
           var dynamicPropertyMetaInfo =
              DynamicPropertyMetaContainer.getInstance();
           if (dynamicPropertyMetaInfo &&
              dynamicPropertyMetaInfo.dynamicPropertyMetaCache &&
              dynamicPropertyMetaInfo.dynamicPropertyMetaCache.
              hasOwnProperty("organization")) {
                this.dynamicProperties(dynamicPropertyMetaInfo.
                dynamicPropertyMetaCache["organization"]);
            }
          },

         updateDynamicProperties: function() {
           var data = ko.toJS(this.user().organizations()[0]);
              ccRestClient.request("updateOrganization",data,
              this.updateDynamicPropertySuccess.bind(this),
              this.updateDynamicPropertyFailure.bind(this),
              this.user().organizations()[0].id());
           },
           updateDynamicPropertySuccess: function() {
           },
           updateDynamicPropertyFailure: function() {
           }
       }
     }
);

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

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

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