Customize my live table with date

Help / Discuss
1

Hello,
I have a nice live table with multiple columns containing some dates and I need to display some lines depending of dates value (and/or dates intervals)
ie I have this live table:
Name | StartDate | EndDate
toto | 01/01/2018 | 31/01/2018
…
I want to display in red lines if the EndDate is anterior than StartDate or if (EndDate - StartDate) is inferior than 4 days, etc.

I don’t think it is possible with CSS only?

Could you give me some ways to customize my live table with date?
Can I add a calculated field in my live table?

Thxs for any help

Pascal B

2

Yes it’s possible but you’ll need to have a custom displayer for your date xclass property I think. See https://www.xwiki.org/xwiki/bin/view/FAQ/Bindings%20available%20inside%20the%20Custom%20Display%20property or https://snippets.xwiki.org/xwiki/bin/view/Extension/User%20Property%20Custom%20Display

3

Forget that, didn’t read properly

4

So you want to have different styles based on the values of different LT columns.

You could do this with:

  • JS and CSS
  • or with a custom JSON for the LT
5
  • JS and CSS

Ok thxs I’m far to be an expert in JS, but I think I will use this way

  • or with a custom JSON for the LT

I already used this way in other appli and it was complicated for me

I thought about a way like this:
#set ($columnsProperties = {
‘Custom’: {‘Calculated’: ‘doc.date - doc.creationDate’},
…

6

hummmm maybe I can modify the default JSON: https://extensions.xwiki.org/xwiki/bin/view/Extension/Livetable%20Macro#HModifythedefaultJSON
with this way can I add a new column in my livetable?

If I add a new rows.x.newcolumn in the map, I must simply add this before my LT call to display the new field?:

#set ($columns = ['doc.title', 'doc.location', 'newcolumn')
#set ($columnsProperties = {
  'doc.title': {'link': 'view'},
  'doc.location': {'html': true},
  "newcolumn" : { "type" : "text" },
7

Ok I get it, I specify my LT ID:

require(['jquery'], function ($) {
 document.observe("xwiki:livetable:MyLTId:displayComplete", function(){
8

Finally, with a JSX (javascript), I use something like:

require(['jquery'], function ($) {
  document.observe("xwiki:livetable:MesEtudesAmonts:loadingComplete", function(){
    SurligneTable('#MesEtudesAmonts', '.P4_RapportFinEnvoi', '.P1_DateFin');
  });
...
      });
      function SurligneTable(MyTable, RefDateVide, RefDateFin) {
        const Aujourdhui = new Date();
        // Ligne dont RefDateVide ("P4_RapportFinEnvoi" ou "") est vide
        var MaLigne = $(MyTable + " td" + RefDateVide + ".typedate:empty").parents('tbody.xwiki-livetable-display-body > tr');
        // Boucle sur les lignes où RefDateVide est vide
        // recup des dates des lignes où Fin E  () est vide
        MaLigne.each(function(){
          var currentRow=$(this);
          var DateFinStr = currentRow.find(RefDateFin).text();
          var DateFinSplit =DateFinStr.split('/');
          // Please pay attention to the month (parts[1]); JavaScript counts months from 0:
          // January - 0, February - 1, etc.
          var DateFin = new Date(DateFinSplit[2], DateFinSplit[1] - 1, DateFinSplit[0]);
...
    currentRow.css("background-color", MyColor);