How to use the Form component

[Marc Mouries]

Add the Form component to the Page

1. Drag and drop the Form component on your page. 

Add a "Glide Form" data resource

1. Go to Data Resources ( icon database on the left toolbar)
2. Click +Add
3. Search for "glide form"
4. In the section, "@servicenow/now-record-form-connected", select "Glide Form"
5. Click Add 

 

Configure the data resource

1. Set the following values:
2. Table: User (sys_user) 
3. Sys Id:
4. 1. Set the value to "-1" if you want to create a new record
   2. Set the value dynamically by referencing a page variable
   3. As an example, we'll set the value to "62826bf03710200044e0bfc8bcbe5df1"

 

 

Configure the Form component

1. Select your form component
2. Go to the component configuration panel and set the following values: (when the value starts with '@', click the dynamic data binding icon first)
3. 1. Sections: @data.glide_form_1.nowRecordFormBlob.sections
   2. Fields: @data.glide_form_1.nowRecordFormBlob.fields
   3. Table: <your table>. Ex: "User (sys_user)"
   4. SysId : @data.glide_form_1.nowRecordFormBlob.sysId

Add a Save button

1. Add a button "Save"
2. Select the button, go to the Events configuration panel
3. Set the click event to Glide Form > Save

And here you have a Form ready to be used.

[Ketan Mittal]

Thanks Marc. This was helpful. However, now I am getting all the fields available for the user in the user table. How do I restrict it to show only : Email/User ID/Timezone/Mobile phone etc.

[Marc Mouries]

Create a custom view in the user table with the fields you need and set the name of the view in the data resource. As you can see in the screenshot below, by specifying the view "ITIL", the form shows different fields.

[Velma]

Thanks, @Marc Mouries. This was helpful. However, my Save button won't save. In the console I get an info message: "(g_form) [NOACTION] Could not find UI Action: sysverb_ws_save". Form saves fine in Platform mode. Any thoughts on what field types the UI Builder form object doesn't support (my first attempt with this control), or what to look for related to this? I will try with a form that has just a few fields when I get a chance and see if that works--but I'm afraid I'll be back to changing that list click link to the Platform view. 😞 (I have other issues, but this is the first deal-breaker one.)

[Marc Mouries]

@Velma the form widget supports all the field types supported in the classic UI. The error you mention is an error I've seen when using the Service Portal. This example runs in a configurable workspace.  If you can share a screenshot of the issue this will help figuring out what might be the issue.

PS: if you want the content useful, click the helpful 👍 link 

[Velma]

(Just back from vacation, thus delay.) No errors, @Marc Mouries, so nothing to screenshot?. It just doesn't save in UI Builder while it does in Platform (I just found that sysverb_ws_save as an info message in the console). I will explore some more and maybe this is the time to see if I can get someone to put in a support ticket for me. I do not know what "This example runs in a configurable workspace." means. I am working in a scoped application in UI Builder. Your message is good news, maybe it is just some small configuration item that is obvious to you and missed by me.

[Velma]

Console screenshot.

[Oleg]

You can add "Action bar" control above or after the form and fill configuration as following:

Actions:	@data.glide_form_1.nowRecordCommonUiactionbar.actionNodes
Declarative action form model:	@data.glide_form_1.nowRecordCommonUiactionbar.daModel
Declarative action contract:	@data.glide_form_1.nowRecordCommonUiactionbar.daClientActionContract

The "Action bar" control should show "Save" and other actions. Try to use it for saving the form.

[Velma]

Thanks, @Marc Mouries, @Oleg. Sorry for cluttering your very helpful post with my problem. I did finally get someone to put in a support ticket for me and support did figure out my no save issue--in the instance I'm working in, UI Action: All -> Table=global -> Form action =true -> Action name = sysverb_ws_save was not Active. After activating it, the Save button I created works and the Action bar Oleg recommended also now has a Save button which works. Perhaps that is a very non-standard issue--not sure of the history, but I guess I'll have to follow that through the various deployment steps.

[Vivek Joshi]

Hi @Marc Mouries ,

Thanks for this, it is very helpful.

I have few more questions on it, let's say a field is of type Multi Select choice, why it is not showing the dropdown options and how can we show the related lists.

[Marc Mouries]

@Vivek Joshi to see other fields and the related lists, you simply add them to the form in the Workspace view and they will show up automatically.

[Kumar_Raja]

@Marc Mouries 
How can i retrieve the SysId , 
Lets say,i have used a client Parameter, initiated to -1 and after clicking on save, it has got saved and now the client State parameter should be updated with the sysId, 
for that reason, i need the SysId of the saved record. How can i get the record sysId . 

TIA. 

[Marc Mouries]

@Kumar_Raja  I recommend using the more recent data resource "Create Record" data resource and add an event handler  on the "Operation Succeeded" event and then select "Update Client State Parameter" or use a script to grab the sys id of the new record from the event payload.

[Ainguane]

 Summary

1. Client parameters
2. Data resources: create a record
3. Data resources: look up a single record (optional)
   1. Static Table
   2. Bind Record
   3. Return values
4. Custom Modal
   1. Header: Rich Text HTML
   2. Body: Input, Dropdown, etc
      1.       Input: Event=>Input value set
      2.       Dropdown: Event=>Dropdown selected items set
   3. Footer
      1.       Button
      2.       Events:

•       EXECUTE – Data resource: Create Record 1
  1. Data Binding FOR EXECUTE – Data resource: Create Record 1 FIELDS
     1. Bind all fields to State parameters
        1.       Client states.pre_defined_client_state
     2.       Open or close modal dialog: set to true
     3.       Open or close modal dialog: set to false
  2. Trigger Button
     1. Event Handler
        1.       Button clicked: Open or close modal dialog
        2.       Modal: custom 1