Contents when using email current tab

[Rad]

Hi again, I am using your sample for showing various statuses of a request and it works great. But when using Email current tab feature, the status icons are being printed randomly in the email. It would be nice if the top status can be emailed as is. If not, anyway to hide it?

Attachments:

1. 

   2024-11-12_15-45-05.png
   

2. 

   2024-11-12_15-53-21.png
   

[Alexander Bautz]

I don’t have this setup in a test list – can you share the HTML code and CSS styling you use for the status icons so I can have a look?

Alexander

[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
   

[Alexander Bautz]

I found my old demo site where I created this code example and tested adding the print button. Unfortunately I’m unable to recreate the problem – maybe you have some other Custom CSS that interferes? – see screenshot of my print preview attached.

Alexander

Attachments:

1. 

   Screenshot-2024-11-13-203129.png
   

[Rad]

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

[Alexander Bautz]

If you have the CSS in a file, please try adding it directly in the Custom CSS field.

Alexander

[Rad]

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

[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;
}

[Alexander Bautz]

Try adding the CSS directly to the Custom CSS textarea and not load it as an external css-file.

Alexander

[Rad]

tried it but Email format is still off.

[Rad]

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

[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

[Alexander Bautz]

The approvalWfStatus class is used in the HTML code in the tab.

I finally understood that you were emailing the tab and not printing it…

The reason that it doesn’t work when emailing is that external stylesheets are not supported (not in DFFS, but in email clients). If you want the icons to show in the email you must add all styling inline in the HTML code – something like the attached file.

Alexander

Attachments:

1. showApprovalStatus.txt

[Alexander Bautz]

You can remove the classname “statusBannerIcon” from the HTML code and also remove the class from your Custom CSS.

Alexander

[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.

[Alexander Bautz]

1. Yes, but the code is changed to support emailing the form with the correct layout – the styling is inline on the HTML elements. Look through my changed code and amend yours to match.

2. The styling is moved inline in the style attribute on the element and the class is no longer needed.

3. It is used only as a selector and not to style the element and is not defined anywhere.

Alexander

[Rad]

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

[Author]

Posts