How to make date text box Read-Only in Service Portal

Kyu Min · ‎11-09-2017

Hi all,

I'm kind of new developing in SN.

I need to find a way to make read-only the text box of the date variable so force the end user to use the calendar (datepicker) to select the date in Service Portal.

The image is from the standard UI. The text box is disabled but I'm able to select the date with the calendar (datepicker).

So far, I've been able to make it work in the standard UI with this Catalog Client Script:

UI Type: Both

Type: onLoad

function onLoad() {

// Checks if the form is loaded in mobile or desktop

if (window == null) {

// For Service Portal - Currently not working

//g_form.hasField('date_variable').style.backgroundColor = '#F0F0F0';

//g_form.hasField('date_variable').readOnly = true;

document.observe("dom:loaded", function(){

$('date_variable').setAttribute('disabled', true);

});

} else {

// For standard UI

g_form.getControl('date_variable').style.backgroundColor = '#F0F0F0'; // Sets gray color to background

g_form.getControl('date_variable').readOnly = true; // Sets the text box as RO

}

g_form.getControl() does not work in Service Portal.

I've researched all day and still haven't found a way to make it work in SP.

Any help is greatly appreciated.

Thanks!

sndangibbard · ‎11-11-2017

If you only need this on one specific Date variable...

Get the sys_id of the variable

Service Catalog > Maintain Items > [open item the variable belongs to]
Variables (related list) > right-click on the variable > Copy sys_id

Create a Catalog UI Policy

Service Catalog > Maintain Items > [open item the variable belongs to]
UI Policies (related list) > New
- Onload: true
- Run script: true
- Run scripts in UI type: All
- Execute if true:

function onCondition() {

var $ = this.jQuery;

$('input[id*="yourSysIdHere"]').attr('readonly', true);

}

View solution in original post

Kyu Min · ‎11-13-2019

I've implemented it in Madrid but with the variable's name and it's working.

When I tried with the sys_id, it didn't.

Thanks!

varuntayal · ‎11-13-2017

You need to use g_sc_form.getControl instead of g_form.

var my_form = g_sc_form || g_form;

var my_date_variable = my_form.getControl('date_variable');

Kyu Min · ‎11-13-2017

Thanks for your advise Varun.

I didn't know that g_sc_form exists.

I've tested your code in my script but it didn't work. Maybe it is also not compatible with SP:

mirkoe · ‎11-30-2017

Any updates on this?

We also need to set the text box to read only and force users to use the timepicker. This, because many users sets the time manually. e.g. 14:00. If the time is not in correct format 14:00:00, it shows us 00:00:00 in ticket.

Alternative is to somehow check that the date and time are both in correct format.

monireddy · ‎07-25-2018

Hello,

Did you find the solution for this?