Help in Integration Service catalog Item in UIB

[Thulasidharan]

Hi Everyone, 

We are exploring the adding of the service catalog using UIB to collect the user input and to create the records in the table. We have integrated the catalog item in one of our pages. 

1) Is there any way to create this catalog form dynamically? Like passing the JSON by question and answer structure to load the form dynamically. Is it possible with the current functionality? - We have to use the same page to render different catalog items where the questions/options/text area all are rendered dynamically (either from a JSON or from table records).

2) Also in the below screenshot, When I fill the form and click on submit, the record was not created in the respective table in the backend. Do I need to map any events to it? When I tried to test this catalog in this preview page, the record got created in the table. But it is not working from the UIB which is in the above screenshot

Thanks!

[Shaah]

Step-by-step resolution (diagnose the submit issue + two implementation paths for dynamic catalog forms)

Below is a precise, actionable troubleshooting checklist followed by two production-ready approaches to render catalog items dynamically (JSON-driven) and reliably create the backend records when users submit the form from a UI Builder (Now Experience) page.

I’ll assume you are using the UI Builder (Now Experience) catalog component on a page and that the same catalog item works in the Catalog preview but fails to create records when used in your custom UIB page (per your description). Where I cite ServiceNow community/docs, I’ve attached references for the most important claims and APIs. (ServiceNow)

---

Part A — Immediate troubleshooting checklist (do these in order)

1. Reproduce while capturing browser logs

   • Open Developer Tools → Console + Network.

   • Fill the UIB form and click Submit.

   • Note any JavaScript console errors and look for the HTTP POST(s) that run when Submit is pressed (filter for /api/ or order).

   • If there is no network call on submit, the Submit button is not wired to a submit handler in the UIB context (common). (ServiceNow)

2. Compare the Preview vs UIB behavior

   • In Service Catalog preview the platform uses Service Portal or platform form rendering; UIB uses Now Experience component code. If preview creates records but UIB doesn't, suspect the UIB Catalog Item component limitation or missing event wiring. Community posts describe cases where the Catalog Item component in UI Builder does not fully support all platform behaviors. (ServiceNow)

3. Check the UIB component configuration and events

   • Open the page in UI Builder and select the Catalog Item component.

   • Verify sys_id (the catalog item) is correct and that the component properties show “Submit enabled”.

   • Inspect the Events available for the component — typically there is a Request Generated or similar event. Make sure the page has a wired action for that event (navigation, create record, etc.). Community reports show Request Generated may not fire in some versions — indicating a platform/compatibility issue. (ServiceNow)

4. Check required-field / validation blocking

   • On submit, the platform may silently block creation if required variables aren’t populated or server-side validation fails.

   • Check the Network response body for any 4xx/5xx or validation error messages. If the response shows validation errors, fix the variable names/data types.

5. Check ACLs and table permissions

   • The user or anonymous role used by the UIB page may lack create permission on the target table (e.g., sc_req_item, sc_request, or a custom table). Verify table ACLs for the table you expect to be inserted and test with an admin session to rule out permission blocking.

6. Check Business Rules / Script Includes / Flow Designer

   • Some business rules or synchronous scripts can abort inserts (e.g., current.setAbortAction(true)), or throw errors preventing creation. Look at System Logs > Errors and Transactions for errors triggered at submit time.

7. Server-side logs & Transaction tracing

   • Review System Logs → System Log / Transactions. If a REST API was called, look at the inbound transaction trace to see why record creation failed.

   • If there is a server error, it will appear here and indicate the script/include causing the failure.

8. Workaround test: call the Catalog order API directly

   • From the browser console or Postman, call the Service Catalog order API (example below). If that creates the request, you confirm the issue is on the UIB component wiring rather than catalog configuration. (See Part C for example API usage.) (ServiceNow)

---

Part B — Short term workaround (to get production behavior now)

If you need immediate functionality while you debug or wait on a platform fix:

1. Build a small client action in UIB that calls the Service Catalog REST API

   • Instead of relying on the Catalog Item component submit, create a page action that:

     1. Collects the variables data from your page/state.

     2. Calls the Service Catalog order endpoint (POST /api/sn_sc/servicecatalog/items/{sys_id}/order_now or equivalent) with variables payload.

   • This bypasses the UIB component’s submit wiring and is reliable. (You can implement this in a custom Now Experience component or a data resource + action in UI Builder). (ServiceNow)

2. Alternatively open the catalog item in the platform view

   • If time permits, link the user to the platform view URL for the item (the platform view reliably handles the submit). Community users have used platform view as a fallback when UIB had limitations. (ServiceNow)

---

Part C — Two production approaches to support JSON-driven dynamic forms

Below are two recommended approaches. Pick one according to your road-map, release compatibility, and development resources.

Option 1 — Now Experience (UI Builder) custom component (recommended if you want full control)

When to use: you want a single page that can render any catalog item from JSON or table metadata and can run anywhere in Now Experience.

Architecture & steps

1. Create a custom Now Experience component (React) that accepts:

   • catalog_sys_id (optional)

   • formSchema (JSON describing the fields: type, label, name, options, required)

2. If you have a catalog sys_id and you want to render the exact variables, fetch variable definitions from the catalog tables (see data sources section below).

3. Render a schema-driven form (map types → inputs: text, select, checkbox, MRVS rows).

4. On Submit, call the Service Catalog REST API to place the order (POST to the order endpoint). If you do not want to use the order API, create the RITM and RQ via server script, but the order API is recommended. (ServiceNow)

5. Handle the response (display request number or errors). Emit Request Generated event if needed.

Why this works: you control the submit client code and can adapt to the exact payload the integration expects.

Data sources (how to get variable metadata)

• Variables are available in tables such as sc_item_option, sc_item_option_mtom and related tables. You can read these via the Table API to build your schema. Use the Table API to query the variable definitions for the sc_cat_item (catalog item). (ServiceNow)

Example (pseudo) flow for variables fetch

• GET GET /api/now/table/sc_item_option?sysparm_query=item=<catalog_sys_id>

• Normalize the returned rows into a JSON schema your component can render.

Submit example (pseudo-curl)

# Example — replace {instance} and {sys_id} and include authentication
curl -X POST "https://{instance}.service-now.com/api/sn_sc/servicecatalog/items/{sys_id}/order_now" \
  -H "Accept: application/json" \
  -H "Content-Type: application/json" \
  -u 'user:password' \
  -d '{
    "variables": {
      "short_description": "My request",
      "cost_center": "12345",
      "some_choice": "option_a"
    }
  }'

Use your instance REST API Explorer to confirm the endpoint and payload format for your release. Community posts confirm order_now as the typical endpoint but behavior may vary by release. Test in your instance first. (ServiceNow)

---

Option 2 — Use existing Catalog Item + server action (quicker if you prefer low-code)

When to use: you want to reuse the platform catalog item but only need to present it on multiple pages and don’t want to write a custom Now Experience component.

Steps

1. Keep your catalog item in the catalog; expose its sys_id to the UIB page.

2. In UI Builder, instead of using the OOTB Catalog Item component submit path (which may not fire), create a page action that:

   • Reads the variables the user filled in the UIB form.

   • Calls a tiny scoped Script Include (via a REST API you create) that accepts the variable payload and server-side orders the item using server APIs (Cart APIs or GlideRecord to create request + RITM + map variables).

3. This approach centralizes server logic and avoids client-side cross-scope issues.

Notes

• This server-side route avoids UI Builder client limitations and handles complex server logic, approvals, and variable processing.

---

Part D — Practical diagnosis actions you can run now (copy/paste)

1. Immediate check — does the submit generate network traffic?

   • If no network call: UIB component is not wired. Use Option 1 or Option 2 to implement a direct call.

   • If yes network call: inspect response body and HTTP status. If response shows error or cart-only response, copy the response here and I’ll interpret it.

2. Quick API test from your browser console (Admin)

   • Use the REST API Explorer in your instance (preferred) or a curl from a workstation to call:

     • GET /api/now/table/sc_item_option?sysparm_query=item=<sys_id> — to read variables. (ServiceNow)

     • POST /api/sn_sc/servicecatalog/items/{sys_id}/order_now with a simple variables payload to test ordering. (ServiceNow)

3. If the API POST returns only cart_id (no request number)

   • That may be normal in some releases or instance configs; you may need to follow up by calling the cart API to checkout or check the documentation for your release. Community posts describe variation in responses across releases. (ServiceNow)

4. Check logs for blocked inserts

   • Run a transaction trace for the failed submit time window. Check System Logs / Errors.

---

Part E — Common root causes I’ve seen (and quick fixes)

• UI Builder Catalog Item component does not support some catalog constructs (e.g., complex catalog client scripts or certain variable types) → Fix: custom Now Experience component or server-side API submit. (ServiceNow)

• Submit button shows but no POST occurs → Fix: wire an action or implement explicit submit to order API. (ServiceNow)

• ACL or business rule blocks creation → Fix: test with admin user, review ACLs and server-side scripts.

• Variable names mismatch (client uses wrong variable name) → Fix: fetch sc_item_option rows to confirm variable names and map them exactly. (ServiceNow)

---

Part F — If you want, next steps I’ll deliver for you (pick one)

1. I will produce a ready-to-deploy Now Experience React component (schema-driven) that:

   • Reads a JSON schema or pulls variable metadata via Table API.

   • Renders the form.

   • Submits via the order_now API and displays the request number / errors.

   • (Include server-side proxy example for secure credentials.)

2. Or I will produce a UI Builder low-code example that collects form data and calls a scoped REST endpoint which orders the catalog item server-side.

3. Or I will help debug: you paste the browser console / network POST response from your failing UIB Submit and I’ll interpret it and give an exact fix.

---

Key references

• UI Builder / Catalog Item component behaviour & community issues. (ServiceNow)

• Service Catalog API overview (ServiceNow docs). (ServiceNow)

• Variable metadata stored on sc_item_option / sc_item_option_mtom (how to read variables programmatically). (ServiceNow)

• Community discussion on order_now endpoint variations. (ServiceNow)