--- title: Step 4 - Modify Profile Viewer Fields slug: docs/step-4-modify-profile-viewer-fields docTags: createdAt: 2025-01-08T10:29:44.208Z --- Profile viewer is a tool available on DSN front-end UI's to help you tell the story without the need to switch to other interfaces. It is available for website, mobile app, and cx app, as well as while using the customer website. ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/I3KLbqeiEL2PpTFdW6PnT_image.png" size="66" width="748" height="1804" position="center" showCaption="false"} ## How to modify the content of Profile Viewer: You can modify which fields and events the profile viewer displays using your project in DSN. To do that, go to your project and switch to the Profile Viewer tab ![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/nv5FIpNqecA79nSGsoffw_image.png) ## Description of Profile Viewer sections [Profile](docId\:sic7lmiNaJ0DEEJK_lOxg) [Events](docId\:HsLFYC7FSoZt9pOuSDvii) [Offers](docId\:J0sHOvJCFbhIIJ3kLaCLZ) [Debug](docId\:KvGVV6KWswJzmi-5dVqJY) ## Using dynamic values in Profile Viewer fields **You can update the values displayed in profile viewer also using dynamic values.** To access dynamic value in text (eg. Text component's content) use `${selector}` syntax, where selector matches - **\ **property for component that has Path set and no Form ID eg. `${enrollment.selectedPlan}` - *Tip: You can also use the path selector in the Profile Viewer options to refer to some information in Experience Events titles! For example: `${timestamp}` will refer to `entity.timestamp` value of the particular event* - **\ **property for component that have Name set but no Path or Form ID, eg. `${email}` - **formData.\
.\ **for component that has Form ID and Path set, eg. `${formData.registration.name.firstName}` - **formData.\.\ **for component that has Form ID and Name set but no Path, eg. `${formData.registration.email}` - **\ **for AEP Profile Schema attributes, eg. `${person.name.firstName}` The selectors can be used as inputs for the dynamic values formatting functions, e.g. `${formatDate:YOUR_SELECTOR}` will attempt to format the value behind your selector as a date. See [here](docId:0mrMrRce-kwKEB5mIHPSr) for more information on the formatting functions. ###