Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
function test()
{
var dialog = new GlideModal('rich_text_modal');
dialog.setTitle('Rich Text Editor');
dialog.setSize('500','500');
dialog.render();
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<!-- Short Description (String) -->
<label for="short_description">Short Description</label><br/>
<input type="text" id="short_description" name="short_description" style="width: 100%;" maxlength="100" /><br/><br/>

<!-- Full Description (Rich Text/HTML) -->
<label for="full_description">Full Description</label><br/>
<script src="/scripts/tinymce4_4_3/tinymce.full.jsx"></script>

<script>
tinymce.init({
mode : "specific_textareas",
editor_selector : "mce",
width: '100%',
height: '500px',
menubar: "tools",
toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | bullist numlist',
content_css : "* {font: 10px arial, sans-serif;} b {font-weight:bold;} th {font-weight:bold;} strong {font-weight:bold;}",
});

</script>
<textarea cols="80" rows="10" id="myArea" name="myArea" class="mce"></textarea>
<br/>
<br/>
<div style="text-align: left;">
<button type="button" id="submitBtn" onclick="submitForm()">Submit</button>
</div>
<script>
// Example submit handler function:
function submitForm() {
alert("form submitted");
}
</script>
</j:jelly>

29 changes: 29 additions & 0 deletions Core ServiceNow APIs/GlideModal/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
# Add HTML Input Field in GlideModal Window - ServiceNow

## Use Case
This snippet demonstrates how to include HTML input fields, including rich text editors, inside a GlideModal window in ServiceNow.

## Real-Life Example of Use
In ServiceNow ITSM, support agents often need to add detailed notes or updates quickly without losing their workflow context. For instance, when investigating complex incidents, agents can click the "Add Details" button to open a modal with rich text input to document findings, attach formatted comments, or paste troubleshooting steps. This modal dialog prevents navigation away from the incident form, speeding up data entry and improving information capture quality.

## Why This Use Case is Unique and Valuable (Simple)
- Lets users enter rich text and HTML inputs right inside a popup window (GlideModal) without leaving the current page.
- Makes data entry faster and easier by avoiding navigation away from the form.
- Supports complex inputs like formatted text using editors such as TinyMCE.
- Helps improve quality and detail of notes and comments on records.
- Can be reused for different input forms or workflows in ServiceNow.
- Works smoothly within the ServiceNow platform UI for a consistent user experience.

## Steps to Implement
1. Create a UI Page named `rich_text_modal` with appropriate input fields (string and rich text).
2. Create a UI Action (e.g., "Add Details") on the Incident table that opens the `rich_text_modal` UI Page within a GlideModal.
3. Open an incident record and click the "Add Details" button to see the modal with the HTML input fields.

## Compatibility
This UI Page and UI Action is compatible with all standard ServiceNow instances without requiring ES2021 features.

## Files
`UI Page` , `UI Action` - are the files implementing the logic.



Loading