Add HTML Input field in GlideModal window

[Rohit Agarwal1]

Hi,

I want to add a HTML input field in GlideModal window (same as the attached screenshot).

is this possible? Please suggest.

@Ankur Bawiskar : Any suggestion?

[GlideFather]

hi @Rohit Agarwal1,

It is possible, what HTML do you want to add?

Share your configurations to be able giving you advice, you shared the screenshot but not the responsible code, is it (catalog) client script or what it is?

The better description you write the better reply you will get 🙂 

[Rohit Agarwal1]

Hi,

Thans for reply. I created a UI Page which contains 2 input fields 'Short Description' and 'Description'. The Description field is rich text field. I want to show rich text editor in GlideModal window as I mentioned earlier.

Code (UI Page):

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

    <script type="text/javascript" src="/scripts/tinymce_default/node_modules/sn-tinymce/js/tinymce/tinymce.min.js"></script>

    <script type="text/javascript" src="/scripts/tinymce_default/node_modules/sn-tinymce/js/tinymce/icons/default/icons.min.js"></script>

    <script type="text/javascript" src="/scripts/tinymce_default/node_modules/sn-tinymce/js/tinymce/models/dom/model.min.js"></script>

    <script type="text/javascript" src="/scripts/tinymce_default/node_modules/sn-tinymce/js/tinymce/themes/silver/theme.min.js"></script>

    <script type="text/javascript" src="/scripts/tinymce_default/node_modules/sn-tinymce/js/tinymce/plugins/code/plugin.min.js"></script>

    <script type="text/javascript" src="/scripts/tinymce_default/node_modules/sn-tinymce/js/tinymce/plugins/image/plugin.min.js"></script>

    <script type="text/javascript" src="/scripts/tinymce_default/node_modules/sn-tinymce/js/tinymce/plugins/link/plugin.min.js"></script>

    <script type="text/javascript" src="/scripts/tinymce_default/node_modules/sn-tinymce/js/tinymce/plugins/lists/plugin.min.js"></script>

    <link href="/scripts/tinymce_default/node_modules/sn-tinymce/js/tinymce/skins/ui/oxide/ui/default/skin.css" rel="stylesheet" />

    <link href="/scripts/tinymce_default/node_modules/sn-tinymce/js/tinymce/skins/ui/oxide/skin.min.css" rel="stylesheet" />

    <script>

        tinymce.init({

            selector: '#description',

            height: 300,

            menubar: false,

            plugins: 'lists link image code',

            toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | bullist numlist | link image | code'

        });

    </script>

    <g:ui_form>       

        <div class="mb-3">

            <label for="test" class="form-label">${gs.getMessage('Enter Short description')}</label>

            <input id="short_description" aria-label="${gs.getMessage('Enter Short description')}" class="form-control" type="text" name="short_description" required="required"></input>

        </div>

        <div class="mb-3">

            <label for="test" class="form-label">${gs.getMessage('Enter Description')}</label>

            <textarea id="description" aria-label="${gs.getMessage('Enter Description')}" class="form-control" style="resize: none;" name="description" required="required"></textarea>

        </div>

        <footer class="modal-footer">

            <button class="btn-primary btn" name="submit" onclick="onSubmit();" id="submit" style="min-width: 5em">${gs.getMessage('Submit')}</button>

        </footer>

    </g:ui_form>

</j:jelly>

The code is not working in SN Xanadu instance.

Thanks!

[SriharshaYe]

Hi @Rohit Agarwal1 , 

Yes , 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 a UI page: same as below add the code and save the ui page. 

2. Create a UI action :

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 full description of type 'Rich Text/HTML'

If my response resolved your query, please consider marking it as helpful.

Thank you,
Sriharsha

[Rohit Agarwal1]

Hi Sriharsha,

Thanks for reply. I implemented your solution. But html field is not rendering.  

I am using SN Xanadu instance.

Thank you!!