You may have seen this post about joining column data. As an extension, we now can keep the column names for better readability.

(almost) Standard Table View

Let us start from the beginning: This is a slightly modified but almost standard table view of tasks:

From my point of view there are too many columns and too much space wasted due to empty cells. Also, there are tuples or triplets of columns belonging together, for eaxmple created_on and created_by.

Joining columns

Using the new join-function, which will be available by the end of this year, we can join columns' contents into one target column per row.

Code

AppGiniHelper.TV
  .join("partner_id", ["project_id", "contact_id", "machine_id", "calculation_id", "calculationitem_id"], "Zuordnung");

Result

Right now we have decreased the number of data columns by 50% (from 20 to 10 columns) and content from different source columns has been merged into specific target columns, let me show this zoomed:

Table View BEFORE join:

Table View AFTER join:

Illustration of changes:

Those four columns "Projekt", "Ansprechpartner", "Maschine" and "Kalkulation" have been merged into the first column "Geschäftspartner" which has been renamed to "Zuordnung" (EN: Assignment).

Those four columns are hidden and only the target column remains visible.

Improvement

However, we have lost column names of those four hidden columns now. This makes it harder to read and understand the values in merged target column. It is harder for users to assign information in the brain.

So, I have included another boolean parameter for keeping the labels:

AppGiniHelper.TV
  .join("partner_id", ["project_id", "contact_id", "machine_id", "calculation_id", "calculationitem_id"], "Zuordnung", true);

Table View AFTER join with last parameter true:

Now the labels of the (hidden) columns will be placed above the values.

Illustration of the changes:

Styling the labels

The labels can be styled using CSS like this:

.appginihelper-tv-join-label {
  color: black;
  font-weight: bold;
}

Summary

From my point of view, in some cases it is fine to just merge the values without labels. In other cases it will be easier to understand and better to read for end-users, if we include the labels. With the additional boolean parameter we can control from case to case.

I hope you like it.

Sometimes the number of visible columns in a table view becomes too large. Then we begin to hide unnecessary columns. But that has its limits if we need and want to display certain columns. I show here how I merge the contents of several columns into one column.

Important Notice
The features shown in this "highlights" blog category are a showcase of things which can be done using AppGini, AppGini Helper Library, PHP, SQL, Javascript, JQuery, CSS and HTML. This definately does not mean that everything you can see here is part of our product. It took hours, sometimes days of research, trial-and-error, coding and testing. So, these showcases are not part of a 49$ library, they are not single-line copy&paste codes and they are not for sale. Just a demonstration of what can be done and what we did and do in paid projects for our customers.

Table View

Definately there are too many columns. A few are too small, a few are empty. The browser starts wrapping headers and content for best fit. But for my personal taste this does not make it look better.

Some columns belong together, for example there are tuples or triplets of columns like (created_by and created_on), (modified_by and modified_on), (assigned_by, assigned_to and assigned_on), (finished_by and finished_on).

Also those six lookup columns take a lot of space although only three of them contain data at all:

Idea

My idea was that I could bring these columns together, for example turn those two columns created_on and created_by into one.

So, I have written a function named join() which will be available as BETA for testing purposes in next version of our AppGini Helper Javascript Library.

Code

jQuery(document).ready(function () {
  AppGiniHelper.TV
    .join("created_on", ["created_by"], "Created")
    .join("partner_id", ["project_id", "contact_id", "machine_id","calculation_id", "calculationitem_id"], "Zuordnung");
});

The join() function takes two or three arguments. First is the field name of the target column. Second parameter is an array of field names which will be appended to the target column.

There is an optional third argument for re-naming the column (header) of the target column.

In other words, the code line above means:Append the column created_by to created_on and replace the header of created_on by the string "Created".

Result

I have grouped certain columns in one column. This allowed me to delete some columns. Overall, I find the table tidier than before.

Tuples / Triplets

Columns created_on and created_by have been merged into created_on and labeled "created" (DE: Erstellt)

Joined lookup columns

There is only one column left, containing the filled values only.

Complete code

This is the code for joining then columns in this example.

AppGiniHelper.TV
  .join("created_on", ["created_by"], "Erstellt")
  .join("modified_on", ["modified_by"], "Geändert")
  .join("assigned_on", ["assigned_by", "assigned_to"], "Zugewiesen")
  .join("finished_on", ["finished_by"], "Erledigt")
  .join("partner_id", ["project_id", "contact_id", "machine_id","calculation_id", "calculationitem_id"], "Zuordnung");

Note that the second argument is an array of field names. I can pass multiple field names and all of them will be appended to the target column.

Comparison

Default

Joined

Sorting

When renaming the header i make sure that the sort function is retained. Ascending or descending sorting is applied to the original data of the target column.

AppGini highlights hits in Table View after search. Depending on the selected theme, the hits are highlighted in color. Today I'll show you how easy it is to change the way hits are displayed when searching in Table Views.

Problem

In my theme, the search hits have so far been highlighted rather discreetly.

This emphasis is not clear enough for my taste. Therefore i have adapted the presentation via CSS.

Result

You can have different opinions about color and style. I am only interested in this post to show you the possibility. You can adapt it to your own needs with a little CSS knowledge.

CSS-Code

span[data-jquery-mark="true"] {
    background-color: yellow;
    padding: 1px 4px;
    border: 1px solid silver;
}

There are different ways in which you can integrate CSS code. I recently got used to creating my own CSS file called header-extras.css in the same directory as header-extras.php. Then, in header-extras.php, I just include my CSS file with the following line of code:

<link rel="stylesheet" href="hooks/header-extras.css" />