Crow Canyon Software Forum

Forum Navigation
Please or Register to create posts and topics.

Ability to use styles when print item template uses rich text option

Basically what the title says....
When you are adding columns manually to the rich text box (rather than using a table that points to a view) the styles tab disappears.
I added a table layout to the rich text editor and wanted to use alternate row background colours but don't seem to be able to.

When using rich text print templates, we can directly add inline styles in HTML for the table. Click on HTML source icon in print template, add style tag and insert the required CSS to apply for the table. Please refer sample style that can be used from below.

<style>tr:nth-child(even) {background-color: #f2f2f2;}</style>

Uploaded files:
  • TableStylePrint.png

Thanks @crow-canyon-support, are we able to take this a step further and show hide sections/DIVs based on a field value?
I have a 3 check boxes on the form. Training, travel and accommodation.
If "travel" is the only checkbox ticked then I would like to hide the 2 DIVs in the print item template that contains all the form fields relating to "travel" and "accommodation"

if trainingBox is not select then trainingDiv visibility = hidden

I think I may have found my answer... will give it a go
NITRO Print – Advanced formatting using JavaScript - Crow Canyon Software Support

No... no luck yet. This is what I am trying to do.
I have put a DIV around one of the form fields to make it less complicated than querying an array of checkboxes.

This is the HTML with the important bits in bold
<p>Requester:&nbsp;[[Requester||Requester]]<br />
Direct Manager:&nbsp;[[Manager||Direct Manager]]<br />
General Manager:&nbsp;[[GeneralManager||General/Group Manager]]</p>
<div id="requestType">Request Type: [[RequestType||Request Type]]</div><p>Training (If applicable)<br />
Course Name:&nbsp;[[CourseName||Course Name]]<br />
Course Organiser:&nbsp;[[CourseOrganiser||Course Organiser]]<br />
Course Date:&nbsp;[[DateTimeHeld||Date &amp; Time Held]]Course Location:&nbsp;[[Location||Location]]<br />
Early Bid Pricing:&nbsp;<br />
GL Code:&nbsp;[[Training_x0020_GL_x0020_code||Training GL code]]</p>
<p>&nbsp;</p>
<div id="travelDiv" style="display:none;">blah blah blah blah</div>

And this is the Javascript

// add your script to change printed Text.

let ele = document.getElementById('requestType');

// check if DIV contains the word "Training".
if (ele.innerHTML.includes('Training')) {
$('#travelDiv').toggle();
}

When I see the output (both in the edit item template window and the resulting PDF file the travelDiv DIV is always hidden.
requestType text = Training so it should toggle the DIV visibility

We can configure script in the Print Manager settings to check for column value and then use the id attribute to apply the styles dynamically. Please find the below sample use case regarding this. In the below, there are two columns 'Category' and 'Issue Type' in the template. We are reading the 'Category' column value and then hiding 'Issue Type' if category value is blank.

Script used in print manager settings:
var category = objData.CurrentItem.get_item("ColumnInternalName");
if(category == null || category == ""){
$("#rowCategoryValue").hide();
}

In the above script, replace 'ColumnInternalName' with the actual column internal name for which you are trying to read the value. Configure the id parameter with same name that is used in above script. Please find the sample configuration image attached below.

Uploaded files:
  • PrintManagerScript.jpg