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>
