1

Child record table with dynamically header

Is it possible to change the header of a child record table dynamically? I kind of came up with an ugly but working workaround :D. But would be nice to have a better solution.

11 replies

null
    • Ninox partner
    • RoSoft_Steven.1
    • 2 yrs ago
    • Reported - view

    This looks like an example of a CSS/JS hack, something Jacques TUR might be able to help with?

    • Cloud DevOps Fullstack Engineer
    • Martin_Mueller
    • 2 yrs ago
    • Reported - view

    Yeah good point. I used such a hack for hiding the calendar thi馃

    • Ninox developper
    • Jacques_TUR
    • 2 yrs ago
    • Reported - view

    Hello to both of you, 

    Here is a function to change the column title of the display field. Just call the function with the name of the display field, the column number (starts at 0) and the new title of this column.
    I use NativeJS to do this:

    function modifyColTitle(fieldViewName : text,numCol : number,newColTitle : text) do
    #{:text
 debugger;
// find the tab bar of top level form.
 var components = (widgets.popupEditorStack.length > 0 ? widgets.popupEditorStack[widgets.popupEditorStack.length - 1] : ui.sideEditor && ui.sideEditor).editor.currentTab.components;
 var table = components && components.find( c => c.field.caption == fieldViewName );
if (table) {
    table.$headCells[numCol].innerText = newColTitle
    }

}#
end;
modifyColTitle("View", 1, "photo")

    Could this help you?

      • Cloud DevOps Fullstack Engineer
      • Martin_Mueller
      • 2 yrs ago
      • Reported - view

      Jacques TUR hi. That looks super promising :). Where do I have to insert the function and the execution of the function? In a formel on the same popup? 

      As well with the display field you mean the name of the child table basically or? Like in my example ProjektStueckliste or?

      Screenshot 2022-12-25 at 17.55.55
    • Cloud DevOps Fullstack Engineer
    • Martin_Mueller
    • 2 yrs ago
    • Reported - view

    Getting close. With help of the debugger, I can see that probably $headCells is wrong as it is undefined. I am lacking a bit of those JQuery skills. I am not sure how to get to those head cells. I assume the inner element of the el element :D.

      • Ninox developper
      • Jacques_TUR
      • 2 yrs ago
      • Reported - view

      Martin Mueller could you send a sample application ?

      • Cloud DevOps Fullstack Engineer
      • Martin_Mueller
      • 2 yrs ago
      • Reported - view

      Jacques TUR With that you mean a manual backup or?

      • Ninox developper
      • Jacques_TUR
      • 1 yr ago
      • Reported - view

      Martin Mueller Yes, a backup of your application (database) or a simple example with just what you are trying to do.

      About JQuery, to access a DOM component, use $headCells.get(0) or $headCells[0]. see more here.

      • Cloud DevOps Fullstack Engineer
      • Martin_Mueller
      • 1 yr ago
      • Reported - view

      Jacques TUR Looks like a child table in record view isn't rendered as html table at all :) 

      I kind of try to understand how I can reach the custom head part with jquery
       

      <label>ProjektStueckliste</label>
<div class="list" style="height: 281px">
<div class="nx-table">
<div class="nx-table__head" style="transform: translateX(0px)">
<div
class="nx-table__head__cell"
data-name="BMK"
style="width: 120px; left: 0px"
>
<div class="nx-table__head__cell__content"><span>BMK</span></div>
<div class="nx-table__head__cell__resizer"></div>
</div>
<div
class="nx-table__head__cell"
data-name="Kurzspezifikation"
style="width: 196px; left: 120px"
>
<div class="nx-table__head__cell__content">
<span>Kurzspezifikation</span>
<div
class="i-40-12 i-light-grey i-line-up-thick"
style="width: 12px"
></div>
</div>
<div class="nx-table__head__cell__resizer"></div>
</div>
<div
class="nx-table__head__cell"
data-name="Lieferant"
style="width: 135px; left: 316px"
>
<div class="nx-table__head__cell__content"><span>Lieferant</span></div>
<div class="nx-table__head__cell__resizer"></div>
</div>
<div
class="nx-table__head__cell"
data-name="Nennweite"
style="width: 91px; left: 451px"
>
<div class="nx-table__head__cell__content"><span>Nennweite</span></div>
<div class="nx-table__head__cell__resizer"></div>
</div>
<div
class="nx-table__head__cell"
data-name="Feinspezifikation"
style="width: 325px; left: 542px"
>
<div class="nx-table__head__cell__content">
<span>Feinspezifikation</span>
</div>
<div class="nx-table__head__cell__resizer"></div>
</div>
<div
class="nx-table__head__cell"
data-name="Angefragt"
style="width: 86px; left: 867px"
>
<div class="nx-table__head__cell__content"><span>Angefragt</span></div>
<div class="nx-table__head__cell__resizer"></div>
</div>
<div
class="nx-table__head__cell"
data-name="Custom1"
style="width: 124px; left: 953px"
>
<div class="nx-table__head__cell__content"><span>Custom1</span></div>
<div class="nx-table__head__cell__resizer"></div>
</div>
<div
class="nx-table__head__cell"
data-name="Custom2"
style="width: 146px; left: 1077px"
>
<div class="nx-table__head__cell__content"><span>Custom2</span></div>
<div class="nx-table__head__cell__resizer"></div>
</div>
<div
class="nx-table__head__cell"
data-name="Custom3"
style="width: 142px; left: 1223px"
>
<div class="nx-table__head__cell__content"><span>Custom3</span></div>
<div class="nx-table__head__cell__resizer"></div>
</div>
...
      • Cloud DevOps Fullstack Engineer
      • Martin_Mueller
      • 1 yr ago
      • Reported - view

      Jacques TUR  Thanks a lot :)!!! I solved it with:

      table.list[0].firstChild.firstChild.children[numCol].innerText = newColTitle;

      Though would be interesting how it would look like if I have used JQuery :)

      • Ninox developper
      • Jacques_TUR
      • 1 yr ago
      • Reported - view

      Martin Mueller You are right, my first code works for a view field, but not for a child table. 

      This code works for both: 

      function modifyColTitle(fieldViewName : text,numCol : number,newColTitle : text) do
    #{:text
 debugger;
// find the tab bar of top level form.
 var components = (widgets.popupEditorStack.length > 0 ? widgets.popupEditorStack[widgets.popupEditorStack.length - 1] : ui.sideEditor && ui.sideEditor).editor.currentTab.components;
 var table = components && components.find( c => c.field.caption == fieldViewName );
if (table && table.field)
        switch (table.field.base) {
        case 'view' : table.$headCells[numCol].innerText = newColTitle; break;
        case 'rev' : table.list[0].querySelector('.nx-table__head').children[numCol].querySelector('.nx-table__head__cell__content > span').innerText = newColTitle; break;
    }  }#
end;

modifyColTitle("View", 1, "title of view");
modifyColTitle("Invoices", 1, "title of child table")
Login to reply

Content aside

  • 1 Likes
  • 1 yr agoLast active
  • 11Replies
  • 219Views
  • 3 Following