Hacktoberfest 2025 (1st pull request)

Client-Side Components/UI Pages/Add HTML Input field in GlideModal window/README.md

@@ -0,0 +1,11 @@
+ADD HTML Input Field in GlideModal Window:
+
+It is possible to add a HTML input field in GlideModal window in servicenow.
+The most common approach involves including a WYSIWYG editor (such as TinyMCE) in the UI Page that you render inside a GlideModal. This enables full rich text functionality within the modal dialog.
+Steps :
+1) Create UI Page (eg: rich_text_modal) 
+2) Create UI Action (eg: Add Details. here I created the ui action on incident table)
+3) Open the incident record , click on the Add Details button , which opens the glide modal and includes fields like short description of type 'string' and description of type 'Rich Text/HTML'
+
+
+

Client-Side Components/UI Pages/Add HTML Input field in GlideModal window/UI Action

@@ -0,0 +1,7 @@
+function test()
+{
+var dialog = new GlideModal('rich_text_modal'); // give the ui page name in place of 'rich_text_modal' 
+dialog.setTitle('Rich Text Editor'); 
+dialog.setSize('500','500');
+dialog.render();
+}

Client-Side Components/UI Pages/Add HTML Input field in GlideModal window/UI Page

@@ -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>
+