Create a modal with a select box

jkelvynsant
Tera Contributor

Hello, is it possible to create a modal in the portal that includes a select box, to be displayed when a request is rejected?

I tried to create one, but it only accepts text.

 

jkelvynsant_0-1793738873369.png

 

1 REPLY 1

kmohammed
Mega Guru

Hi, yes this is possible - but not with spModal.prompt(), confirm() or alert(). Those built-in variants only support text input or buttons, which is why your modal only accepts text.

 

You need a modal that renders a small custom widget, so the select lives in that widget:

 

1. Create a tiny widget, e.g. Reject Reason, whose body is just a select bound to a model, for example: <select class="form-control" ng-model="c.data.reason" ng-options="o.value as o.label for o in c.data.options"></select> - populate c.data.options in its server script or pass them in as widget input.

2. In the client controller of the widget that shows the Reject button, open it with spModal.open({ title: 'Reject Request', widget: 'reject-reason', widgetInput: { options: [...] }, buttons: [{ label: 'Cancel', cancel: true }, { label: 'Reject Request', primary: true }] }). The promise resolves with the embedded widget's scope/data when the primary button is clicked, so you can read the chosen value from the result instead of free text.

3. Use that returned value in your existing reject logic - update the record state to Rejected and write the selected reason to work notes/comments (or a dedicated rejection reason field if you have one) via your server-side call / GlideRecord update, exactly as you do today with the text.

 

Two small points that match your screenshot: keep the primary/Reject button disabled (or validate on submit) until a reason is actually selected, so an approver cannot reject with an empty reason; and if the same reason list is needed in the platform UI as well, drive the options from a choice list / table rather than hard-coding them in the widget, so both places stay in sync.