Convert comment field from type string to HTML type

[Lokesh5]

Hi Everyone, 

I have a UI Page that includes a field called 'Comments', which is currently a string field. I would like to know if it is possible to convert this field type to HTML to support rich text formatting. Could you please confirm if this can be achieved?

Looking forward to your response.

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
	<style>
		#required_information .required-marker{
		display: inline-block;
		}
		.required_information-textarea {
		resize: vertical;
		}
	</style>
	<div class="row" >		
		<div style="padding: 0px 5px 20px 40px;"> ${gs.getMessage('Provide details of information needed.')} </div>
		<div class="form-horizontal" id="required_information">
			 <div class="form-group" id="requestInformation">
					<div class="col-sm-3 col-sm-offset-1 control-label">
						<label for="request" id="request_label">
							$[gs.getMessage("Request information from")]
						</label>
					</div>
					<div class="col-sm-7">
						<input type="text" id="request_label_text" name="request_label_text" readonly="true" class="form-control required_information-textbox"></input>
					</div>
				</div>
			
			<div class="form-group" id="users_text_area">
				<label id="users_text_label" class="col-sm-3 col-sm-offset-1 control-label">${gs.getMessage('User')}</label>
				<div class="col-sm-7">
					<input type="text" id="users_text" name="users_text" readonly="true" class="form-control required_information-textbox"></input>
				</div>
			</div>
			
			<div class="form-group">
				<label id="comments_label" class="col-sm-3 col-sm-offset-1 control-label"><span mandatory="true" class="required-marker"></span>${gs.getMessage('Comments')}</label>
				<div class="col-sm-7">
					<textarea id="comments" class="form-control required_information-textarea" type="text" onkeyup="checkMandatoryFields(this)"></textarea>
				</div>
			</div>
			
		</div>
	</div>
<script>
	addLoadEvent( function() {
	setUserDetails();
	});
</script>	
</j:jelly>

[Lokesh5]

@Ankur Bawiskar,

That is showing correctly when i tested from Ui page but I am encountering an issue where the field is not visible when calling the UI Page through a UI Action. Please refer the below image.

[Ankur Bawiskar]

@Lokesh5 

can you try to use GlideDialogWindow instead of GlideModal?

If my response helped please mark it correct and close the thread so that it benefits future readers.

[Ankur Bawiskar · Accepted solution]

@Lokesh5 

this worked for me when I called it using GlideModal

I just loaded the HTML input, you can enhance it further for your fields

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 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: "$[gs.getProperty('glide.ui.html.editor.v4.toolbar.line1')]",
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>

</j:jelly>

Output: When I called it from UI action, it rendered the UI page

If my response helped please mark it correct and close the thread so that it benefits future readers.