UI Builder: Custom modal not updating record fields using client script/data resource

[ronro2]

Hi!

In servicenow UI Builder I have a problem with updating two fields on a custom table (x_vgll_rail_ticket). My business need is that I have to choose state (either state 6 - resolved or state 8 - closed incomplete) and it is mandatory to leave a comment (close_notes).

I want to be able to do this in a custom modal that has a text field that is synced to close_notes and becomes mandatory + a dropdown with the different statuses synced/mapped as well (as seen in the screenshots below).

The state I've defined like this, under the properties of the dropdown: 

The dropdown is binded to an empty client state param called  'selectedStateValue' as seen in the screenshot above. And the textarea is binded to an empty state param called 'closeNotesValue'. But the data doesn't get passed down, so in other words the modal doesn't do anything. I noticed that the state stays on the default placeholder text ('Choose state'/'Välj status') even though I choose a specific state from the list. 

I have the following client script binded to the Primary button: 

function handler({api, event, helpers, imports}) {
  const recordId = api.state.selectedTicketId;
  const closeNotes = api.state.closeNotesValue;
  const selectedState = api.state.selectedStateValue;

  if (!recordId) {
    helpers.ui.showNotification({
      message: "No record selected.",
      type: "error"
    });
    return;
  }

  if (!closeNotes || closeNotes.trim() === "") {
    helpers.ui.showNotification({
      message: "You must enter a comment.",
      type: "error"
    });
    return;
  }

  if (!selectedState) {
    helpers.ui.showNotification({
      message: "You must select a status.",
      type: "error"
    });
    return;
  }

  api.data.updateRailTicket.execute({
    recordId: recordId,
    fields: {
      state: selectedState,
      close_notes: closeNotes
    }
  });

  helpers.ui.showNotification({
    message: "Ticket updated successfully.",
    type: "success"
  });
}

Here are the primary button properties, which is binded to the client script shown above: 

What could be wrong? The issue today is that the record doesn't get updated. Nothing happens in other words, no matter what state I choose. 

I have a hard time with programming so please show be thoroughly. The script I have now I created with the help of AI. 

Thanks in advance! 

[lauri457]

Not sure if I understood right but I think you are trying to use the state like the ng-model directive in angularjs. It does not work like two-way data binding. UIB is more like react; you have to use an event handler to update the state, not bind the state property to the component value property.

For the select component you need an event handler to update the state parameter when the choice is selected

And similarly to the textbox

Then for your button you would need to create a data resource that handles updates, there is the oob update record data resource that you can execute with the button clicked event. (you might have this but it's not visible in your screenshots, the api calls in the client script look like they might be hallucinations).

The data resource will have event mappings for the operation result which you can use to show error messages/close the modal etc 

From a ux perspective i would instead of ui messages just use the required checkbox for the inputs to make them "mandatory-looking". And bind the state values to the disabled property of the button to make it unsubmittable