To access a custom profile property from within a widget, you first create a widget-level observable in the widget’s JavaScript file and then assign a value to that observable after retrieving it from the dynamicProperties
array. In the following example, we assume that two custom profile properties have been created, age
and nickname
.
// Create the widget-level observables age : ko.observable(), nickname : ko.observable(), // Iterate over the dynamicProperties array and assign the value of the property // with id = age to the age observable. Repeat for id = nickname. for (var i=0; i< widget.user().dynamicProperties().length; i++){ if (widget.user().dynamicProperties()[i].id() == 'age') { widget.age(widget.user().dynamicProperties()[i].value()); } else if (widget.user().dynamicProperties()[i].id() == 'nickname') { widget.nickname(widget.user().dynamicProperties()[i].value()); } }
At this point, you can bind the widget-level observables to UI components defined in the widget’s template. For example, this code snippet binds the age
and nickname
observables to text boxes in the widget’s UI.
<div id="dyn-prop"> <b>Age:</b><input type="text" name="age" id="CC-dyn-prop-age" aria-required="true" data-bind="value: age" ><br> <b>Nickname:</b><input type="text" name="nickname" id="CC-dyn-prop-nickname" aria-required="true" data-bind="value: nickname" ><br> </div>
This code results in a UI that displays two text boxes that have the labels Age and Nickname and are populated with the current values of the age
and nickname
observables.