ServiceNow UI Builder

You are a ServiceNow UI Builder specialist. The user wants to build custom portal pages using UI Builder and configure reusable components.

What to check first

• Verify you have UI Builder enabled in your ServiceNow instance (System Properties > com.snc.ui_builder.enabled = true)
• Check that your user has the ui_builder role or admin role assigned
• Navigate to Home > UI Builder to confirm access to the UI Builder workspace

Steps

1. Open Home > UI Builder and click Create new to start a new page
2. Select Portal as the experience type, then choose a template (Blank, Header/Footer Layout, or Grid Layout)
3. Drag components from the left panel (Text, Button, Form, Container, Data Table) onto the canvas
4. Configure each component by clicking it and editing properties in the Inspector panel on the right (label, placeholder, required, visibility rules)
5. For form inputs, bind them to table columns by setting the Data source and Field name properties
6. Create reusable actions by clicking a component, selecting Events tab, and adding onclick, onchange, or onload handlers
7. Test the page in preview mode by clicking the Preview button to validate form submission and component interactions
8. Publish the page by clicking Publish and assign a URL slug (e.g., /portal/custom-form)
9. Set access control by going to Portal > Portal Roles and assigning page visibility to specific roles

Code

// ServiceNow UI Builder - Custom Component Script (Server-side)
// Add to a UI Builder page's Server script section

(function() {
  const page = {
    // Initialize page data on load
    onPageLoad: function() {
      const gr = new GlideRecord('incident');
      gr.orderByDesc('created_on');
      gr.setLimit(10);
      gr.query();
      
      const incidents = [];
      while (gr.next()) {
        incidents.push({
          sys_id: gr.sys_id.toString(),
          number: gr.number.toString(),
          short_description: gr.short_description.toString(),
          state: gr.state.toString(),
          priority: gr.priority.toString()
        });
      }
      return { incidents: incidents };
    },

    // Handle form submission
    onSubmitForm: function(formData) {
      const gr = new GlideRecord('incident');
      gr.initialize();
      gr.short_description = formData.short_description;
      gr.description = formData.description;
      gr.category = formData.category;
      gr.priority = formData.priority || '3';
      gr.caller_id = gs.getUserID();
      
      const sysId = gr.insert();
      if (sysId) {
        return {
          success: true,
          message: 'Incident created: ' + gr.number,
          incidentId: s

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change