Practical form styling

What you'll be learning:

  • How to format table controls in mobile forms

  • How to apply styles and formatting conditionally

  • How to use index-based formatting for table rows

  • How to change the displayed widths of table columns

Business logic-based formatting. latest version of the dashboard formfrom earlier

What you'd like to do here is take the functionality of the dashboard form a step further purely with formatting. The idea for the dashboard form is that drivers are instantly notified of any change to the delivery tasks that are assigned to them, without having to open any form.

If this is the first time you meet the Driver Task List dashboard form, you'll appreciate the solution artifacts (reference table declaration files, input data spreadsheets, technical forms, and workflow scripts) that it needs to function.

Color-coding the delivery tasks on the dashboard by status would make the driver notification process even smoother.

Actually, the assigned table in the dashboard form already sorts the displayed delivery tasks by status. All you need to add is some background color that gets applied conditionally, based on the status of the

Let's go about this in reverse, and set up the dashboard form first. To make it play along with the styles you'll define later, add a style property to your row, with a long CASE WHEN clause:

...
<row style='{CASE WHEN a.status="Assigned"
            THEN styles.Assigned
            WHEN a.status="Confirmed"
            THEN styles.Confirmed
            WHEN a.status="Loaded"
            THEN styles.Loaded END}'>
...

Note that making the applied styles match the status they're based on saves you hassle and cuts down on maintenance.

Right, time to define those styles in the style file. Given that you're dealing with a table control, apart from the status-based styles, you'll also need a style for the header and the body.

styles
{
    style Awesome
    {
        table
        {
            header = Header
            body = Body
            columnWidth = 1, 1, 3, 1
            borderWidth
            {
                top = 0px
                bottom = 0px
            }
        }
    }
    style Header
    {
        all
        {
            content = Header
            backgroundColor = 000000
            fontColor = ffffff
            fontSize = 1.5 em
            bold = true
            textAlign = center
        }
    }
    style Body
    {
        all
        {
            content = Body
            fontColor = ffffff
        }
        table
        {
            body = Body
        }
        row
        {
            margin
                {
                    top = 4px
                    bottom = 4px
                }
        }
    }
    style Assigned
    {
        all
        {
            content = Assigned
            borderWidth
            {
                left = 1px
                right = 1px
            }
            borderColor = ffffff
        }
        table
            {
                body = Assigned
            }
        row
        {
            backgroundColor = 52, 160, 232
        }
    }
    style Loaded
    {
        all
        {
            content = Loaded
            backgroundColor = 18, 70, 105
            fontSize = 1.6 em
            bold = true
        }
        row
        {
            backgroundColor = 18, 70, 105
        }
    }
    style Confirmed
    {
        all
        {
            content = Confirmed
            backgroundColor = 1578ba
            fontColor = ffffff
            fontSize = 1.6 em
            bold = true
        }
        row
        {
            backgroundColor = 1578ba
        }
    }
}

The new styles defined above make active tasks slightly larger than not-in-progress ones, and shift the background colors between those in the Rocky Jupiter colro scheme.

Save, publish, and wait for the dashboard form to sync itself on your mobile device. Confirm, load, and deliver one or two of your displayed deliveries, and see the background color of the tasks change as their status progresses.

If no delivery tasks show up on your device, the reason might be that the assignments reference table does not contain the user account that you're logged in with. The hassle-free solution is to modify your username to petar.hoyt@gmail.com on the Users tab of the Backoffice site.

The Rocky Jupiter branded color scheme on show in status-based functional formatting
The Rocky Jupiter branded color scheme on show in status-based functional formatting

Figure 173. The Rocky Jupiter branded color scheme on show in status-based functional formatting


If you have followed along with the previous tutorials, you officially know and have tried everything. This is as much as we can teach you about mobile and browser-based workflow forms. To learn more, you'll need to actually make your own workflow solution, and publish it to real users