Make custom field look like the Duration field

[Marcel H_]

I am wondering if there is a way to make a custom field look like the OOB Duration field. I have a group that wants to track the total number of days its team members travel, but do not like the way that the standard Duration field looks on reports (from task_time_worked table) since they care only about total days and don't want to track Hours, Minutes and Seconds. You and specify a minimum value for duration of course, but I don't believe there is a way to go the opposite direction (and if I'm not mistaken, reports will ignore that attribute anyway).

I created a custom Decimal field on my custom table extending Task and am populating another custom Decimal field on task_time_worked via business rules.   What I'm looking for though is to style my form field that I created to track days so that it would look very similar to the Duration field in appearance:

Duration:

Desired appearance for custom field:

[Kalaiarasan Pus]

Will get back on this once I get time to try this on my instance. If somebody has a better way to do, let us know.

[Marcel H_]

Great thanks. I appreciate any help on this that can be provided. Played around with it some more, but found that I really just don't have enough experience with jelly to make it work the way that I think it's supposed to.

[Kalaiarasan Pus · Accepted solution]

I have just started learning Bootstrap and was able to simplify the code a bit. Just adding this incase someone is looking for this.

Create a UI macro and add it to the formatter. Below is the UI macro code.

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

  <div class="form-group">

  <div class="col-xs-12 col-md-3 col-lg-4">

  </div>

                  <div class="col-xs-10 col-sm-9 col-md-6 col-lg-5">

                      <div class="input-group">

                          <span class="input-group-addon">Days</span>

                          <input type="text" id="customDays" class="form-control" placeholder="Enter days worked" />

                      </div>

                  </div>

  </div>

  <div class="col-xs-2 col-sm-4 col-md-4 col-lg-2">

  </div>

</j:jelly>

[Marcel H_]

Great, thanks! I have the formatter working, just finalizing the details and looks like it should be working well.

[Kalaiarasan Pus]

This is how it looks (I am not able to align it better)