Service Portal Variable Label Font Size

JimCheffer
Kilo Expert

Hello, we have several catalog requests that have questions with html that show question in larger fonts. Also labels are bold. This works in our Istanbul classic and CMS catalogs. In Jakarta the html font does not work in classic or CMS. In the Service Portal this does not work in either. Has anyone found a workaround for font sizing? Our catalog labels are bold but not in service portal. Jim

Variable and Label Setup

find_real_file.png

find_real_file.png

Istanbul Patch 9A

find_real_file.png

Jakarta Patch 7

find_real_file.png

Service Portal - Istanbul and Jakarta

find_real_file.png

1 ACCEPTED SOLUTION

Arnoud Kooi
ServiceNow Employee
ServiceNow Employee

In the labels HTML is not supported, suposing you want to proceed with the Serviceportal.

 

You can run this background script to remove all HTML tags from your questions, leaving only the text.

var gr = new GlideRecord('item_option_new');
gr.addEncodedQuery("question_textLIKE<");
gr.query();
while (gr.next()) {
    // change <font size=4>Question</font> to: Question
    gr.setValue(
      'question_text',
       gr.getValue('question_text').replace(/<\/?[^>]+(>|$)/g, "")
    );
    gr.update();
}

 

Next clone the widget SC Catalog Item Widget (if you haven't done so).

In the CSS Section you can customize the labels with the following selector:

 

.field-label {
  font-size:20pt;
}

 

Dont forget to replace the widget on the Service Portal sc_cat_item page with the cloned one.

 

 

View solution in original post

4 REPLIES 4

Arnoud Kooi
ServiceNow Employee
ServiceNow Employee

In the labels HTML is not supported, suposing you want to proceed with the Serviceportal.

 

You can run this background script to remove all HTML tags from your questions, leaving only the text.

var gr = new GlideRecord('item_option_new');
gr.addEncodedQuery("question_textLIKE<");
gr.query();
while (gr.next()) {
    // change <font size=4>Question</font> to: Question
    gr.setValue(
      'question_text',
       gr.getValue('question_text').replace(/<\/?[^>]+(>|$)/g, "")
    );
    gr.update();
}

 

Next clone the widget SC Catalog Item Widget (if you haven't done so).

In the CSS Section you can customize the labels with the following selector:

 

.field-label {
  font-size:20pt;
}

 

Dont forget to replace the widget on the Service Portal sc_cat_item page with the cloned one.

 

 

Great !

and with Service Portal you don't even need to clone the widget to edit this:

you could put your CSS in the "CSS" area of your Instance of widget, which override the CSS of the Widget.

It allow to set different CSS for the same widget, on different pages. Useful to customize Labels for Catalog items and Order Guides

 

Regards,
Denis.

Hi ,

this change is applicable to all the variable , how to just make the font increased for one variable for one catalog item?

 

thanks

JimCheffer
Kilo Expert

Armoud, thank you for the search code. We only had two catalog items with HTML code for font size. I removed the code. We are live on portal. Regards Jim