How to: Optimize layout of detail views by using tabs and inlining

AppGini

In a new project there is a table for storing tasks. Next to information like "Subject" or "Due date" we store date time values for...

  • When did the creator assign the task to an employee
  • When did the assignee start working on that task
  • When did the assignee finish the task

Later on we can use those datetime values for calculating average runtimes. Im showing the steps I took to optimize the user interface by using AppGini Helper JavaScript library functions.

Start: Default generated form

This is the default tasks detail view form. All fields have been aligned vertically.

Step 1: Adding tabs

In the first step I have added custom tabs to the details view form and moved the fields there:

var dv = AppGiniHelper.DV;

var tabTask = dv.addTab("tabTask", "Task", "wrench"); // todo: i18n
var tabRef = dv.addTab("tabRef", "Rerefence", "link"); // todo: i18n
var tabProgress = dv.addTab("tabProgress", "Progress", "time"); // todo: i18n
var tabMeta = dv.addTab("tabMeta", "Meta", "info"); // todo: i18n

var metaFields = new AppGiniFields(["id", "created_by", "created_on", "modified_by", "modified_on"]);
var taskFields = new AppGiniFields(["status_icon", "subject", "contents", "duedate", "is_active", "status_id", "assigned_to"]);
var referenceFields = new AppGiniFields(["partner_id", "project_id", "contact_id"]);
var progressFields = new AppGiniFields(["assigned_on", "assigned_by", "started_on", "started_by", "finished_on", "finished_by"]);

tabMeta.add(metaFields);
tabTask.add(taskFields);
tabRef.add(referenceFields);
tabProgress.add(progressFields);

Step 2: Readonly fields

Two fields will be calculated automatically by code as soon as the creator assigns the task to an employee (assignee). So I disable those fields by code like this:

new AppGiniFields(["assigned_on", "assigned_by"])
    .readonly();

Step 3: Inlining fields

As you can see, those 6 fields are always paired. There is a datetime-field and as employee-field. Using the .inline function I can place each pair in a row.

new AppGiniFields(["assigned_on", "assigned_by"]).inline("Assignment") // todo: i18n
new AppGiniFields(["started_on", "started_by"]).inline("Start"); // todo: i18n
new AppGiniFields(["finished_on", "finished_by"]).inline("End"); // todo: i18n

Step 4: Optimize “broken” alignment

As you can see in the previous screenshot this works pretty well except the vertical alignment of the lookups:

This comes from a padding setting in the default stylesheet. Using a little css setting we can change the padding:

$j(".form-control-static").css("padding", 0);

That's it. I'm satisfied with the layout now. Here is the complete code and result:

new AppGiniField("id").hide();

var dv = AppGiniHelper.DV;

var tabTask = dv.addTab("tabTask", "Task", "wrench"); // todo: i18n
var tabRef = dv.addTab("tabRef", "Rerefence", "link"); // todo: i18n
var tabProgress = dv.addTab("tabProgress", "Progress", "time"); // todo: i18n
var tabMeta = dv.addTab("tabMeta", "Meta", "info"); // todo: i18n

var metaFields = new AppGiniFields(["id", "created_by", "created_on", "modified_by", "modified_on"]);
var taskFields = new AppGiniFields(["status_icon", "subject", "contents", "duedate", "is_active", "status_id", "assigned_to"]);
var referenceFields = new AppGiniFields(["partner_id", "project_id", "contact_id"]);
var progressFields = new AppGiniFields(["assigned_on", "assigned_by", "started_on", "started_by", "finished_on", "finished_by"]);

tabMeta.add(metaFields);
tabTask.add(taskFields);
tabRef.add(referenceFields);
tabProgress.add(progressFields);

var calcFields = new AppGiniFields(["waitingtime", "processingtime", "runtime"]).inline();
tabMeta.add(calcFields);

new AppGiniFields(["assigned_on", "assigned_by"])
    .readonly();

new AppGiniFields(["assigned_on", "assigned_by"]).inline("Assignment") // todo: i18n
new AppGiniFields(["started_on", "started_by"]).inline("Start"); // todo: i18n
new AppGiniFields(["finished_on", "finished_by"]).inline("End"); // todo: i18n

$j(".form-control-static").css("padding", 0);

Compare

Do you like it?