Custom widget help with HTML

[Franchesca Liz1]

hi all,

I am trying to make a widget that I cloned from the HRI employment information widget. I need the widget to look like this. All this information are pulled from the HR Profile table [Overall background clearance, Opened date, Closed date, Drug test status are all custom fields]

Right now this is what I have, but I need to make it like the screenshot above. The name of the field should be on left side and the value of the field should be on the right side. I know I need to edit the HTML but I been having no luck figuring this out.

Here is the code that is on the HTML, Client and Server Script. This is pretty much the code on the HR Employment Information widget. I have changed line 5 on the client script to the 4 custom fields only. Overall background clearance, Opened date, Closed date, Drug test status

 

 

 

[Claude DAmico]

Would you kindly provide a screenshot of what it looks like now as well as inspect the page for a screenshot of the HTML where the sp-editable-field parts are?

[Franchesca Liz1]

this is the screenshot after adding the CSS you provided

 

 

[Claude DAmico]

Ok. Playing around a little with the CSS, I can get some of it to work. I'm assuming there is a conditional formatting for the Overall Status part which cannot be done just with CSS. The same applies with the date format. However, this should get things formatting better:

.list-group > :first-child {
font-weight: bolder;
}

.sp-editable-field {
float: right;
}

.list-group div.ng-scope {
border-bottom: 1px solid black;
}

a {
border-bottom: 1px solid black;
}

p {
float: right;
font-weight: bold;
}

[Franchesca Liz1]

Thanks this got the formatting better for sure. To change the date formatting is that something that needs to be done on the client script or server script? Also if i added another field Prehire background vetting form link which is a URL field, is there an easy way for me to make this as a clickable field? the value of the field will be unique for each user so we store it in the HR profile.

 

[Claude DAmico]

Reading through the code, it looks like the date and URL could be handled in the Client Script, but I'm not entirely sure how to accomplish that. Sorry!