How to add HTML type field in the UI page

Pratiksha_45 · ‎08-24-2023

Hello ,

In the UI page, I need to add a HTML type field.

Could anyone help me with this?

Thanks in advanced!

Samaksh Wani · ‎08-24-2023

Hello @Pratiksha_45

You can go through the below link for your solution :-

https://www.servicenow.com/community/developer-forum/display-an-input-html-field-in-a-ui-page-semi-e...

Plz Mark my Solution as Accept and Give me thumbs up, if you find it helpful.

Regards,

Samaksh

Pratiksha_45 · ‎08-24-2023

Hello @Samaksh Wani ,

Thanks for your response.

I have gone through the link that you have provided but that code didn't work.

SwarnadeepNandy · ‎08-24-2023

Hwllo @Pratiksha_45,

To add a HTML(WYSIWYG) type field in a UI page in servicenow, you need to use the TinyMCE editor, wh.... To switch to TinyMCE, you need to adjust the property glide.ui.html.editor and set it to tinymce.

Here is an example of how to add a HTML(WYSIWYG) type field in a UI page using TinyMCE:

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tiny.cloud/1/q629v4hh324kk4kofae4kvdj52necr3091agm0yhumzyserr/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
  
</head>
<body>
  <textarea>
    Welcome to TinyMCE!
  </textarea>
  <script>
    tinymce.init({
      selector: 'textarea',
      plugins: 'ai tinycomments mentions anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount checklist mediaembed casechange export formatpainter pageembed permanentpen footnotes advtemplate advtable advcode editimage tableofcontents mergetags powerpaste tinymcespellchecker autocorrect a11ychecker typography inlinecss',
      toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | align lineheight | tinycomments | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
      tinycomments_mode: 'embedded',
      tinycomments_author: 'Author name',
      mergetags_list: [
        { value: 'First.Name', title: 'First Name' },
        { value: 'Email', title: 'Email' },
      ],
      ai_request: (request, respondWith) => respondWith.string(() => Promise.reject("See docs to implement AI Assistant")),
    });
  </script>
</body>
</html>

This code will create a textarea that can be edited with TinyMCE.

Edited: I have changed the code, please try using the new code @Pratiksha_45.

Hope this helps.

Kind Regards,

Swarnadeep Nandy

Samaksh Wani · ‎08-24-2023

Hello @Pratiksha_45

Go to your UI Page add HTML Tag in your HTML Container.

<div>

<input type="text">

</div>

Plz Mark my Solution as Accept and Give me thumbs up, if you find it helpful.

Regards,

Samaksh