
- Post History
- Subscribe to RSS Feed
- Mark as New
- Mark as Read
- Bookmark
- Subscribe
- Printer Friendly Page
- Report Inappropriate Content
05-25-2023 10:01 AM - edited 05-30-2023 02:28 PM
A common user experience is have a modal prompt you for some values which are then saved in a new record when you click "Save".
The UIB "Create Record" data resource is happy to insert that new record, but what if you need to retrieve that newly-created record immediately?
By design UIB discourages mixing queries and mutations. This is intended to avoid all sorts of quirky behavior where a values may be changed and returned in an unknown order, possibly leading to an indeterminate state.
Instead, it's encouraged to use a pattern where you query the database in a single transaction, create data in another transaction, then query again for details.
The trick is knowing which record to retrieve once it's been created. This article will show you how to use the "Operation Succeeded" event on the Create Record data resource to retrieve the newly created record's sys_id and use it to immediately load that record.
Add a "Create Record" data resource
1. In UIB click the little database icon in the bottom left.
2. Click "+Add" next to Data Resources".
3. Search for "Create Record" in the Global application and click "Add".
4. Create Record, unlike other data resources, isn't tied to a specific table and can be reused. For this reason let's rename it from "Create Record 1/create_record_1" to "Create Record" and "create_record" by clicking the little "i" icon after selecting the data resource.
Create a button to insert a new record
In my example I have created a modal to select related business services on an Incident form.
When the user clicks "Save" we will insert a new record into the Impaced Services/CIs (task_cmdb_ci_service) table.
1. Select the button you wish to trigger the event from, in my case "Save".
2. Choose the "Events" tab and under "Button Clicked" choose "+Add Event Handler".
3. Scroll to the bottom and find Create Record > Execute.
4. Select your table, in my case Impacted CIs.
5. Choose "Edit Field Values" and map the values you wish to save to this table. In my case I will be setting the Task to the sys_id of the record I am currently viewing and the Configuration Item to the business service chosen in the modal.
6. Click "Apply" then "Add".
Now when clicking "Save" on the modal it will add a new record to this table.
Finally, find the newly inserted record after save
The last thing we need to do is to get the sys_id of the newly created record after the Create Record data resource succeeds. The way we do this is not from within the Save button's events, but on the events of the Create Record data resource.
1. Create a new debug script to help us inspect the payload of events. Click the "<>" icon in the bottom left in UIB and create a new client script called "Debug Events" and use the following code.
function handler({api : { state}, event, helpers, imports}) {
console.log(event.name, {event, state});
}
It will look like this:
2. Click the "Data" icon and open the list of data resources. Find Create Record, go to the Events tab, click "+Add Event Mapping" and choose "Operation Succeeded".
3. Under "Scripts" select "Debug Event".
4. Save the page and then run it, opening your debugger console. Trigger the save event and look for the event named "DATA_OP_SUCCEEDED".
5. Take a deep breath because you're getting your dotwalking steps in today, but you can drill into the event payload and get the sys_id of the newly created record.
Dotwalk and the new sys_id's value is at this path:
@payload.data.output.data.GlideRecord_Mutation.insert_task_cmdb_ci_service.sys_id.value
6. Add a Client State parameter and use it the store this value by adding the "Update client state parameter" event handler under "Operation Succeeded" event on the Create Record data resource.
7. In my case I have a "Lookup Record" data resource that is pointing to the Impacted CIs table and has its "Record" field bound to the "newImpactedCISysId" state field. When this state value changes the record will be queried.
8. On this data resource use the "Data Fetch Succeeded" event to handle the results by accessing the data property (not the event itself).
In my example I dotwalk to show the name and status of the added business service in an alert.
So, what just happened here?
The new reactive way of interacting with the UI means that we don't do monolithic transactions where we combine queries and mutations and rendering. Instead we break these activities up, but that requires a bit of a shift in how we think.
A series of fortunate events allows you to create a new record, get the sys id, then call a look up data resource to retrieve that new record's values.
Lifecycle of Insert and Retrieve Record
If you already have the data bound it's even easier
In some cases you may be adding the record to a table which is already bound to the screen. E.g. in this case if I had a repeater listing the impacted CIs. In that case it's evern easier--all you have to do is call "Refresh" on that data resource when the new record's On Succeeded event fires!
- 3,977 Views
- Mark as Read
- Mark as New
- Bookmark
- Permalink
- Report Inappropriate Content
Thank you, Jon. This is incredible!
- Mark as Read
- Mark as New
- Bookmark
- Permalink
- Report Inappropriate Content
Hi @Jon G Lind , I'm trying to follow this so that a list button with a popup modal will be able to create a new case in CSM workspace, but then I'm a bit lost on step 4 & 5. Where can I found the debug console? Is it script debugger you are referring to?
And some how I got double record created and I'm not sure why. I have only created a create record event mapping when the modal primary button is clicked (I'm using confirm modal here)
Besides, I'm hoping finally the page will be redirected to the newly created record, not sure if the rest of the steps will do so?
Any help is very much appreciated!
- Mark as Read
- Mark as New
- Bookmark
- Permalink
- Report Inappropriate Content
@ChinchillaMoMo - The debug console is part of the developer tools of your browser (typically pressing F12 will take you there, and then look for the "console" tab.