I'm trying to find some master list of compatible HTML/CSS with Workfront reporting. How far can you go? Can you use javascript potentially? I'm going to leave a list of coding I have found and how I use it, if you have anything to add, please leave it below!
HTML:
<a href:"link here">Click Here</a> (Not particularly useful, you can create a functional link tied to a field using other code. This is just possible to do)
<b></b> (Bold)
<i></i> (Italics)
<strong></strong> (Defined Bold)
<em></em> (Defined Italics)
<div style="element: value;"></div> (Container that can be used to add CSS by adding an inline style element)
<font></font> (Can add style elements to font like color, size)
<p></p> (paragraph)
<br> (line break)
<hr> (line break with a visual line)
CSS:
border: value type color;
border-radius: value; (used to round off border corners)
background: color-value;
padding: value; (adds distance between the content within the border)
text-align: value; (left, center, right)
This is all that I have used so far, I haven't experimented with much else yet as I am still learning these languages. I'm hoping this will be useful for those like me who have not learned how to write script yet, but want to take their reports to the next level
Topics help categorize Community content and increase your ability to discover relevant content.
Hello Matthew,
such a list is very helpful! I am currently trying around a lot in Workfront and as I learned about text mode in reporting recently, I will check the HTML/CSS/JS(?) capabilities as soon as possible. Hopefully, I will be able to add some useful stuff here within the next days/weeks.
Regards
Lars
Hello Matthew,
can you please provide me with an example on how to work with HTML tags in reporting? How do you add them in textmode on values?
I tried
valueexpression=<strong>{DE:abcBriefingGeneralHeightPerformanceTestLabel}</strong>
valueformat=HTML
But doing that leads to the fact, that the column is blank.
Besides that something like
value= <font color=0000FF><b>Home Team: </b></font>
works.
Thanks in advance.
Regards
Lars
Views
Replies
Total Likes
To use HTML, you can only use it one way, in a value line
displayname=Circle
value=<div style="background: #0000FF; border-radius: 50%; padding: 5px; width: 50px; height: 50px; text-align: center;"><font color=#0F0F0F>Maybe</font><div>
valueformat=HTML
sharecol=true
To apply it to a field, you need to wrap the column in spacing columns with the element opening in the first one and closing in the last one
column.1.displayname=Very Late Rating
column.1.value=<font color=#FF0000>
column.1.valueformat=HTML
column.1.sharecol=true
column.2.displayname=Very Late
column.2.valueexpression=IF(WEEKDAYDIFF({plannedCompletionDate},{actualCompletionDate})>5,"1"," ")
column.2.valueformat=customString
column.2.sharecol=true
column.3.displayname=
column.3.value=</font>
column.3.valueformat=HTML
You cannot use HTML in a valueexpression
This is very interesting information and I appreciate you sharing. I am still learning Text Mode and have a couple of questions:
I would like to Center, Bold and turn the Word "DELIVERED" to Green.
Thanks for your time.
Views
Replies
Total Likes
You won't be able to isolate the word "Delivered" with a list unfortunately, you would end up formatting the entire list. But if you did want to isolate a word, it would look something like this:
column.1.valueexpression=IF(ISBLANK({actualCompletionDate})," ",{actualCompletionDate})
column.1.value=HTML
column.1.displayname=Task Delivered
column.1.sharecol=true
column.2.value=<font color=#50C878><b>
column.2.valueformat=HTML
column.2.displayname=Task Delivered
column.2.sharecol=true
column.3.valueexpression=IF(ISBLANK({actualCompletionDate})," ","Delivered")
column.3.valueformat=HTML
column.3.displayname=
column.3.sharecol=true
column.4.value=</font></b>
column.4.valueformat=HTML
column.4.displayname=
This would show up as "03/01/2022 Delivered" and appear empty when it is blank. You can copy and paste this into a new blank project to see how it works
Also, your IF statement and CONCAT statement are both wrong, so I'm not sure what you are going for there. If you are saying that you second IF statement is checked when your first one is true, it needs it's own true and false factors. Your CONCAT statement only needs one set of brackets and a space before your word starts within the parenthesis or the word will **bleep** up against the Planned Completion Date. Any spaces within the parenthesis are visible in the concatenation
Views
Replies
Total Likes
Thanks so much for the reply - I am trying to digest it. The following is a Screenshot of what my current Report looks like using modified Shared Column Text Mode Code, based on your 04-01-2023 reply:
Modified Code (producing the results above):
column.13.displayname=Event Name Final
column.13.sharecol=true
column.13.textmode=true
column.13.value=<div style="text-align: center"><font color=#03a219><b>
column.13.valueformat=HTML
column.14.displayname=
column.14.listdelimiter=
column.14.listmethod=nested(tasks).lists
column.14.sharecol=true
column.14.shortview=true
column.14.textmode=true
column.14.type=iterate
column.14.valueexpression=IF({milestone}.{ID}="63c1c239002cd7d68451d42e0e0445c3",IF(ISBLANK({actualCompletionDate}),CONCAT({plannedCompletionDate}),"DELIVERED"))
column.14.valueformat=HTML
column.15.displayname=
column.15.textmode=true
column.15.value=</b></font><div>
column.15.valueformat=HTML
It seems as though you are stating that my Text Mode Code line, just below, needs to be revised:
column.14.valueexpression=IF({milestone}.{ID}="63c1c239002cd7d68451d42e0e0445c3",IF(ISBLANK({actualCompletionDate}),CONCAT({plannedCompletionDate}),"DELIVERED"))
I would like the Planned Completion Date to display (should there be one), and, when an Actual Completion Date is found, display "DELIVERED", which appears to be happening...questions:
Should I revise the Line of Code for enhanced stability, performance or another more ideal scenario?
If yes, are you able to assist me with the updated "IF" statement?
Thanks again for your time and help.
Views
Replies
Total Likes
I would say that your CONCAT({plannedCompletionDate}) is unnecessary, you can just use {plannedCompletionDate}. For the color, you can't format just a single item on the list, it will always format every item on the list. If you are isolating a single task on the list, then you can create two separate lists with IF(ISBLANK logic and format those separately. If there will be multiple items on a list, you can't format different items independently. If tasks will always be the same, you could create a list for each task and format each one independently using CONTAINS and IF(ISBLANK statements
Views
Replies
Total Likes
Thanks again @MATTHEW450 !
Views
Replies
Total Likes
So far I am not seeing a limitation on CSS as long as it is inline. Just made some shapes and adjustments
CSS:
margin: value;
width: value;
height: value;
margin: value;
display: value;
align-items: value;
Views
Replies
Total Likes
I used
<span style="display: inline-block">
to properly aling multiple html objects in single cell
Could you provide an example? Something I could copy and past and see what you mean. Thank you!
Views
Replies
Total Likes
Sure, so for instance I have cell that looks like that:
aligning these icons in a single row or in 2 separate rows without inline-block was impossible to achieve
Thanks @MATTHEW450 (et al): this is an interesting thread.
Regards,
Doug
Thanks for tagging me @Doug_Den_Hoed__AtAppStore! With the Reporting Canvas the goal has always been to make this type of customization of Reporting much easier and visual. @MattMi3 is probably the best person to comment on this thread as he now owns Reporting Canvas.
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies