• The UI Designer, by itself, lets you make simple (and even some complex) changes to the “look-and-feel” of your Lawson application forms.
• To create even more complex customizations, you combine the API Builder and JavaScript components of Design Studio with the UI Designer.

• Explaining how to use Design Studio and its features via a static article is impossible.  Yes, I do gloss over some steps in this article.  My intention is to show you the highlights of modifying a form and to whet your appetite and imagination.
• This is not a replacement for Lawson’s documentation; as such, this article is not a re-hash of ‘this is a menu bar, this is the toolbox”, etc., etc.  If you want more detail, read the documentation and consider attending a Lawson-provided training session.
• Design Studio isn’t perfect; it can be flaky. Remember that it is a browser application. It can’t do everything and it does hang, but not as much as it used to. If you’re just starting out with it, you will achieve a certain level of frustration—I guarantee it. Even if you’re an experienced user, expect to lose your work on occasion. There are some ways to mitigate that (perhaps we’ll explore this topic in a future article). But, as I like to tell people: “it is what it is”.

• Simplifying forms for easier entry
• Setting default values for quicker processing
• Consolidating Form Tabs
• Rearrange Header and Line Fields
• Re-arrange field order and Tab key order
• Adding an image or logo to a form
• Removing unused fields
• Exposing hidden fields
• Moving fields from “More” buttons to main form itself
• Renaming field labels to match your terminology
• Repurposing User Fields

We are going to streamline this form by:

1. Removing all PO-related fields, since utility bills aren’t associated with a Purchase Order
2. Changing any fields that don’t require entry to display-only
3. Defaulting certain data values on fields which are consistently the same on utility bills
4. Removing unused tabs (i.e. Related Pages) which aren’t required for utility invoices

No, this is not that same QuickPaint you might have used before (via LID) to create Lawson forms for data fixes, etc. However, the concept is the same. The UI Designer reads the underlying form information (i.e. the .xml file associated with the form) and gives you a great starting point for modifying an existing form. Essentially, once you have this QuickPaint’d form, all you need to do is remove some fields.

Form Components in the UI Designer

Once you’ve QuickPaint’d the form, you can see it in the UI Designer:

One thing that will take some adjustment is that Design Studio has its own menu bar, which displays underneath the browser’s menu bar:

On countless occasions, I’ve dropped-down the wrong ‘File’ menu and tried to ‘Save’ the Lawson Design Studio .xml file using the IE menu bar!

Working with “Container” objects

Many Lawson forms use “Container” objects (Lawson calls these “complex objects”) for tabs and detail areas. In other words, a detail line “contains” other objects (i.e. text boxes, etc.). In order to change an object on a tab or detail line:

• Highlight the object that “contains” the object you want to modify
• Click on the ‘Object’ button
• The UI Designer window then displays the container object
• Make your changes
• Click on the ‘Parent Object’ to close the Container object and return to the parent.

Let’s Begin

We start by removing PO-related fields; simply click on the fields, and press Delete:

Setting Some Defaults

In this step, we’re going to default in the value for Invoice Company to be the same as the Company to which the user is assigned on RD30/LSF RM:

Set Display-Only Fields

We’re also selecting some fields, and making them display-only (i.e. user can see the but not enter into them). Select the field, then click the ‘Custom’ property and select the ‘Output Only’ checkbox:

...and Remove Some Unused Tabs

Relocating Fields from One Tab to Another

One of the ways to streamline a form is to move often-used fields from one tab to the 'Main' tab.  In this example, we're going move Invoice User Field 1 to the main tab.  (Using the same technique, I also move Description from the 'Options' tab to the 'Main' tab). 

As an aside, you might want to streamline a form so much that you really don't need to have tabs on the form at all.  Although the UI Designer doesn't provide that capability, there are two ways you can do it if you're an advanced user of Design Studio: 1) If know what you're doing, you can edit the XML (using the Source button in the View selection); or 2) don't use QuickPaint to generate the starting point for the form; use 'Blank Pallete' when you're creating the form, and then add only the fields that are needed.

Back to our form.  First, highlight and delete the field from ‘User Fields’ Tab:

Return to the 'Main' tab and double-click ‘Label’ in toolbox to insert a label; drag to new location, and click ‘Text’ to insert text:

Linking a Data Field to the Back-End form

Now we need to insert the Invoice User Field on the Main tab.

In one of the introductory articles, I talked about how Design Studio .xml files contain the information that Lawson Portal uses to link each object on the form back to the underlying Lawson application forms. This is done via Data Fields--each Data Field object on the Design Studio form is “linked” to an object on the underlying Lawson form. Double-click ‘Textbox’ in toolbox to insert a new field; click ‘Data Src’ to select which field on the underlying Lawson form to which the textbox should be bound:

Let's Work on the Details Section

• Remove the User Analysis and Activity / Account Category fields. 
• Default in values for Company, Accounting Unit, Account, and Sub Account. 
• Set the Company default just like we did above for the Invoice Company. 
• For the Accounting Unit and Account/Sub Account, use a "literal" value that makes sense for your accounting for utility invoices:

There's one thing you cannot do in the detail section—change the number of lines. That’s because it’s a function of the underlying form:

The Finishing Touches

The last thing we’ll do is change the title that displays on the form. To do this, select the form and click the ‘Title’ property to enter a new title:

Saving your Creation

Let's keep this simple and not get into a discussion of Local vs. Remote.  Save your new form to the 'Remote' (the Lawson Web Server) location:

Admiring Your Work

Use the ‘View | Preview’ menu option to preview your streamlined form (yes, it’s a “live” functioning form!)

In an upcoming article, we’ll dig into the topic of deploying your custom Design Studio forms.
 

- QUOTE OF THE ISSUE –

“Keep your fears to yourself, but
share your inspiration with others.”
-- Robert Lewis Stevenson