Styling a Table View: a step-by-step example

AppGini Helper JavaScript Library / Javascript (JS) / JQuery / Programming

After we took care of the styling of the Detail View last time, today I will adapt the corresponding Table View.

Initial situation

Remove links

First I would like to remove the links so that the values in the table are shown as text, not as a link. I could and should have done this already during modelling, but I did not. So I have to do it in AppGini - field by field.

Then save and regenerate.

Except the file link (download) there are now only values in the table. If I want to open a record, I need a button. We will insert it right away.

Create hook file

First I create a hook file for the table view (tv)

Access-variable for Table View

As with DV, we need a variable for TV to be able to modify the TV.

// file: hooks/attachments-tv.js

jQuery(document).ready(function () {
    var tv = AppGiniHelper.TV;
});

Attention

Special feature of TV: This is loaded dynamically and is not yet present when the script is loaded, but only after document.ready. Therefore we can only declare and use the tv variable then.

// file: hooks/attachments-tv.js
jQuery(document).ready(function () {
    var tv = AppGiniHelper.TV;
    tv.addButtonOpen();
});

Column width

The column is too small now. So widen it:

// file: hooks/attachments-tv.js
jQuery(document).ready(function () {

    var tv = AppGiniHelper.TV;
    tv
        .addButtonOpen()
        .setWidth(0, 68)
        ;
});

That's better!

Join columns

Now I take care of the four columns created on, created by, modified on and modified by

I would like to make two columns and merge the values.

// file: hooks/attachments-tv.js
jQuery(document).ready(function () {

    var tv = AppGiniHelper.TV;
    tv
        .addButtonOpen()
        .setWidth(0, 68)
        .join("created_on", ["created_by"], "Erstellt am/durch", true)
        .join("modified_on", ["modified_by"], "Zuletzt geändert am/durch", true)
        ;
});

Wordwrap

Somehow I dislike the word-wrap. So let's change it.

// file: hooks/attachments-tv.js
jQuery(document).ready(function () {

    var tv = AppGiniHelper.TV;
    tv
        .addButtonOpen()
        .setWidth(0, 68)
        .join("created_on", ["created_by"], "Erstellt am/durch", true)
        .join("modified_on", ["modified_by"], "Zuletzt geändert am/durch", true)
        .nowrap("created_on")
        .nowrap("modified_on")
        ;
});

That's much better now.

There are other columns that should not be wrapped

// file: hooks/attachments-tv.js
jQuery(document).ready(function () {

    var tv = AppGiniHelper.TV;
    tv
        .addButtonOpen()
        .setWidth(0, 68)
        .join("created_on", ["created_by"], "Erstellt am/durch", true)
        .join("modified_on", ["modified_by"], "Zuletzt geändert am/durch", true)
        .nowrap("created_on")
        .nowrap("modified_on")
        .nowrap("task_id")
        .nowrap("filename")
        ;
});

Final result

That's fine with me.

I hope you have followed me so far and learned something new today!

Keep coding, AppGineers!

Kind Regards,
Jan

Do you like it?