[Rad]

superb! works great with the changes. thanks again for your patience and prompt responses!

[Rad]

1. I do have the showApprovalStatus already added to my custom javascript.
2. In addition, I believe statusBannerIcon is needed since you’re referencing it in showApprovalStatus?
3. I see where approvalWfStatus is being used, just need to know where its defined.

[Rad]

Could it be a version issue again? This is what I’ve:

Version information
DFFS Loader: v2
DFFS frontend: 4.4.5.51 – April 28, 2024
DFFS frontend CSS: 4.66 /
Autocomplete: 1.6.56 – April 04, 2024
Cascading dropdowns: 3.7.48 – September 22, 2021
jQuery: 3.6.3
Lookup: 1.1.20 – March 10, 2020
Resource management: 2.4.5 – August 29, 2019
SPJS-Utility: 1.356 – November 20, 2021
vLookup: 2.2.166 – April 04, 2024

[Rad]

Q- noticed you’re using a class called approvalWfStatus in your demo but I don’t see where you’re defining it.

[Rad]

tried it but Email format is still off.

[Rad]

.ms-formbody{
width:600px;
}

.ms-formlabel .ms-standardheader{
font-weight:bold;+
}

.sbs_FieldLabel{
height:auto;
}
.sbs_FieldLabel .ms-formlabel{
font-size: .9em;
font-weight:500;
padding:6px 6px 0 6px;

}

input:focus,div:focus,select:focus{
outline: none;
border-radius: 0px;
box-shadow: 0 0 0 3px rgba(0, 123, 255, .5);

}

/* formatting for tab1 headers*/
.tabH1{
background-color: Steelblue !important;
color:white !important;
font-size:12px !important;
font-weight:bold;
font-style:ButtonFace;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}

/* formatting for tab2 headers*/
.tabH2{
background-color: Teal !important;
color:white !important;
font-size:12px !important;
font-weight:bold;
font-style:ButtonFace;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}

/* button formatting */
.ms-ButtonHeightWidth {
border-radius: 12px;
background-color: darkgreen !important;
color: white !important;
font-weight:bold !important;

}

.ms-ButtonHeightWidth:hover{
box-shadow: 0 16px 16px 0 rgba(0,0,0,0.5), 0 6px 20px 0 rgba(0,0,0,0.19);
/* box-shadow: 0px 0px 8px 4px gray; */
}

.col-form-label {width: 250px;}/* default tables used with json data */
.tableDefault{
table-layout: fixed;
width:100%;
max-width: 900px;
padding-bottom: 5px;
padding-top:5px;
border: 1px solid #AAAAAA;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.tableDefault th {
background-color:#G0G5G5;
color:black;
font-size: 10px;
font-weight: bold;
vertical-align: bottom;
}
.tableDefault td, th {
padding: 3px 2px;
}
.tableSmallWidth{
width:500px;
}

.tableDefault tbody td {
font-size: 10px;
word-wrap: break-word;
}
.tableDefault tr:nth-child(even) {
background: #D0E4F5;
}

.tableDefault input{
border-radius: 12px;
background-color: #F56265;
}

.float-left-child {
float: left;
}

.sbs_OuterTable {

background-color: #f1f3f3;
border-radius: 3px;
padding: 1;
/*
outline: 1px solid;
outline-color: lightgray;
outline-offset: 2px;
*/

}

.spjs-form-choice-wrap .spjs_chk_checkmark,
.spjs_radio_wrap .spjs_radio_checkmark {
background-color: white !important;
}

.spjs_chk_wrap input:checked~.spjs_chk_checkmark,
.spjs_radio_wrap input:checked~.spjs_radio_checkmark {
background-color: black !important;
}

/* the below code displays the status flow on top of the form */

.statusBannerIcon{
display:inline-block !important;
font-size:25px;
margin:5px;
color:#cccccc;
}
.approvalWfLabel{
font-size:14px;
font-weight:bold;
border-bottom:1px silver solid;
padding:0 0 10px 5px;
}

.customHeading{
background-color: #1B619B;
color: #EFF2F6;
font-size:16px;
padding:5px 10px;
}

[Rad]

that’s how I have it. here’s the file I am using.

[Rad]

this looks perfect, my formatting seems way off in the email. I’ll try to dig into it, thanks

[Rad]

I got it from -> https://spjsblog.com/2017/08/19/dffs-example-training-application-list-with-approval/

but here’s the CSS:

.statusBannerIcon{
display:inline-block;
font-size:35px;
margin:5px;
color:#cccccc;
}
.approvalWfLabel{
font-size:18px;
font-weight:bold;
border-bottom:1px silver solid;
padding:0 0 10px 5px;
}
.customHeading{
background-color: #1B619B;
color: #EFF2F6;
font-size:16px;
padding:5px 10px;
}

Below Function being called from “Click function name” within the tab:

//create Status numbers on top of the form
function showApprovalStatus(){
var b = [], label, labelColor, status, spjsStatusArr = [
{“label”:”New”,”icon”:”①”,”color”:”#0000FF”},
{“label”:”Draft”,”icon”:”②”,”color”:”#1E90FF”},
{“label”:”Cancelled”,”icon”:”③”,”color”:”#FFD700″},
{“label”:”Submitted”,”icon”:”④”,”color”:”#3CB371″},
{“label”:”Returned”,”icon”:”⑤”,”color”:”#e81123″},
{“label”:”Review”,”icon”:”⑥”,”color”:”#0000FF”},
{“label”:”Approved”,”icon”:”⑦”,”color”:”#107c10″}
];
status = getFieldValue(“txtRequestStatus”);
jQuery.each(spjsStatusArr,function(i,c){
b.push(“<div title='”+c.label+”‘ class=’statusBannerIcon'”);
if(status === c.label){
b.push(” style=’color:”+c.color+”‘”);
label = c.label;
currStatusIndex = i;
labelColor = c.color;
}
b.push(“‘>”+c.icon+”</div>”);
});
jQuery(“.approvalWfStatus”).html(b.join(“”));
jQuery(“.approvalWfLabel”).html(“<span style=’color:”+labelColor+”‘>Current status: “+label+”</span>”);
}
setTimeout(function(){
showApprovalStatus();
},500);

Attachments:

1. 

   Capture1.png
   

[Rad]

!important did the trick. thank you!

[Rad]

I placed it withing my CSS file which is called from within custom CSS tab.

Attachments:

1. 

   2024-11-12_09-04-01.png
   

[Rad]

I copied the code as is to my CSS file and checkboxes look same. The default checkbox color should be same color as the Explain textbox when editing.

Attachments:

1. 

   2024-11-12_07-26-01.png
   

[Rad]

Apologies, I should’ve looked in detail. thank you

[Rad]

sorry, have a follow up on emailing the tab. Currently there is no labeling of the fields in the email box that opens up which can be a bit confusing to users. Is there a way to customize this pop up to add labels against the text boxes? Something like the screenshot?

Attachments:

1. 

   2024-11-08_11-36-14.png
   

[Rad]

that fixed it. thank you!

[Author]

Posts