Skip to content

Creating a Web View

Next, you will create a data entry Web View in the Studio, using the "Web View Wizard".

Tip

Ensure that the Current Project in Workspace Explorer is a web application, not a Windows Application. If you try to create a Web object, such as a Web View, and the current project is a Windows application, the Studio will display an error message and not allow you to create the component.

Steps to Create a Web View

  1. Click on the Create New button on the Studio’s toolbar.
  2. Click on the Web Object tab of the Create New... dialog.

  3. Double-click the Web View Wizard icon.

  4. Read the explanations on the first wizard page about what this wizard will do and click Next.

  5. On the Names wizard page:

  6. Enter oCustomerEntry as the object name,
  7. CustomerEntry as the filename, and
  8. Customer Entry as the description.

  9. Click Next.

  10. On the "Web View Style" wizard page, leave the default selection of Create a Simple Form Web View, then click Next.

  11. On the "Main Data-Dictionary" wizard page:

  12. Click on Customer - Customer_DataDictionary to select it as the data dictionary to be used, then click Next.

  13. On the "Entry Fields" wizard page:

  14. Click on the Add button to add the Customer_Number and Name fields to the web view.
  15. Click the Tab Page button to add a Tab Page.
  16. Next, add Address, City, State, Zip, Phone_Number, Fax_Number, EMail_Address, and Status.
  17. Then add another tab page.
  18. Next, add Credit_Limit, Purchases, Balance, and yet another tab page.
  19. Lastly, add Comments.

  20. The completed list of fields should look like this:

    Click Next.

  21. On the "Labels, Alignment and Preview" wizard page:

  22. Rename the 3 Tab Page Labels to Address, Balances, and Comments.
  23. Add a checkmark to the SameLn checkboxes next to Customer Name, State, Zip/Postal Code, and Fax Number.
  24. At the bottom of the page, change the Label Position radio to Left.

  25. The completed list should look like the 2 images below:


    At any time you are working on this page, you can click on the Adjust and Display button to get a preview of what the finished web view will look like.

    Click the X in the upper right-hand corner to close this preview and return to the wizard.

  26. Click Next. Click Finish on the last wizard page.
    You will now see the source code of the new web view in the Studio.

  27. Now, let's test your completed Web View.
    Click on the Run button on the Studio's toolbar. The Studio will compile and then run your project.
    When the application runs, your browser should display the http://localhost/QuickStart/Index.html page.
    Click on the Views menu and then Customer Entry to open your new view.

  28. You can now use any of the web application's menu and toolbar buttons to find, save, and delete records.

Next Step

Standard Web Application Features