How to Improve Your SYSPRO Web UI with a Custom Form Field

Here’s a fun fact you might not know: SYSPRO’s Web UI is a playground for customization. With the right tweaks, you can tailor it to fit your business nearly perfectly. Today, we’re getting into something new: creating a Custom Form Field (CFF) in SYSPRO and adding it to a web view. This How To guide is all about making your data work better and smarter for you.

For this walk-through, we’re focusing on the Stock Code Setup web view. Now, let’s get to it.

Step 1: Open Stock Code Setup

Kick things off by navigating to the Stock Code Setup screen in your SYSPRO Web UI.

Step 2: Customize Application

Click the gear icon in the upper-right corner and select Customize Application from the dropdown menu.

This will open the “Customize Application window”, click on the Custom Form Fields tab as shown below.

Step 3: Creating Your Custom Form Field

You’re ahead of the game if you’ve already created your CFF. Skip to Step 6. Otherwise, let’s build it from scratch:

1. In the Customize Application: Stock Codes screen, click Custom Form Fields and select Custom Form Design.
   
2. Locate the relevant table (in this case, Stock Code) and click the hyperlinked field name.
   

3. Click the New icon and:
   1. Define the Field Type (e.g., text, date, number)
   2. Enter a Field Caption (this is the label everyone will see)
   3. Fill in any Field Specifics as needed.

4. Hit the Save icon to lock in your new field.

Step 4: Add Your CFF to the Stock Code Details

1. Back on the Customize Application screen, open Stock Code Details, and scroll down to locate your shiny new field.
2. Click the Add Field hyperlink.

3. Here’s the cool part: In your Web UI, you’ll see a “Add Field” smart link.
   1. Add to Web View: This drops the field directly into your web view.
   2. Click Done: This lets you fine-tune its placement in the Web View Designer.

4. You will get the following message if you click on “Add to Web View”. You will click “Yes”

5. Either way, the field is now part of your layout toolkit.

Step 5: Design Your Web View

Let’s get that field exactly where you want it.

1. Back on the Stock Code Setup screen, hit the gear icon again, and select Design Web View > Primary Layout.

In the Web View Designer:

2. Choose the section where you want to add your field.
3. Select Entry Fields, then Stock Code Details.

When the field list opens:

4. Scroll down to find your CFF.
5. Highlight it, apply any attributes, and click Add Field.

Step 6: Save

You’re almost there. Once you’ve added the field, you can:

1. Move it to the perfect spot.
2. Hit the Save icon to lock in your layout.
3. Boom! Your custom form field is now seamlessly integrated into your web view.

Why This Is Great

Custom Form Fields are simple yet powerful tools that let you capture data the way you want to. By integrating them into your Web UI views, you’re not just customizing your system; you’re optimizing it. If you’re interested in learning more, we previously dove into SYSPRO’s other interfaces, like desktop and mobile – giving something valuable to every SYSPRO user. Take these new skills and start experimenting. Add custom fields, fine-tune your layouts, and make SYSPRO work harder so you and your teams don’t have to. Need a hand? We’ve got your back, so give us a call.