The UI customization for Service catalog items

[Junyu]

Dear all,

We want the section blocks to look like this in Service catalog items:

Want to know how to achieve this effect, thank you.

[Berin · Accepted solution]

Hi Junyu, it sounds like the catalog item's Description field might be what you're after. You can format it however you need, it displays at the top of the form, and by default (but will depend on your customisations) doesn't display after the form has been submitted.

While the formatting options available with the Description field are a bit limited, you can manually enter your own HTML code, which basically lets you format it however you want.  To do so, click the Source code button, and make any edits you need.  Here's an example:

<div style="border: 2px solid red; border-radius: 4px; background-color: pink; padding: 10px;">
<p>Banner Field (Styled for Critical Information)</p>
<p>This field is...<br /><strong> [1] It must be...</strong><br /><strong> [2] The banner...</strong></p>
<hr style="border-color: red;" />
<p>The text can be <em>italicized</em> and you can add a <a href="#">link</a> here too.</p>
</div>

[Junyu]

Hi @Berin ,

Thanks for your answer! can you show me the other two sections' background color name? I tried yellow and green but it doesn't look good

Thank you

[Berin]

Maybe try a khaki background with gold border and lightblue background with cadetblue border?

You're not limited to named colors, btw, you can use hex codes, which let you select from millions of colors, but names are pretty easy. Here's a list of them all.

[Junyu]

Hi @Berin ,

When I tried in the editor, the header's font is larger than text:

But when I check it of the catalog item on the portal, they are same size:

Can you tell me why this happened and how I can fix it?