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.
Table of Contents
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
