SnowTechStack

Working with JSON is an everyday task for ServiceNow developers, whether you’re building REST APIs, Script Includes, or manipulating payloads in integrations. This custom JSON Formatter UI Page helps format and debug JSON quickly, all within the ServiceNow platform.

---

✅ Why Use a JSON Formatter in ServiceNow?

• Enhance readability of JSON data
• Identify syntax errors easily with line indicators
• Copy formatted JSON effortlessly
• Increase productivity when building or debugging integrations

---

🧰 Features

• 🔢 Line numbers for both input and output areas
• 🧼 “Format JSON” button to prettify raw JSON
• ❌ Error display with approximate line info
• 📋 “Copy” button for formatted JSON
• 🌓 Dark theme for eye comfort

---

🖼️ UI Page Example

This UI page uses standard HTML, CSS, and JavaScript. You can create a new UI Page in ServiceNow and paste the following code into the HTML and Script sections.

---

🧩 HTML and CSS Code (UI Page HTML)

htmlCopyEdit<h1>JSON Formatter Tool</h1>

<style>
  body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-color: #121212;
    color: #e0e0e0;
  }

  .editor-wrapper {
    display: flex;
    border: 1px solid #444;
    background-color: #1e1e1e;
    font-family: monospace;
    height: 400px;
    overflow: hidden;
  }

  .line-numbers {
    background: #2a2a2a;
    padding: 10px;
    color: #666;
    text-align: right;
    user-select: none;
    line-height: 1.2em;
    white-space: pre-wrap;
  }

  #jsonInput, #output {
    flex: 1;
    width: 100%;
    height: 100%;
    border: none;
    padding: 10px;
    font-family: monospace;
    font-size: 14px;
    line-height: 1.2em;
    overflow: auto;
    background-color: #1e1e1e;
    color: #e0e0e0;
  }

  #jsonInput:focus {
    outline: none;
  }

  .output-container {
    margin-top: 20px;
  }

  #error {
    color: #ff6666;
    margin-top: 20px;
  }

  .button-container {
    margin-top: 20px;
  }

  button {
    padding: 10px 20px;
    background-color: #0078D4;
    color: white;
    border: none;
    cursor: pointer;
    font-weight: bold;
    border-radius: 4px;
  }

  #copyButton {
    margin-top: 10px;
    background-color: #0078D4;
  }

  #copyButton:hover {
    background-color: #1e7e34;
  }
</style>

<!-- Input Section -->
<div class="input-container">
  <label for="jsonInput">Enter JSON:</label>
  <div class="editor-wrapper">
    <div class="line-numbers" id="lineNumbers">1</div>
    <textarea id="jsonInput" oninput="updateLineNumbers()" onscroll="syncScroll()"></textarea>
  </div>
</div>

<!-- Format Button -->
<div class="button-container">
  <button onclick="formatJson()">Format JSON</button>
</div>

<!-- Output Section -->
<div class="output-container">
  <h3>Formatted JSON:</h3>
  <div class="editor-wrapper">
    <div class="line-numbers" id="outputLineNumbers">1</div>
    <pre id="output" onscroll="syncOutputScroll()"></pre>
  </div>
  <button id="copyButton" onclick="copyFormattedJson()">Copy Formatted JSON</button>
</div>

<!-- Error Display -->
<div id="error"></div>

---

🧠 Client Script (JavaScript)

Paste this in the Client Script section or include it inline using a <script> tag in the UI Page:

javascriptCopyEditfunction updateLineNumbers() {
  var input = document.getElementById('jsonInput');
  var lineNumbers = document.getElementById('lineNumbers');
  if (!input || !lineNumbers) return;
  var lines = input.value.split('\n').length;
  lineNumbers.textContent = Array.from({ length: lines }, (_, i) => i + 1).join('\n');
}

function syncScroll() {
  var input = document.getElementById('jsonInput');
  var lineNumbers = document.getElementById('lineNumbers');
  if (input && lineNumbers) {
    lineNumbers.scrollTop = input.scrollTop;
  }
}

function updateOutputLineNumbers() {
  var output = document.getElementById('output');
  var outputLineNumbers = document.getElementById('outputLineNumbers');
  if (!output || !outputLineNumbers) return;
  var lines = output.textContent.split('\n').length;
  outputLineNumbers.textContent = Array.from({ length: lines }, (_, i) => i + 1).join('\n');
}

function syncOutputScroll() {
  var output = document.getElementById('output');
  var outputLineNumbers = document.getElementById('outputLineNumbers');
  if (output && outputLineNumbers) {
    outputLineNumbers.scrollTop = output.scrollTop;
  }
}

function formatJson() {
  var input = document.getElementById('jsonInput');
  var output = document.getElementById('output');
  var error = document.getElementById('error');
  try {
    var obj = JSON.parse(input.value);
    var formattedJson = JSON.stringify(obj, null, 2);
    output.textContent = formattedJson;
    error.textContent = '';
  } catch (e) {
    var line = (input.value.substring(0, e.pos || 0).match(/\n/g) || []).length + 1;
    error.textContent = 'Error: ' + e.message + ' (approx. line: ' + line + ')';
    output.textContent = '';
  }
  updateOutputLineNumbers();
}

function copyFormattedJson() {
  var output = document.getElementById('output');
  if (output.textContent.trim() === '') {
    alert('Nothing to copy! Format some JSON first.');
    return;
  }
  navigator.clipboard.writeText(output.textContent).then(
    () => alert('Formatted JSON copied to clipboard!'),
    err => alert('Failed to copy: ' + err)
  );
}

window.onload = function () {
  updateLineNumbers();
  updateOutputLineNumbers();
  var input = document.getElementById('jsonInput');
  if (input) input.addEventListener('scroll', syncScroll);
  var output = document.getElementById('output');
  if (output) output.addEventListener('scroll', syncOutputScroll);
};

---

🚀 How to Deploy in ServiceNow

1. Navigate to System UI > UI Pages
2. Click New
3. Name your page: json_formatter_ui
4. Paste the HTML into the HTML field
5. Paste the JavaScript into the Client Script section
6. Save and test by accessing:
   https://<instance>.service-now.com/json_formatter_ui.do

---

🧩 Optional: Service Portal Integration

Want to add this to your Service Portal?

• Create a Widget
• Paste the HTML and JavaScript into the Widget’s HTML Template and Client Script
• Add the widget to a Portal Page or Catalog Item

---

🏁 Final Notes

This tool is an excellent utility for any ServiceNow developer working with REST integrations or scripting JSON. It’s quick, intuitive, and completely browser-based—no third-party tools required.