Some users will want to complete tasks from a tablet or phone, and some want to complete tasks from their desktop. It is important to ensure that both groups can do so, and the easiest way is to ensure that the form is built to be responsive to screen widths. This article provides guidance on how to make forms mobile-friendly/responsive. If you need assistance, please get in touch with our support team, and we will be happy to provide you with a form definition that is mobile-friendly.
Step 1: Consider design
Users interact with forms differently on mobile devices than they do on desktop computers. Here are some things to consider when designing the form:
- Length - The length of the form is important for a mobile user – it should be short enough that a user can reach the bottom easily, and the user should be able to scroll back up without issue.
- Width—The form should also be designed so that the user does not have to scroll sideways. If the screen width is less than 700 px, the best practice is to have one field per row.
Step 2: Consider the lifecycle of the form
In some processes, mobile forms are only required in certain circumstances. For example, a delivery driver wants to mark a parcel as delivered, or a new employee wants to accept a job offer. It might be practical to create a separate form for these contained tasks and then use a script task to copy over all the form fields to the main form.
Step 3: Consider building a responsive form for all tasks
Forms not intended for printing
If you know when designing the form that it will not be printed, consider building a form without a set width. Most forms today are designed to be centered on the page at 700 px or 740 px, which is the width of an A4 paper. Adding this setting to the root panel prevents the form from being responsive.
If you leave the width setting empty, the form will stretch to the width of the screen. This might seem like a big change if you are accustomed to a form that is always 700 px, but it simplifies the design.
Printed forms
In cases where you need the form to be printed to an A4, consider having the browser check the screen width on render (when the form is opened). It is possible to add a listener to the form that removes the width setting if it senses that the browser width is less than 700 px. This will, however, impact the form-building experience, as sometimes the browser will sense that the form canvas is less than 700 px due to the resource columns on both the left and right of the form template.
If you wish to add the listener on render, follow these steps:
- Starting from an empty form, a “form” object is visible in the right panel (the Outline).
- Add a “panel” object to the canvas, as a child of the form. All objects on the form must be contained within this panel going forward.
- Give the panel the name “rootPanel,” and set style to margin: 0 auto and width to 700.
- Add a listener attribute to the form object and add the following script:
// MOBILE CLASS
This will set the default width to 700 px but introduces an override if the screen width is less than 700 px. The form width will then be 100%, i.e., fill the screen.
if (window.screen.width < 700) {
this.getFormField("rootPanel").setWidth("100%");
} else {
this.getFormField("rootPanel").setWidth(700);
}
Step 4: Consider columns
Multiple columns prevent forms from being responsive.
Some processes require multiple columns in forms. There is a lot of information to fill in, and placing one field per row makes the form lengthy. In these situations, it is possible to add a setting to the form to make it responsive.
For each column you have added, add a class attribute. The class attribute is named “cls,” and the value in this example is “MOBILE.” This will enable the entire column to stretch so that it creates one row per field on mobile screens.
In some cases, you might not want the objects to stretch to 100% width. It is also possible to add classes to objects within columns. The class attribute needs to be added to each object within the column, but leaving the column without class. The value of the cls attribute in this example is MOBILE50, and makes the object within the column fit 50% of the column width.
Add the following script to your listener in the top object:
styleDef += '@media screen and (max-width: 700px) {';
styleDef += '.MOBILE .x-column-inner .x-column { display: flex; flex-direction: column; }';
styleDef += '.MOBILE .x-column-inner .x-column { width: 100% !important; }';
styleDef += '.MOBILE50 { width: 50% !important; }';
styleDef += '}';
Step 6: Consider the information shown
The user interacts with tasks differently depending on which device they are on. Sometimes, it is appropriate to show less information if the user is on a small screen. For example, information panels might not be as important. It is possible to add this logic to the script, via the following if statement:
// MOBILE CLASS
if (window.screen.width <= 700) {
if (me.getViewMode() == "START" {
me.getFormField("FSheader").hide();
} else {
me.getFormField("FSheader").show();
}
This script will hide an information panel with the name “FSheader” if the screen width is smaller than 700 and if the Viewmode is “START”.
Conclusion
By default, forms are mobile-friendly, but design decisions sometimes counteract responsiveness. It is possible to introduce controlled measures to ensure that forms still look good when used on a small screen.
Using the following script in a listener attribute on the top object in the Outline can help you obtain better control over form responsiveness.
The below scripts are the entire listener needed to achieve the configurations described in this article. For more information or assistance, please contact the support team.
Script for forms that do not need to be printed to A4 (best practice):
{ render : function (me) {
/*CUSTOM STYLE START*/
if (window.isCustomStyleDefined != null) {
return;
}
var styleDef = ''
// MOBILE CLASS
if (window.screen.width <= 700) {
if (me.getViewMode() == "START" {
me.getFormField("FSheader").hide();
} else {
me.getFormField("FSheader").show();
}
styleDef += '@media screen and (max-width: 700px) {';
styleDef += '.MOBILE .x-column-inner .x-column { display: flex; flex-direction: column; }';
styleDef += '.MOBILE .x-column-inner .x-column { width: 100% !important; }';
styleDef += '.MOBILE50 { width: 50% !important; }';
styleDef += '}';
} else {
me.getFormField("FSheader").show();
}
/*CUSTOM STYLE END*/
$("<style type='text/css'>" + styleDef + "</style>").appendTo("head");
window.isCustomStyleDefined = true;
}
}
Script for forms that need to be printed to A4 (not best practice):
{ render : function (me) {
/*CUSTOM STYLE START*/
if (window.isCustomStyleDefined != null) {
return;
}
var styleDef = ''
// MOBILE CLASS
if (window.screen.width <= 700) {
if (me.getViewMode() == "START" {
me.getFormField("FSheader").hide();
} else {
me.getFormField("FSheader").show();
}
this.getFormField("rootPanel").setWidth("100%");
styleDef += '@media screen and (max-width: 700px) {';
styleDef += '.MOBILE .x-column-inner .x-column { display: flex; flex-direction: column; }';
styleDef += '.MOBILE .x-column-inner .x-column { width: 100% !important; }';
styleDef += '.MOBILE50 { width: 50% !important; }';
styleDef += '}';
} else {
me.getFormField("FSheader").show();
this.getFormField("rootPanel").setWidth(740);
}
/*CUSTOM STYLE END*/
$("<style type='text/css'>" + styleDef + "</style>").appendTo("head");
window.isCustomStyleDefined = true;
}
}
Comments
0 comments
Article is closed for comments.