LEXI Promo BR Web Scripting Bridge
PDF Print E-mail

ScreenIO Demonstration Continued - Add/Edit Screen

We're about to take a look at another common programming task that ScreenIO can help save time with: the Add/Edit screen. You can create an Add/Edit screen and tie it into the Listview screen we already made, and you end up with a complete file maintenance program.

This tutorial builds off of the ScreenIO Listview Screen Tutorial. If you haven't completed that tutorial yet, please do so now.

You can download the sample environment for this tutorial here:

Sample Environment
Sample Environment - Solutions

Design the Add/Edit Screen

The first step is to launch ScreenIO if you haven't already. Then select File->New from the windows dropdown menu. If you still had it open from the previous tutorial, make sure to save what you were doing first, of course.

At this point you should be looking at the familiar ScreenIO Screen Designer window.

ScreenIO Designer

The first step is to enter a Screen Name and select a file layout. Enter "CUSTEDIT" for the screen name, so that the listview screen we made earlier will find it properly.

Click on the File Layout button and select the Customer file layout that we've been working with.

Select File Layout

At this point you should see the fields list populate with all the fields from the customer file.

First, we'll want to add a caption to the screen. Do so by clicking the Add Caption button in the Toolbox in the bottom left corner of the screen. A new Caption appears in your screen near the top.

Under this caption we want a blank line. ScreenIO will do that automatically for you if you want by clicking the "Skip a Space" button in the Toolbox at the bottom left. Click this button once. Nothing will happen, but internally, ScreenIO has marked the next row as skipped, so that when you add controls later, they will automatically appear in the correct place. This step can be skipped, but we're doing it to save some time moving the controls around later.

Click on the Fields listview at the left of the screen now, and it will turn Yellow, indicating that your cursor is in it.

Fields List

From here, you can select any fields you want with the keyboard and add them to your screen using the Enter key.

Select the bottom four fields: Name, City, Zip, and Phone Number, and they will be added to the screen.

The Editor Window so far Add Exit Buttons

By now you should be looking at an editor window something like the screenshot above. If not, move the controls around the same way we moved the listview control in the last tutorial, using the keyboard or mouse.

When moving controls around on Add/Edit screens, it's useful to understand that the Captions for the fields are tied to the fields themselves. Therefore its very important to move the Fields first, and the Captions will move automatically.

Our new screen has almost all the controls its going to need. Only the exit buttons are missing. Add them by selecting each from the Windows Dropdown menu under "Add Control".

Editor Window So Far Adjust Screen Size

You may notice that the screen is much larger than we need it to be to display all the data. We can easily change the size by using Window Attributes, but this time around, lets look at another way to do it. Select "Adjust Screen Size" from the "Screen" dropdown menu, and ScreenIO will automatically adjust the screensize for you, shrinking it down and leaving just the right amount of space around the edges.

Editor Window So Far

By now, our screen is starting to take shape, but it's still pretty plain. Let's add a touch of color to liven things up. I've selected another shade of blue, to match the theme of the listview screen that we made last time. Having a similar theme will make the screens look like they're part of the same File Maintenance program.

Color Picker

Click on the "Background Color" button from the Window Attributes section of the toolbar to select a color.

After a little trial and error, I found a color that looked pretty good with the other screens color: 90B0FF. Enter it into the color picker window and click the "Select Color" button or press enter to accept the selection.

The screen so far

Our screen is starting to shape up.

If your buttons and text boxes don't look like the screenshot above, you may need to go into the Object Attributes window and ensure that they each have their foreground and background colors to "W". A color of "W" to BR means "use the windows appearance", whereas the default BR appearance will inherit from the controls parent window.

Go ahead and adjust the colors of any of your controls that look funky now.

The next step is to enter the details for the screen's Title Caption. Click on the Caption until you see its Object Attributes window.

Enter the following information for the attributes for the title caption.

  • Caption: "Enter Customer Details"
  • Justification Spec: "CC"
Setting the Caption Attributes

Adding Custom Code

By now the screen should be looking pretty good. There's only one important step left. This screenIO screen will work fine to add and edit records, but in our scenario, we want to do something special with the file whenever the user adds a new customer. We have addressed all the fields except the Customer Code field. This field places a unique identifier in the record, that the user never has to be concerned with. Therefore, whenever we add a new record, we need to automatically generate a customer code. The user never sees this field, so it doesn't matter what it is, but it does need to be a unique ID field.

In ScreenIO, you can override several events in order to place custom code in your screen. You can read all about them in the ScreenIO documentation, but for now we are concerned with the Initialize Event.

The Initialize Event runs in an Add/Edit screen whenever we're adding a new record. In this event you should place any code, such as defaults, or autogenerated values that go into creating a new record in your system.

The Read Event is another ScreenIO event that gets triggered whenever it reads an existing record. You can unpack the data from the disk into a more user-friendly version on the screen in the Read.

Our example program is simple. It doesn't need a Read event, but we do need an Initialize event.

Click on the "Set Form Events" button in the Window Attributes section of the Toolbar. A window showing all the form level event handlers pops up.

Form level event handlers

Click on the Edit button next to the Initialize Event. This will open the "Select Custom Function" dialog that we saw in the last chapter.

Select Custom Function

Type the name of our new event, "InitCustomer", and click the "New" button. Just like last time, MyEdit will pop up with a blank function, just waiting to be filled in. Enter the following code for the InitCustomer function, and save the function. (You should not enter line numbers in any ScreenIO custom function. The line numbers will be added for you by ScreenIO when it builds your helper library.)

  ! function\initcustomer.brs
  ! Created on 03/31/2010
  ! fnInitCustomer - This Function autogenerates a unique key to put in the customer file.
  def fnInitCustomer
     let f$(cu_code)=fnMakeUniqueKey$(DataFile)

FnMakeUniqueKey is a FileIO function that generates a key value unique to the given data file. You have access to all the FileIO functions from your ScreenIO Screens. ScreenIO handles the linkages for you.

Init Customer Function in MyEdit Form level events

Now that your function is entered and saved, you can switch tasks back to the ScreenIO window. You should see that your new function has been selected for you.

Our Screen So Far

There are only two other things we might want to adjust before we're done. We've established a gradient theme of blue between our two screens. The listview starts with the darkest shade and each new window that opens has a slightly lighter shade of blue.

It might be fun to complete the effect by setting the Background color of all the textboxes to blue on this screen.

The good news is, we don't have to set them one at a time. It's possible to select a group of controls in ScreenIO and edit them together.

The first step is to select the first textbox control by clicking on it. It will turn yellow, and the black and blue grid should appear, indicating that we're in movement mode.

Movement Mode, Textbox Selected

Now, press CTRL-S. This will make the textbox a shade of Yellow-Green. The Yellow indicates that the cursor is still in this control, and the green indicates that its part of a control group.

Movement Mode, Textbox part of Group

Now, click on one of the other textboxes. It will turn yellow, and the control you just left will now be a solid Green color. Press CTRL-S again to include this new textbox.

Continue through all four textboxes until they're all selected and green (or yellow green).

Movement Mode, All textboxes selected

Now that you have all the text boxes selected, you can move them around as a group, resize them together, align their edges, make them the same width, and more. To see a full list of options, check out the ScreenIO documentation.

Our controls are already in the correct positions. We're going to use the Selection Group to change the color of all of them simultaneously.

Click on one of the controls until you see the Object Attributes window appear.

Object Attributes Window

Now, click the Background Color button to bring up the Color Picker so we can choose a nice shade of light blue.

Color Picker

Enter a value of A7C0FF into the Color Picker and press Enter to select it.

Object Attributes Window showing Selected Control

At this point you can see the color has been changed, but the changes haven't been applied yet. Press ESC to unselect all the controls and exit out of the Object Attributes window, saving the changes.

Change all selected controls?

At this point ScreenIO will ask you if you would like to copy the changes to all the selected controls. Enter Yes to set the background color for all members of the selection.

Your screen should now look like the following screenshot:

Our Screen So Far

There's one other thing you usually want to check out on any Add/Edit screen. If you added the fields out of order and then rearranged them, the Tab Order (the order the cursor flows through the controls) may not be correct. In ScreenIO, it's very easy to set the Tab Order.

Simply click the "Set Tab Order" button in the Window Attributes section of the Toolbar, and all your input controls will turn light blue. A number will appear in each, showing the current tab order through the controls. To change it, simply click through the controls in the order you would like the cursor to flow. As you click on each control, it will turn green, and the new number will appear in the control.

If you make a mistake, you can press ESC to cancel. The results aren't saved until you've clicked all the controls.

Set Tab Order 1

In this screen, as with most Add/Edit screens, we want the tab order to flow intuitively from the top to the bottom.

Set Tab Order 2

Save and Test Screen

Once we're done, its time to save and test our new screen.

Save Test

As before, ScreenIO compiles your screen and then launches a new copy of BR to test it in. It appears to be working correctly, but it doesn't look like much running by itself.

Testing the Add/Edit Screen

Lets load up the Listview screen we made in the last chapter and run it. Press ESC or click the cancel button to exit the screen.

At the BR console, type:

  load customer/screenio

The listview runs like it did last time. Click on the "Edit" button to edit one of the Customer Records.

Testing the Add/Edit Screen in the proper Context

Congratulations! You just made a fully featured File Maintenance program from scratch in less time than ever possible before.

I can say from personal experience, once you get used to the ScreenIO system, it only gets faster. I made all the example screens for this demo in under 20 minutes.

This concludes our introductory training session for using ScreenIO. I hope you enjoyed the presentation, and I hope you consider joining us in making ScreenIO a BR Revolution.


BR Forum Annoucements


The FileIO library is a powerful BR library designed to aid the BR programmer in Read and Write access in a revolutionary way that brings much of the convenience of SQL to the BR Programmer. If FileIO is used properly, your File Layouts become the source for your BR Form Statements and your read/write access. Using FileIO also gives the BR Programmer access to a whole host of powerful development tools.


The ScreenIO library is a powerful library that builds on FileIO. ScreenIO is the fastest way we know of to develop business software.

A ScreenIO license is now included in the purchase of your BR license, in all copies of BR 4.32c and higher. Contact Gordon Dye of Business Rules Corp at gordon.dye@brulescorp.com , or (248) 619-0400 to update your BR license to the latest version. If you already have the appropriate BR license, then simply download ScreenIO from the link above! To use ScreenIO in older versions of BR, a special license may be purchased from Sage AX. For information, contact Gabriel Bakker of Sage AX at gabriel.bakker@gmail.com .


Entering line numbers is a constant distraction to the flow of creative thought. Programmers shouldn't have to concern ourselves with counting line numbers when we have computers to count for us. Allow LEXI to handle these cumbersome details for you. Enjoy better focus and greater productivity today.

Web Scripting Bridge

The BR Web Scripting Bridge is a free tool that enables the BR programmer to write interactive web pages that seamlessly integrate with your existing software suite. See the Sourceforge Page below for more information about the BR Web Scripting Bridge.

Audit BR

Audit BR is a powerful addon to FileIO that creates an Audit Log and can compare your BR data files between any two points in time. Using Audit BR will make your debugging and development more effecient, and it can also be used to find problems and fix them before they become bigger.