Customizing Forms: Tips and Tricks

Customizing Forms: Tips and Tricks

When you’re working in Aras Innovator, most of the time you’re working in a Form. Forms are where you create new items, edit existing items, write code, and even where you edit a Form! Learning to make your Forms easier or quicker to use is a lesson that you can carry forward into every Item you use- and remember Labs’ unofficial motto, “Everything Is An Item!”

For this article, we’re going to look at some tips and tricks for Forms. While the basics of Forms can be found here, today we’re going to focus on more niche options for Fields. Screenshots and steps are taken from Aras Innovator Version 12 SP 15, but should be roughly the same for any service pack for Version 12. We assume that you have an admin account on the Aras Innovator instance.

Grouping Fields

Sometimes you’ll see forms with a group of inputs. For developers used to working with HTML or Windows Forms, the idea of outlining several pieces of a form with a groupbox or a div is a natural idea. Aras Innovator has you covered with containers.

  1. Open up the form you want to edit.
  2. Click the Edit button in the top left.
  3. Make a new field by clicking one of the field buttons- we’ll use a text box.
  4. In the Field Type tab, change that field’s Field Type to Group Box.
  5. Now, for any fields that you want to put in that box go to their Field Border tab, and type the name of your group box into the Container Name field.
  6. Make sure that, In Field Physical, the position is set to static and there is a value for Field Order.
  7. Click save.

Now, you'll see your second field just under the label for your group box. You can repeat steps 5 and 6 as many times as you want, to add as many fields as you want to the box. They'll sort themselves by the Field Order, lowest first, so that they'll show up Field Order 1 first, Field Order 2 next, and so on. It's a good idea to leave gaps, perhaps counting by ten, in case you later want to insert something without reordering all of the Field Order values.

 Field Border

While our inputs are new grouped, and will stay together as you move the group box around the form, this might not be obvious to your users. Of course, it doesn’t have to be. Maybe you just want the convenience of the group box. If you want to make it apparent to the end user however, the field border can be used to that effect quite well.

  1. Select the box from the list of fields at the top right of the form editor.
  2. In the Field Border tab, change the Border Width to be a positive number. A little goes a long way here, and it’s likely you’ll be satisfied with a border width of 1.
  3. Hit Save, at the top left.

Now you should see a clear border around your fields, allowing your users to understand that these things are related. You did this all without writing code! Of course, if you've written significant amounts of web code before, you might be wondering if there's a way to make use of your skills, and there is.

Field CSS tab

Aras Innovator might be functional, but its aesthetics- white and gray- might not be what you’re looking for. If you want to add some style to your forms, the Field CSS tab is your ticket. Cascading Style Sheets are used throughout the web to alter the appearance of a website, controlling everything from color to the size and shape of buttons. In the Field CSS tab, you can use many of the same tricks you’d use on a custom website. There is however, one extra hoop.

Because these styles need to work on individual form elements within Aras Innovator, they need a special prefix.

While here we’re just setting the width, any web developer should be able to pick up right where we set width in our example and add any number of custom style tweaks. Aras Innovator chooses its style for clarity and simplicity, and to avoid clashing with what your organization wishes to look like. If you choose however, this can be a great way to remind your users that they’re still in your system, on a web page that your organization controls. We’re just glad you’re using Aras Innovator to do it. And of course, if you want to affect all of the elements on the form, you can always use the Form Body tab's CSS field.

Actually, lets say that again just to be sure. If you're a web developer, you probably expect CSS changes to a button to affect all buttons. However, field CSS just affects this one example. If you want to affect all of the elements on the form, use the Form Body tab's CSS field. I have made that mistake. It was less funny the third time.

Conclude

 None of these changes are large, but they all demonstrate one thing: Aras Innovator is as flexible as you need. If you don't need these tricks, then that's because Aras Innovator is already doing what you need it to do, but you're never locked into place. Later on, maybe you'll decide you need to make a change in how your form appears, and if that happens then this article will still be here, and Aras Innovator will still be able to adapt to your changing needs. Are there any changes you've made to the look of Aras Innovator? Let us know in the comments below!

Mike Lindner