This Fundamentals post will explain how Views and Forms can be used in Aras Innovator. The examples will build on the Purchase Order ItemType created in previous Fundamentals posts, specifically Creating an ItemType and Adding Detailed Properties.
A Form is what the user interacts with to author or view data in Aras Innovator. They are used to create, change, or view Items and data. A View is the Relationship between an ItemType and the Form. An ItemType can have multiple Views and Forms, which can be shown depending on how a user is interacting with the Item. These types of Forms are Default (which will show for everything), Add, Edit, View, Print, Complete, and Preview. Admins can change how Users see and interact with Forms, as well as which Forms a User sees and when. This blog will cover the basics of adding a Form and View to an ItemType. Forms are defined (and modified) using the Form Editor, and are then associated to an ItemType on the View Relationship Tab.
The Form Editor
The Form Editor includes standardized controls for designing Forms, and is divided into four main areas:
- Properties: A list of all Properties that have been added to the Form. Clicking on an element in the list will highlight the Field in the Form Layout area and update the information in the Field Definition tabs.
- Field and Form Definitions: Specific information about each Field and the Form. Each tab’s information and use are explained later in this blog.
- Form Layout: A click-and-drag area to design the layout of the Form that the user will see
- Field Toolbar: A series of controls that can be added to a Form and can then be associated with a Property. This is also where the xClass Tree Hierarchy for Extended Classification can be added, using the Add New xClass button.
Field and Form Definition Tabs
Field Type Tab
- Name: The name of the HTML field element
- Field Type: The data type for the Field, this changes the overall look of the Field
- Data Source: The Property value that is defined by this Field
- Display Length and Display Length Unit: length of the Field and the units to measure
Field Label Tab
- Label: The text of the Field’s label
- Label Position: Where the label is placed relative to the Field itself
- Text Alignment: Aligns label text when positioned above or below the Field
- Font Information: Adjusts the font styling for the Field label
- Positioning: How the Field is set up in the Form; Absolute X&Y (default and recommended) measures from the top left of the Form, Relative X&Y measures from browser placement, and Static ignores X&Y values and uses only browser placement
- X & Y: Coordinates for the Field’s position
- Field Order: When the Field is in a group box, specifies the order of the Field
- Tab Index: The tab-through order of the Field (if Tab Stop is checked)
- Z-Index: The order of overlapping layer – the greater the value, the further to the front an element is
- Visible: Displays or hides the Field element
- Disabled: Make the Field read-only
- Name: Name of the Form
- Identity: Who has access to the Form, this is defined in the ItemType’s View tab
- Function: Specifies what function (Edit, View, Print, etc.) uses the Form; default is both editing and viewing
- Classification: ItemType classification associated with this Form
- Description: Details about the Form
- Width & Height: Dimensions of the Form in pixels
- Style Sheet: Add custom CSS for the Form to use
- Category Form: Displays the Form in the Workspace Pane when the user clicks on the TOC Category, the Form name must match the Category value
- Background Color:
- Image: Adds a background image
- Repeat: Tiles the background Image
- Attachment: Whether scrolling moves the Form or if the Form is fixed
- CSS: Add custom CSS for the Form
Field Border: Useful for defining a Group Box or adding a border to a Field
Field CSS: Add custom CSS to the Field
Field Event: Add Methods that are triggered by something happening in the Field
Form Event: Add Methods that are triggered by something happening in the Form
Creating a Form
From the Table of Contents navigate to ItemTypes, search for the Purchase Order ItemType and open it for editing. Open the Views Relationship tab and click the Create Item button. A new row will be added to the grid. The first Form we add should have the Type (Default) and Identity (World), let’s keep those settings for now so the Form is viewable for every User under any circumstance. If we wanted to change when this Form is used or who can see the Form, this is where we would do that. Right click on this and select open to go to the Form Editor.
First, we need to add a name to the Form; click on the Form Properties tab and enter the name as Purchase Order. We want to add the seven custom Purchase Order Properties to the Form: _name, _price, _ponumber, _customer, _phone, _province, and _country. The easiest way to do this is to click on the Unused Properties dropdown menu in the Field Toolbar and select each of the Properties to add them to the Form. Adding the Fields this way will automatically associate the Field with the specific Property as its Data Source and choose the appropriate type for the Field. These settings can be changed in the Field Type tab as needed. If you’re building a Form without first relating it to an ItemType, you can Create Empty Fields from the toolbar and change their settings and properties manually.
Next, we’ll want to tweak a few Field settings and set the Form layout before we can call this Form done. Let’s start with the PO Number.
The PO Number will be automatically assigned to the Item when it’s saved, so users shouldn’t be allowed to enter or edit the value of the Field. We may still want to see that information, though, so we can leave it in but disable editing by checking the Disabled box under the Field Physical tab. Any Field Type can be disabled, though disabling something like a Group Box won’t disable its contents.
It also makes sense to group the Country and Province Fields together, since they make up the shipping information and one is a Filtered List dependent on the other. Start by adding an Empty Field to the Form using the Field Toolbar (the type doesn’t matter, as there is no empty Group Box button). With this Field selected, navigate to its Field Type tab and select Group Box from the field type dropdown, enter the name as shipping and set the orientation to vertical. Click over to the Field Label tab and delete the content of the Label field. Click on the Field Border tab, enter Shipping Information for the legend, a border width of 1 and a container name of shipping. Next, we’ll update the Country and Province Fields, in the Field Border tab set the container name to shipping, and in the Field Physical tab set the positioning to static and the field order to 1 and 2, respectively. The Form may need to be saved before these changes appear.
We can clean up the Form’s layout in two ways. The X and Y coordinates of the Field can be manually entered in the Field Physical tab, and the top left corner of the Field will align to those values. If we want to move objects with the mouse, Fields can be click-and-dragged around the Form Layout space. Optionally, Form Layouts can be made neater by enabling the ‘Snap’ option in the Field Toolbar. Choosing a snap value of 5 or 10 will automatically place moved elements on the nearest fifth or tenth pixel in the Form Layout area, respectively.
When everything is aligned, we can click the Save, Unlock, and Close button. We can test out the Form by either creating a new Purchase Order or opening an existing one for editing.
Conclusions and Congratulations
And we’re done! We’ve learned how to create a Form and customize its appearance. Since we built it from the ItemType View tab, it was automatically related to that ItemType. This blog just scratches the surface of everything that Forms and Views can do, so be on the lookout for more Aras Fundamentals post on Forms and Views. Or check out the Forums to ask and find answers to specific questions.