Creating O4W WYSIWYG Forms

- From the O4W Main Menu choose O4W WYSIWYG.

* From the O4W WYSIWYG Menu choose Create/Modify. The O4W WYSIWYG IDE will display. The left panel of the IDE consists of the Menu choices and Widgets Toolbar. The center panel is the Design panel. The right panel is the Property Panel. The bottom of the IDE has additional navigation modes.

* From the Menu panel choose File, New to open the Quick Form Definition dialog.

* For the Form Type choose: Key and Search. Select the PRODUCTS table from the Table drop down list. Choose the dictionary items you want to include on this form. In the example below we have chosen the CATEGORY, CAT_DESC, ID, ORDER_DATE, PRICE and SALES_YTD fields. Click the OK button to continue.

* The QuickForm Details page has three tabs: Search Fields, Results Fields and Form Fields. Prior to selecting the Generate Form… button, make sure you have filled out the desired information on each tab. You cannot go back once the Generate Form button is selected.

* On the Search Fields tab select the dictionary fields you want to search on and provide the filed type. In this example we are choosing ID, DESCRIPTION, CATEGORY and CAT_DESC to search on..

* On the Results Fields tab select the dictionary items for the items you want to return for your search results. In this example we will display the ID, DESCRIPTION, CATEGORY and CAT_DESC fields. You can change the order of the fields by dragging and dropping.

* On the Form Fields tab select the dictionary items you want to display on your form. Use drag and drop to order your fields. Choose your field type for editing on the form. Next you can place your fields in different tabs on the form. In this example the ID and DESCRIPTION will be on the General Tab and CATEGORY, CAT_DESC, PRICE, ORDER_DATE and SALES_YTD will be placed on the Next Tab. The tab names will be renamed later. You can choose to put labels next to fields, above fields, use inline prompts or omit automatic labels. When all three tabs have been completed, click the Generate Form… button.

* Your form will be generated and you can begin editing on Page 1 of your form. This form will have three pages: Search page, Results page and Data Entry page. You can now start editing Page 1 which is the Search page. You can navigate between pages from the bottom panel.

* You can click and drag fields anywhere on the form. In this example the Go.. button has been moved next to the ID Text Box. The Category Description label has been resized and the text for this label has been modified via the Property Panel on the right side.

* Clicking on a control will display the properties for that control in the property panel on the right hand side of the form. If you would like to expand the properties for this control, click on the blue folder at the top left of the property panel. In the example below we can now view the Textbox Properties for the CAT_DESC field. The property panel has several tabs of properties to navigate.

* While on Page 1, clicking on the Edit Page Properties link on the bottom panel will display the Enter Key or Search Properties page. On this page we can define how we want to search on the ID, DESCRIPTION,CATEGORY and CAT_DESC fields.

* Click on the Edit Form Properties link on the bottom panel will open the Overall Form Properties dialog. This form has three tabs: Appearance, Behavior and Data. Below is the Appearance Tab.

* Below is the Behavior Tab for the Overall Form Properties.

* Below is the Data Table for the Overall Form Properties.

* From the Bottom Panel choose Page 2 from the Go to page: link. This will display Page 2 of your form which is the Search Results page. The fields we selected to return our results are: ID, DESCRIPTION, CATEGORY, CAT_DESC.

* Expand the area to display our search results by dragging to the right and dragging down to allow more rows to display on the form.

* Click on the blue folder at the top left of the Property Panel to display the Table Properties for this control. Here you can modify your Column Header text as well as many other table properties.

* From the bottom panel select the Edit Page Properties link to display the Key List Properties.

* From the bottom panel select Page 3 from the Go to page: link. This will display Page 3 of your form which is the Data Entry page.

* Click on the CATEGORY field to display the Text Properties. Modify the text alignment.

* Click on the HEADER to display the Header Properties. Modify the header description. Please note that each page has its own Header Properties. If you modify the description on Page 1 you will need to modify it on the other pages.

* While on Page 3, from the bottom panel click on the Edit Page Properties link. This will display the Display record contents Properties dialog.

* From the Menu panel select File, Save to save your form.

* Enter the name of your for..

* Build your O4W WYSIWYG commuter module.

* The commuter module will be generated and created as a stored procedure within OpenInsight.

* Your O4W WYSIWYG commuter module can be edited via the OpenInsight system editor.

* Exit to Menu.

* To run your O4W WYSIWYG Form, choose O4W WYSIWYG from the O4W menu.

* From the O4W WYSIWYG menu choose Run.

* Select your form and choose to run in desktop or mobile mode.

* The Product Entry form running in desktop mode. This is the Search screen.

* This is the Results screen in desktop mode.

* This is the Data entry screen in desktop mode.

* This is the Search screen running in Mobile mode.

- From your O4W Menu choose DB Management.

* From the DB Management Menu choose OI Maintenance.

* From the OI Maintenance Menu choose Procedures.

* Select the stored procedure created by the O4W Form.

* You can now modify your code, compile it and save it.