Introduction to Responsive Forms

Responsive Design is a general design principle that describes a user interface that adapts its layout and dimensions to various devices or screen sizes. Responsive Forms on the Aras Innovator platform leverage this design principle to provide Forms that dynamically adjust their structure and content to deliver a seamless user experience.

Prior to Aras Innovator 30, there was a single way to define a Form for the Aras Innovator client, now called Classic Forms. This section outlines key differences between Responsive Forms and Classic Forms.

When defining a Classic Form, an administrator creates a new Form item and uses the Classic Form Editor UI to place fields into the Form body. The admin then drags each field to its desired position in the Form. This approach assigns each field an X,Y coordinate that the Aras Innovator platform uses to render a static layout for the Form.

Responsive Forms use an enhanced admin user interface called the Responsive Form Designer. This UI enables admins to define a container-based layout by dragging and dropping structural elements and fields into the Form. Administrators can also configure the layout behavior of the Form and preview how it will look and behave for end users.

Classic Forms render content using a static layout that doesn’t change based on the size of the user’s browser window. Instead, users will be presented with scroll bars when a Classic Form’s static content does not fit in frame, or they will see additional whitespace when the static content occupies less space than the current frame.

Responsive Forms use a container-based approach to define the layout of a Form. This means that content can reflow to use the browser window’s space more effectively – minimizing the need for scroll bars and reducing unnecessary whitespace.

Both Classic and Responsive Forms use the Form ItemType to define Forms for the Aras Innovator client. However, each approach uses a different data structure under the Form item to describe the layout, behavior, and content of the rendered Form.

This parallel architecture enables administrators to adopt Responsive Forms with minimal disruption to packaging and deployment. It also enables customers to continue using their existing Classic Forms.

The following process outlines how to add a new Responsive Form to an ItemType:

1. From the Table of Contents, expand Administration and select ItemTypes.
2. From ItemTypes Table of Contents, click Search ItemTypes.



The ItemType grid appears.



3. In the Name column, enter required ItemType click Search.



4. Select the ItemType.



The ItemType form appears. For this document, Part ItemType is used.



5. From the Relationship tab, select Views.



The existing forms linked to Part ItemType appears.



6. Click Edit to edit the Part ItemType.



7. Click New Form to add a new form to the Part ItemType.



8. Add a name to the form in the Form Name column and select Default type in the Type column.



Note
This release of Aras Innovator only supports Responsive Forms with the Default view type. Support for other view types will be added in a future release. In the meantime, continue to use Classic Forms for use cases requiring view-specific Forms for Add, Edit, View, Print, Complete, or Preview views.
9. Enter the other ItemType View properties as needed and click Done to save the changes.



10. Double click on the newly created Form in the Relationship tab.



The Classic Form Editor displays the new Form:



Note
New Forms are created as Classic Forms by default. Classic Forms created from an ItemType are automatically populated with fields generated based on the search grid properties for the parent ItemType.
11. Click Switch to Responsive Form.



The Form switches to Responsive mode and it’s reloaded in the Responsive Form Designer interface:

This section explains all the panes, properties and functionalities of the Responsive Form Designer.

There are 3 panes for the Responsive Form Designer:

1. Element Pane: This pane presents a list of elements and fields that the admin user can drag and drop into the form. There are two types of objects:
• Structure Objects: These are building blocks for constructing the layout of Responsive Forms. It consists of Column, Column Sets and Group Box.
• Column: A container that wraps a vertical stack of Column Sets, Group Boxes, or fields. All fields in a column will fill 100% of the width of the container. Columns may only be placed inside Column Sets.
• Column Set: A container that wraps one or more Columns. A Column Set can be used to arrange Columns of content side by side, or they can be nested within Columns to give the appearance of a split Column. By default, the Columns inside a Column Set will reflow to stack vertically when the width of the Form shrinks. However, this behavior can be overridden by the administrator as needed. Column Sets may be placed inside a Column or at the root level of the Form.

1. Group Box: A Column Set preconfigured to show a label and border. A Group Box can wrap related content, helping users identify related data even on varying screen sizes. Group Boxes can be used just like Column Sets – inside a Column or at the root level of the Form.
• Unused Properties: These are individual fields that are preconfigured to the properties of the Form’s parent ItemType. Each field has a default control type such as text box, checkbox, dropdown, etc. As the admin user drags & drops a field into the Form, the corresponding property is removed from the Unused Properties list.
Note
The Unused Properties list will only populate when the Form is related to an ItemType. To add a Form to an ItemType, open the desired ItemType and create a new View relationship to the Form.

1. Detail Pane: This pane enables the admin user to view and edit the Form’s properties. When a structure element or field is selected in the Canvas Pane, the admin can also view or edit the properties of the selected element or field.
2. Canvas Pane: This is where the admin user will drag & drop elements to define the content and layout of the Responsive Form. The admin can preview how the content will reflow by changing the size of the browser window or expanding/collapsing the other panes in the designer.



3. Toggle Pane: Two buttons on either side of the Canvas enable the user to toggle the designer’s side panes on or off. This helps the admin preview the Form’s wrapping settings by changing the size of the Canvas.
4. Toggle Guides: Enables the admin to toggle off the blue boxes that show the Form’s structure elements in the Canvas if they want to see how the rendered Form will look for an end user.

This section describes how to build a Form with the Responsive Form Designer.

The following steps outline the process of using Column Sets and Columns to create a layout structure for a Responsive Form:

1. Click Edit in the Responsive Form Designer toolbar.



2. From the Structure list in the Element Pane, drag and drop the required Column Sets.



There are 3 Column Sets preconfigured with a number of Columns:

• 2 Column Set: Adds a Column Set containing 2 Columns.



• 3 Column Set: Adds a Column Set containing 3 Columns.



• 4 Column Set: Adds a Column Set containing 4 Columns.



3. To add more Columns to an existing Column Set in the designer, drag & drop a Column from the Element pane to a Column Set in the Canvas.



Once the required Column Sets are added, it should appear as follows:



4. Select a Column Set in the Canvas to view and edit the following properties in the Detail Pane:
• Name: Name to display when the element is selected in the Responsive Form Designer Canvas
• Label: Label to display to the user in the Responsive Form Designer Canvas and the rendered Form
• Wrap Columns on Small Display: True by default. Enabling this setting allows columns to stack vertically (or “wrap”) instead of aligning horizontally when viewed on devices with limited horizontal space. This ensures content remains legible and user-friendly regardless of the screen size.
• If the “Wrap Columns on Small Display” option is selected, the column should appear as follows:

On wider screen, column sets appear as follows:



On smaller screen, column sets appear as follows:

• If set to false, the columns may shrink down to their minimum width when the Form shrinks, but they will not stack/wrap. If the width of the Form becomes smaller than the combined minimum width of the columns, a horizontal scroll bar will appear to allow the user to access all content.
• Show Border: False by default. Enabling this field displays a solid border around the Column Set.

Once the Column Sets and Group box are placed, users can adjust the following:

• Name: Name of the column.
• Ratio: Describes the width of a Column relative to the other Columns in the same Column Set.



• Example: A Column Set contains 2 Columns where one has a ratio of 2 and the other has a ratio of 1 (2:1). This means the first column will be twice as wide as the second column and occupies two thirds of the width of the Column Set.
• Example: A Column Set contains 3 Columns with a ratio of 2:1:1. In this case the first column will be twice as wide as the second and third columns, meaning it occupies half the width of the Column Set.
• Min Width (px): Minimum width that a Column will shrink to
• Max Width (px): Maximum width that a Column will expand to

When considering sizing behavior of Columns, it’s important to note that a Column’s width settings take priority over its ratio. For example, consider a Column Set with two Columns. Column A has a Min Width of 300px and Ratio of 2. Column B has a Min Width of 100px and a Ratio of 1. This ratio of 2:1 indicates that Column A should be twice as wide as Column B. However, the parent Column Set can shrink down until all child Columns hit their respective minimum widths. In this case, Column A will shrink to 300px and Column B will shrink to 100px – resulting in an actual ratio of 3:1. If maintaining the width of Columns in relation to each other is important for a Form’s design, be sure any Min or Max Width follows the desired ratio.

The following steps outline the process of adding fields to a Responsive Form:

1. In the Element Pane under Unused Properties, browse through the properties of the Form’s parent ItemType. This list shows properties that have not yet been added to the Form.



2. Drag & drop a property into a Column. This will insert a field that has been preconfigured for the selected property.



3. In the Detail Pane, view and update the properties of the field as needed.
• Name: Name displayed when the field is selected in the Canvas
• Label: Label displayed to the user in the Canvas and the rendered Form. Choose one of the following two options:
• Inherit from Property: Display the label of the property, as defined on the ItemType
• Hide: Don’t display a label
• Help: Configure whether the field will render a help tooltip. Choose one of the following two options:
• Inherit from Property: Display the property’s tooltip, as defined on the ItemType.
• Hide: Don’t display a tooltip
• Field Type: Configure the type of control to display for the field. Options are limited to controls valid for the linked property’s data type. For example, an Item control must be used if the property’s data type is “Item.”
• The following table identifies data types that support multiple field types.

Data Type	Field Type	Description
Text	Text	A concise input field suitable for short entries (default)
Text	Text Area	A larger input space ideal for longer pieces of text or paragraphs
Multi Value List	Multi Value Combobox	Options can be selected from a dropdown list field. The selected options are displayed as chips in the field. (default)
Multi Value List	Checkbox List	Options are displayed as a list of checkboxes

• Resize: Configure the sizing behavior of the field control. Valid only for resizable fields.
• Smart: The field will resize automatically within its Min Height and Max Height parameters. The end user cannot change its size manually. (default)
• Manual: The end user may manually change the height of the field.
• None: The field will not resize automatically, and the end user cannot change its size manually.
• Min Height:The smallest height allowed (pixels). Valid only for resizable fields.
• Max Height: The largest height allowed (pixels). Valid only for resizable fields.
4. Repeat the drag & drop process to add more fields to the Form. Columns may contain multiple fields.



5. If a field should span the entire width of the Form, it may be dropped onto the Canvas, outside of any Column.

The following steps outline the process of previewing the Responsive Form in the Responsive Form Designer:

1. To preview the Form without the blue guides for Columns, Column Sets, and Group Boxes, click Hide Guides.



The preview of the Form appears as follows:



2. To preview how the Form will appear when spanning the full width of the Aras Innovator client, click the Close Pane buttons at the bottom left and bottom right of the Canvas. This will collapse the Element Pane and Detail Pane, respectively.



The Form should appear in the expanded Canvas as follows:



3. To view the Element Pane and Detail Pane again, click the Open Pane buttons on the bottom left and bottom right of the Canvas.
4. To view the blue guides representing Columns, Column Sets, and Group Boxes, click the Show Guides button.

The following steps outline the process of saving the Responsive Form and viewing the rendered Form in an Item View:

1. Once all changes are made to the Responsive Form, click Done in the Responsive Form Designer toolbar.



2. In the TOC, navigate to the ItemType associated with the new Responsive Form. Click Search.
3. From the search grid, open an item for viewing. The new tab should display the item with the Responsive Form.

The following steps outline the process of creating Rules for Responsive forms:

1. From the Responsive Forms page, click Manage Rules.



The Form Rules appears as follows:



2. Click Edit.

The following steps outline the process of creating a new Rule based on the Value of Property:

1. Click New Rule.



The New Rules screen appears as follows:



Name	The name of the Rule.
Condition	Describes when the rule will be applied.
Behavior	Describes the actions that are performed when the rule is applied.

There are 2 options for adding Conditions:

• Add Condition: This button allows users to create multiple conditions in a single rule.
• Add Group: Allows the user to add a group of conditions under an existing condition with And/Or aggregator. OR is default.



Note
If a group is deleted, the children conditions will move to the top level.

2. Click Add Condition.



Name	Description
Value of Property	Checks the value of a property of this item.
Property	Property of this item to be checked.
Operator	Type of comparison.
Criteria	Value used by comparison.

3. After selecting the Conditions for the new rule, Click Add Behavior.



Name	Description
Property	Property to be affected by this behavior.
Display as	Hidden – Field is not displayed in the form.Normal – Default Field.Read Only – Field data cannot be edited by user.

4. Click OK to add the rule.
5. Click Done to save the Responsive Form.

The following steps outline the process of creating a New Rule based on the identity of the current user:

1. Click New Rule.



The New Rules screen appears as follows:



Name	The name of the Rule.
Condition	Describes when the rule will be applied.
Behavior	Describes the actions that are performed when the rule is applied.

2. Click Add Condition.



Name	Description
Member of Identity	Checks whether the current user belongs to this identity
Identity	Identity to be checked.

3. After selecting the Conditions for the new rule, Click Add Behavior.



Name	Description
Property	Property to be affected by this behavior.
Display as	Hidden – Field is not displayed in the form.Normal – Default Field.Read Only – Field data cannot be edited by user.

4. Click OK to add the rule.
5. Click Done to Save the Responsive Form.

Rules that are created in a Responsive Form will be available to add to any other Responsive Forms.

1. Click Add Rule.



The Add Rule dialog appears as follows:



2. Click the Search button to display all rules that have been created.
3. Select the rule that is being added to the Responsive Form.
4. Click OK.
5. Click Done to save the Responsive Form.

The following steps outline the process of editing a Rule:

1. Select the Rule that needs to be edited.
2. Click Edit Rule.



3. Make the edits to the rule as needed.



Note
Rules may be used in multiple forms. Editing a rule will alter the rule for all forms that currently use it.
4. Click Done to save the Responsive Form.

The following steps outline the process of removing a Rule from a Form:

1. Select the Rule to remove from the Responsive Form.
2. Click Remove Rule from Form.



3. Click Done.

To reorder the rules, drag and drop the rules in the form rules table.

Packaging metadata like ItemTypes and Forms is an important part of managing an Aras Innovator instance. The Responsive Form Designer has a dedicated feature to simplify packaging. The following steps outline the process of adding a Responsive Form to a package in a few scenarios.

No action is required if the Form has already been added to a package from Responsive Mode. All data related to the Responsive Form definition has been added to the package definition. The Export Utility will export the current configuration, even if you’ve updated the Form since it was packaged.

In some cases, a Responsive Form may have been previously packaged as a Classic Form. In this case, the administrator needs to execute a one-time update to ensure the package definition contains all the necessary metadata for the Form’s responsive design. The following steps outline the process of updating a package definition containing a Classic Form that was converted to a Responsive Form: 1. Click on the More icon.

1. Select Update Package Definition.

1. Open the Form in the Responsive Form Designer.
2. Make sure the Form is saved and the designer is in view mode – there will be an Edit button in the toolbar instead of the Save and Done buttons.
3. Click on the More icon.



4. Select Add to Package Definition.



The Add selected item(s) to a package dialog box appears.



5. In the Select Package dropdown, either select the existing required package or create a new package.



6. Click Ok.



Now the Form item and the necessary related data will be included next time the specified package is exported.