Content Freeze
As of July 25th, 2023, there is a content freeze on this page.
Getting Started
When you first launch Genie, you may notice that it automatically modernizes pieces of your application instantly by recognizing menus and turning menu options into hyperlinks, color striping subfiles (or turning them into grid components), changing function key labels into clickable buttons or hyperlinks, and more.
These default customizations can be configured to your liking using Genie's Administrator Tool.
For example, below is the WRKACTJOB screen, where you can can see a subfile grid component and function key hyperlinks on the side.
These default enhancements have been applied automatically. However, this is just a small fraction of what Genie can do to enhance your applications. Many additional enhancements can be added using the Genie Designer Tool.
The Genie Designer can be turned on by clicking the 
button on the Design Toolbar.
In design mode, a Properties Window will also appear. This window can also be moved around the page by clicking and dragging the blue title bar.
The Designer allows you to customize the modernization of each individual screen. This can include enhancements such as:
- changing subfile options to checkboxes,
- adding a chart or an image
- adding a dropdown box to replace an input field
- re-arranging any or all items on a screen to take advantage of the larger workspace of a browser window
- converting a crowded menu to one where menu options are clickable and grouped onto separate tabs
This process occurs in two steps:
- Recognize a screen by a unique identifier(s)
- Perform all of the designer customizations for that screen on the fly.
Setting up a Unique Identifier and Customizing a Screen
The first step to customizing a screen is to select one or more items that are unique to a particular screen and give the screen a unique name.
- Start Genie, sign in and navigate to the screen that is to be enhanced.
- Turn on the Designer. (Click the Design Mode is Off button on the Design Toolbar)
- Right-click on a heading or some other element of the screen that is unique to that screen. Select Mark as Identifier. This will name the screen automatically and assign this heading as a unique identifier. You can change the screen name to some other name in the Properties Window if you wish (no elements must be selected for the "screen name" property to appear).
Note: Multiple identifiers can be used on a screen. You can mark them individually, or use your mouse to select multiple fields to mark them all at once.
- Now, perform a small customization by clicking on any field and moving it to a different location.
- Click the Save button on the Design Toolbar. Then, turn off the Designer by clicking the Design Mode is On button.
- Your customization is complete. Every time you navigate to this screen the unique id will be recognized and the field move applied. It is now possible to apply more sophisticated enhancements to this screen.