CSM Workspace – How to create a modal popup with validation using UI Builder and update form fields?

[AviKadam]

Hi everyone,

I’m currently working on a requirement in CSM Workspace where I want to implement a custom button (UI action) using UI Builder, and I’m looking for the best approach to achieve this.

🔹 Requirement

On the Case form in CSM Workspace:

• Add a button (UI action)
• On click → open a modal popup
• The popup should contain:
  • Notes field (mandatory)
  • Date-Time field (mandatory)
  • Submit button
  • Cancel button

🔹 Validation Requirements

1. Both fields must be mandatory
   → If empty, show error:
   "Both fields are required"
2. Date-Time field validation:
   • Should not allow past dates
   • Only current or future date/time should be allowed
     → If invalid, show error:
     "Only current or future date/time is allowed"
3. The popup should NOT close if validation fails

🔹 Expected Behavior

• On clicking Submit:
  • Validate inputs
  • If valid → update values in the Case form fields:
    • Notes → (target field on form)
    • Date-Time → (target field on form)
  • Close modal after successful update
• On clicking Cancel:
  • Simply close the popup

🔹 What I am trying

I am trying to achieve this using UI Builder, but:

• I am not finding clear documentation or examples
• Not sure how to:
  • Create and trigger a modal properly
  • Handle client-side validation inside UI Builder
  • Bind popup fields to form fields
  • Update record data on submit

🔹 Questions

1. What is the recommended approach to create such a modal in UI Builder?
2. Should this be implemented using:
   • Modal component + client state?
   • Data resource (Glide Ajax / Scripted REST)?
3. How can we:
   • Perform validation before submission?
   • Prevent modal from closing on validation failure?
   • Update the record fields on the form after submit?
4. Are there any reference implementations, documentation, or videos available for this use case?

🔹 Goal

I want a clean, workspace-native solution (no UI Pages/Jelly), fully implemented using UI Builder best practices.

Any guidance, sample implementation, or documentation would be really helpful.

Thanks in advance!

[Dinesh Chilaka]

Hi @AviKadam ,

Those two fields you want to display are present in the form i mean at the table level those 2 fields are present.

Best Regards,

Dinesh

[AviKadam]

Yes I have created 2 new fields of same data type on case table, and those are visible in form aswell

[Dinesh Chilaka]

@AviKadam ,

To deal with modals in workspace,

Refer this article it will provide you the better and recommended approach,

https://www.servicenow.com/community/service-operations-workspace/article-servicenow-workspace-pop-u... 

If my response helped, mark it as helpful and accept the solution.