Master List of Compatible HTML

[MATTHEW450]

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

[lgaertner]

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

[lgaertner]

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

[MATTHEW450]

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

[sevenpure]

This is very interesting information and I appreciate you sharing. I am still learning Text Mode and have a couple of questions:

• Regarding the HTML Field (Shared Column) code displayed above, are you able to share a Screenshot example of what this accomplishes?
• Can I use the following Project-based Report Text Mode Code and apply HTML using the Shared Column method?
  
  displayname=Event Name Final
  listdelimiter=
  listmethod=nested(tasks).lists
  shortview=true
  textmode=true
  type=iterate
  valueexpression=IF({milestone}.{ID}="63c1c239002cd7d68451d42e0e0445c3",IF(ISBLANK({actualCompletionDate}),CONCAT({plannedCompletionDate}),"DELIVERED"))
  valueformat=HTML

I would like to Center, Bold and turn the Word "DELIVERED" to Green.

Thanks for your time.

[MATTHEW450]

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>&nbsp;
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

[sevenpure]

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.

[MATTHEW450]

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 

[sevenpure]

Thanks again @MATTHEW450 !

[MATTHEW450]

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;

[Rafal_Bainie]

I used 

<span style="display: inline-block">

to properly aling multiple html objects in single cell

[MATTHEW450]

Could you provide an example? Something I could copy and past and see what you mean. Thank you!

[Rafal_Bainie]

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

[Doug_Den_Hoed__AtAppStore]

Thanks @MATTHEW450  (et al): this is an interesting thread.

Spoiler

As it does pertain to both textmode and html in a fairly advanced fashion, I'm tagging @Matt-Thomas who's leading the New Reporting Experience team for his thoughts / assurance / cautions about how / whether / if these techniques will port to NRE.

Regards,

Doug

[Matt-Thomas]

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.