@Sivarama_Saimadhav_72
 

To achieve the requirement of restricting the available hours in the DateTime control based on an admin-configured time frame (e.g., 8:00 AM to 5:00 PM), the implementation approach depends on whether your application is built using UI Kit, Theme Cosmos, or Constellation runtime.

UI Kit / Theme Cosmos (Section-based UI)

If your application is based on UI Kit or Theme Cosmos, this can be achieved by creating a custom DateTime control using:
✅ JS-based customization for restricting the time options dynamically
✅ A custom control rule where only the allowed hours are populated in the dropdown

Steps to Implement (Theme Cosmos / UI Kit)

1. Create a custom DateTime control using a non-auto-generated section.
2. Use JS or Pega's pzpega_ui_timePicker API to dynamically filter time values based on the admin's configured range.
3. Set up a Data Page (D_AdminTimeConfig) to fetch the admin-configured start and end times.
4. Restrict the dropdown values using JS/jQuery in the control rule.

Constellation (React-based Architecture)

If your application is built on Constellation runtime, a custom DX component is the recommended approach. Since Constellation does not allow direct customization of OOTB controls, we can:
✅ Develop a new DX component using React
✅ Use Pega’s DX API to fetch the admin-configured time range dynamically
✅ Render a controlled < select> dropdown with only the allowed time values

Steps to Implement (Constellation)

1. Create a custom DX component.
2. Fetch the allowed time range from a Data Page (D_AdminTimeConfig) via DX API.
3. Restrict the dropdown values using a controlled <select> element in React.
4. Configure the new component for the view from the App studio.

Next Steps

1. Can you confirm whether your application is based on UI Kit, Theme Cosmos, or Constellation?
2. Based on your application type, I can provide a more detailed implementation approach.