The UI customization for Service catalog items

Junyu · ‎08-31-2023

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 · ‎08-31-2023

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>

View solution in original post

Berin · ‎09-04-2023

Hi Junyu, yes, it can be a bit annoying that what you see in the editor is different that what you see in the portal. The reason for this is that the editor displays the content using the settings of whichever back-end view you're using (eg UI6). But portals use their own themes and css, which is great because it means you can have multiple portals that each look completely different from each other. 😁

The code above doesn't change the size of the text at all, so I assume you've changed something to set the header to be larger. Depending on how you've done that, the CSS of the portal may be overwriting the settings...

eg If you've made the heading a <h3> tag instead of a <p> tag, then it'll apply the portal's styling for <h3> tags.

Or if you've set the font-size to a larger number such as 14pt or 16px, then the problem may be that the portal is already displaying all the text as that larger size, so now the header just looks the same.

Probably the easiest way to overcome this is to use a percentage to set the header size. That way, no matter where someone is viewing the catalogue item, the header will be bigger than the rest of the text. Here's an example:

<div style="border: 2px solid red; border-radius: 4px; background-color: pink; padding: 10px;">
<p style="font-size: 150%;">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>

In the code above, I've added style="font-size: 150%;" to the header's <p> tag. You can change that number to whatever percentage looks right for your needs.

Junyu · ‎09-04-2023

Hi @Berin ,

Thanks for your answer, now it works, but I meet another question:

Every time I save the catalog item, it has more newlines:

In my editor I use <br/>, but after saved it been changed to <p> </p>. Also there's nothing for the first line, but after saved the <p> </p> appeared there.

In terms of effect, I don't plan to have blank lines at the beginning. Do you know how to solve this problem?

Berin D · ‎09-04-2023

Hi Junyu, yes, it can be a bit annoying that what you see in the editor is different that what you see in the portal. The reason for this is that the editor displays the content using the settings of whichever back-end view you're using (eg UI6). But portals use their own themes and css, which is great because it means you can have multiple portals that each look completely different from each other. 😁

The code above doesn't change the size of the text at all, so I assume you've changed something to set the header to be larger. Depending on how you've done that, the CSS of the portal may be overwriting the settings...

eg If you've made the heading a <h3> tag instead of a <p> tag, then it'll apply the portal's styling for <h3> tags.

Or if you've set the font-size to a larger number such as 14pt or 16px, then the problem may be that the portal is already displaying all the text as that larger size, so now the header just looks the same.

Probably the easiest way to overcome this is to use a percentage to set the header size. That way, no matter where someone is viewing the catalogue item, the header will be bigger than the rest of the text. Here's an example:

<div style="border: 2px solid red; border-radius: 4px; background-color: pink; padding: 10px;">
<p style="font-size: 150%;">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>

In the code above, I've added style="font-size: 150%;" to the header's <p> tag. You can change that number to whatever percentage looks right for your needs.