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.