Best way to create a Time field for easy mobile use? Would like user to use the numeric pad on the mobile device to enter time. Must be specific to the minute and would prefer to give users the current time as a prefill.

    CommentAdd your comment...

    1 answer


      Everyone has different requirements for time fields, be it presentation, automation, or data model requirements.

      Layout difficulties arise when you try to design 3 small fields which need to be fixed width on larger screens, and fill horizontally on smaller screens, and provide an exact fit for 2 digits on devices with inherit differences (including the receipt). You end up needing to play around a bit, and test vigorously to ensure that all screen sizes and target devices are catered for. I like to design my layout in the following manner:

      • create each field (hour, minute, meridian) to horizontally fill, (but set the width to 20mm anyway)
      • then wrap them in a block which constrain their overall size (I use 60mm block width).
      • Then set the responsive rule on the block to "Wrap below threshold 2 (default)"

      Personally, I would use drop down lists rather than numeric fields, and provide custom controls to modify any content in the fields ("Set now!" / "+" / "-").

          One configuration with detailed responsive deign

      The shortcoming of using numeric fields is that the default validation mechanism will allow users to temporarily type an invalid value (61 minutes), and only provide warnings when validation scripts are executed on navigation or submit (based on form policies). Of course you can always drill down into more advanced features of Composer to get around this, but I assume that you want to keep this simple.

      If you really prefer the numeric keyboard, then you have to build your time component with "Decimal (html)" fields. This invokes the numeric keyboard on mobile devices. You may need to perform some configuration to display "00" instead of a blank field in the minute field. You can then set validation rules to check for valid values (minutes between 0 and 59).



        CommentAdd your comment...