SCSM HTML 5 Portal – Customise the Size of a String Property

When a string property is used in a Request Offering it is displayed as a small single line text box in the portal.  It will auto expand as the user types, however it doesn’t accept carriage returns.  If you hit the Enter key from the text box you will submit the Request Offering instead.

To resolve this add the following code snippet to the MakeForm.cshtml located in C:\inetpub\wwwroot\SelfServicePortal\Views\Home.

else if (item["Prompt"].ToString().Equals("Description"))
{
string regexToolTip = string.Empty;
if (item.ContainsKey("ToolTip"))
{
regexToolTip = item["ToolTip"].ToString();
}

<label for="@item["Prompt"].ToString()" data-required="@item["Optional"].ToString()">@item["Prompt"].ToString()</label>
<textarea cols="40" rows="10" name="@item["PathSend"].ToString()" id="@item["Prompt"].ToString()" @item["Optional"].ToString() value='@Request[item["PathSend"].ToString()]' data-toggle="tooltip"> </textarea>
<div class="error-text">@ErrorResults.Find(m => m.MemberNames.ElementAt(0).Equals(item["PathSend"].ToString()))</div>
}

It must be inserted before the ‘else’ statement that is at the end of the fav_name_email section.  This section is towards the end of the file and looks like this:

<div class="fav_name_email section">
@foreach (var item in formData)

The key part of the code snippet is in the first line.  In this example I have used “Description”.  It must match the name of the question in the Request Offering.  For example if you have used “Please enter a description” as your question, then the line must be:

else if (item["Prompt"].ToString().Equals("Please enter a description"))

It is also case sensitive.

N.B. it is advisable to backup the files before modifying them.  The Portal Updates patches are designed to read the date stamp on the files and compare it to the last update installation date.  If they match then the file will be overwritten, if they don’t match (I.E. you’ve edited them) then they won’t be updated.  So prior to any update copy the default files back in first.  Yes, there is potential that all your changes will be wiped out by a patch.

The problem here is that you have to add the code snippet for each string value you want to use (assuming you don’t want the default text box) for every question that is worded differently.  It is easier to use a simple common term in your Request Offerings such as “Description”.

This code works with Update 3 for the System Center 2012 R2 Service Manager HTML 5 Portal.

So now that the text box is larger, and accepts carriage returns the font needs to be updated otherwise it will look like type writer text.  To do this add the following code snippet to a file called Custom.CSS and drop it in C:\inetpub\wwwroot\SelfServicePortal\Content\CSS

.section textarea {
font-family:”Segoe UI”;
width: 24em;
border:1px solid #BBB;
}