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>