Skip to main content

Creating Forms for a Specific Device

Overview

Users interact with automated processes through a portal that works with any web browser. Users may access the Work Portal using browsers on devices ranging from desktops to mobile phones and tablets. Designers know that users are likely to perform certain activities from a mobile device. For example, supervisors generally use their mobile phones to perform an approval.

Designers can create customized forms for one or more devices to provide the best experience for users.

For each activity of a process, designers can define views of its form for specific devices such as iPhones, Android phones, iPads, Android tablets, or desktop computers using a specific screen resolution. You can also create customized forms for device families, such as Smartphone, Tablet, or Desktop.

DSF_29


Form Types

When you develop an activity form, you can create:

Default (General)

The Default view is for forms that run anywhere on any device, without customization.

Each default activity form has three views, namely:

  • Desktop 1208x800
  • iPhone X
  • iPad

You can add or remove the devices displayed in the Forms Editor as a factory setting using the Tools tab in the Bizagi Studio ribbon.

Recommendation: Use the Desktop tab (for both desktop and laptop computer screens) to build the form. The other two tabs act as "View As..." modes for other devices.

Characteristics:

  • Changes made in one tab affect all other tabs immediately.
  • In default mode, all tabs are linked together.

DSF_20


Default for Specific Device

For activities that need customization to provide a better user experience, designers can define a device to act as the default for all devices of the same family: Smartphone, Tablet, or Desktop.

  • If you set an iPhone X as the default, all smartphones display the form as you designed it for the iPhone X.
  • Other families (e.g., Tablet or Desktop) remain unaffected.

Important: Changes made in a Default for specific device are NOT reflected in the form tabs of other families.

Example:

  • Smartphone Default: iPhone X
  • Desktop Default: Remains independent.

Devices for the same family display the following visual cues:

  • Small dot on the tab indicates it’s the Default for a device.

DSF_23
dsf
DSF_25


Specific

Designers can go further by creating a Specific form for an independent device. For example, create an entirely unique form for iPhone 8.

Key Points:

  • Specific forms are INDEPENDENT of other tabs.
  • Changes to a specific device form do not affect other views.

Visual Indicators:

  • Tabs for specific forms display their own color and icon.

DSF_26
DSF_27
DSF_28


What You Need to Do in Bizagi

Follow these steps to create Forms for specific devices:

  1. Create the Default Form with the Desktop View
    Start by designing the form as it would appear on a desktop or laptop screen.

  2. Create the Specific Form for a Device
    Define how the form should appear on a specific device, such as an iPhone X.

  3. Set the Default for Specific Device
    Choose a device to act as the default for its family (e.g., Smartphone or Tablet). Devices of the same type will use this form unless overridden.

  4. Add Other Views for Devices
    Optionally, add other devices to check how the form renders. Use the plus icon to add new views. Adjust as needed for lower-resolution devices.


Considerations

Keep the following points in mind when creating forms for specific devices:

  • Query Forms: This feature is not available for Query forms.
  • Entity Forms: Customize from the Expert view to ensure synchronization.
  • Form Types and Device Families: Linked by color. Changes affect only the tabs of the same color.
  • Restoring Default: Use Set as default form to reset the form.
  • Device Tabs: Close a form for a device using the Close device option (Tools tab).
  • Internet Explorer: Dual monitors may cause incorrect screen detection, leading to improper rendering.

Summary Table: Form Types and Indicators

Form TypeDesktopSmartphoneTablet
DefaultDSF_20DSF_21DSF_22
Default for Specific DeviceDSF_23DSF_24DSF_25
SpecificDSF_26DSF_27DSF_28