Oracle® HTML DB Help
Release 1.6
  Go To Table Of Contents
Contents
Go To Index
Index

Previous
Previous
Next
Next
 

How to Control Form Layout

Information and form elements in an Oracle HTML DB application display on pages. Within a page, content displays in containers called regions. Individual data points are displayed as items contained within regions. This tutorial describes how to create a form used for data input and then change the layout by changing item and region attributes.

Topics:

Creating a Table and Data Input Form

The first step in creating a data input form is to create the underlying data objects in SQL Workshop. In this exercise, you create a table named HT_EMP and then use a wizard to create a new page.

Creating a Table

To create the HT_EMP table and the appropriate associated objects:

  1. Click SQL Workshop on the Workspace home page.

  2. Under SQL Scripts, click Scripts.

  3. When the Script Repository appears, click Create.

  4. In the Create Script Wizard:

    1. For Script Name, enter HT_EMP.

    2. In Script, enter the following DDL:

      CREATE TABLE ht_emp (
         emp_id                 NUMBER       primary key,
         emp_first_name         VARCHAR2(30) not null,
         emp_middle_initial     VARCHAR2(1),
         emp_last_name          VARCHAR2(45) not null,
         emp_part_or_full_time  VARCHAR2(1)  not null check (emp_part_or_full_time in ('P','F')),
         emp_salary             NUMBER,
         emp_dept               VARCHAR2(20) check (emp_dept in ('SALES','ACCOUNTING',
                                                                 'MANUFACTURING','HR')),
         emp_hiredate           DATE,
         emp_manager            NUMBER       references ht_emp,
         emp_special_info       VARCHAR2(2000),
         emp_telecommute        VARCHAR2(1) check (emp_telecommute in ('Y')),
         rec_create_date        DATE         not null,
         rec_update_date        date)/
       
      INSERT INTO ht_emp
         (emp_id, emp_first_name, emp_middle_initial, emp_last_name, emp_part_or_full_time, 
          emp_salary, emp_dept, emp_hiredate, emp_manager, emp_special_info, emp_telecommute,
          rec_create_date)
      VALUES
         (1,'Scott','R','Tiger','F',
          100000,'SALES',sysdate,null,'cell phone number is xxx.xxx.xxxx
      home phone is yyy.yyy.yyyy','Y',
          SYSDATE)/
       
      CREATE SEQUENCE ht_emp_seq
         start with 2/
       
      CREATE OR REPLACE TRIGGER bi_ht_emp
            BEFORE INSERT ON ht_emp
            FOR EACH ROW
         BEGIN
            SELECT ht_emp_seq.nextval
              INTO :new.emp_id
              FROM DUAL;
            :new.rec_create_date := SYSDATE;
         END;/
       
      CREATE OR REPLACE TRIGGER bu_ht_emp
            BEFORE UPDATE ON ht_emp
            FOR EACH ROW
         BEGIN
            :new.rec_update_date := SYSDATE;
         END;/
      
      
    3. Click Create Script.

      The script appears in the Script Repository.

    4. Click Run in the Actions column to run the HT_EMP script.

    5. From Parse As, select the schema owner that was initially provisioned with your workspace.

    6. Click Run Script.

  5. Run the HT_EMP script:

    1. In the Script Repository, click Run in the Actions column adjacent to the HT_EMP script.

    2. From Parse As, select the schema owner that was initially provisioned with your workspace.

    3. Click Run Script.

      Red text indicates errors while executing the file.

Creating a New Page Containing a Input Form

Next, create a new form using the Form on a Table or View Wizard.

To create a data input form:

  1. Navigate to the Workspace home page.

  2. From the Available Applications list, select Sample Application.

  3. Click Create Page.

  4. In the Create Page Wizard:

    1. Select Page with Component.

    2. Select the component type Form.

    3. Select Form on a Table or View.

  5. In the Form on Table Wizard:

    1. For Table/View Owner, select the schema owner used to create the HT_EMP table.

    2. For Table/View Name, select the HT_EMP table.

    3. On Identify Page and Region Attributes:

      • For Page, enter 900.

      • For the Page Name, enter HT_EMP.

      • For the Region Name, enter How to Layout a Form.

      • Keep the other defaults.

    4. On Identify Tab, accept the default Do not use tabs

    5. On Identify Primary Key, accept the defaulted Primary Key of EMP_ID. Note that the wizard reads the primary key from the database definition.

    6. On Primary Key Default, select existing trigger.

    7. On Identify Columns to Include, accept the default.

    8. On Identify Process Options, accept all the defaults.

    9. On Identify Branching, set all branching to the page you are creating (900). Since this page is just for demonstration, you will not be utilizing branching.

    10. Click Finish.

  6. View the Page Definition. Click Edit Page.

    The Page Definition for page 900 appears.

  7. Delete the following validation:

    • Under Page Processing Validations, select P900_REC_CREATE_DATE not null.

    • Click Delete.

About Default Wizard Behavior

Once you create the HT_EMP table and page 900, the next step is to run the page.

To run a page from the Page Definition:

  1. On the Page Definition, click the Run button in the upper right corner.

  2. For Username, enter the default username (that is, demo or admin).

  3. For Passward, enter your workspace name in lowercase letters.

  4. Cick Login.

As shown in Figure A-1, note that the HT Emp form contains basic employee details and includes select lists, text areas, and display only items.

By default, the Primary Key column does not display since it is assumed that the primary key is system generated. In reality, the primary key is included in the page, but appears as a hidden item.

Notice that the page defaults with one item per row and labels display to the left of the items. The item labels default to the column names with initial capitalization and with the underscores (_) replaced with spaces. You can override this default behavior by configuring user interface defaults for the table.

Also notice that items based on date columns default to include a date picker. Lastly, notice that the Emp Special Info item was created as a text area because of the size of the base column. This item type is a better choice for large text items since it allows for wrapping of input text.


See Also:

"Managing User Interface Defaults" for more information on user interface defaults

Changing Region Attributes

You can alter the appearance of a page by changing the region attributes.

To change the region title and other region level attributes:

  1. Navigate to the Page Definition for page 900 by clicking Edit Page 900 on the Developer Toolbar.

  2. Under Regions, select How to Layout a Form.

    The Region Definition appears.

  3. Change the Title to Employee Info.

  4. From Display Point, temporarily move the region by selecting Page Template Region Position 3.

    This moves the region to the right side of the page. The region display points are determined by the page level template. If you do not select a page level template, Oracle HTML DB uses the default page level template defined in the current theme. You can view specific positions by selecting the flashlight icon to the right of the Display Point list.

    Next, temporarily change the region template.

  5. From Template select Borderless Region.

  6. Click Apply Changes.

  7. From the Page Definition, click the Run icon. (See Figure A-2.)

    Figure A-2 HT_EMP Form with New Template

    Description of frm_reg_att.gif follows
    Description of the illustration frm_reg_att.gif

To change the region template back to the original values:

  1. Navigate to the Page Definition for page 900 by clicking Edit Page 900 on the Developer Toolbar.

  2. Under Regions, select Employee Info.

  3. From the Template list, select Form Region.

  4. From the Display Point List, select Page Template Body (3. Items above region content).

  5. Click Apply Changes.

Understanding How Item Attributes Effect Page Layout

Item attributes control the display of items on a page. Item attributes determine where a label displays, how large an item will be as well as whether the item displays next to or below a previous item. You can change multiple item labels at once on the Page Items summary page.

Editing Item Attributes

To edit item attributes:

  1. Navigate to the Page Definition for page 900.

  2. On the Page Definition, select the title Items.

    The Page Items summary page appears.

    You change how a page appears by editing the item attributes. Common item attribute changes include:

    • Changing item labels by editing the Prompt field.

    • Placing more than one item in certain rows to group like items together. For example, you could group all items that make up an employee's name.

    • Changing the item width. Many items display better when they have a width that is less than the maximum. To change the item width, enter a new value in the Width field.

    • Reordering the items. The initial order of items is based on the order of the columns in the table on which the region is based. You can reorder items by changing the sequence. You can reorder items by entering a new value in the Sequence field.

  3. To see the how item attributes affect page layout, make the following changes:

    1. Change the values in the Prompt, New Line, and Width fields to match those in Table A-1:

      Table A-1 New Prompt, New Line, and Width Field Values

      Prompt Field New Line Width
      Emp ID Yes 30
      First Name Yes 15
      Middle Initial No 2
      Last Name No 15
      Part or Full Time Yes 2
      Salary Yes 10
      Department Yes 15
      Hire Date Yes 10
      Manager No 15
      Special Information Yes 60
      Telecommute Yes 2
      Record Create Date Yes 10
      Record Update Date Yes 10

    2. Click Apply Changes.

    3. Click Run. (See Figure A-3.)

      Figure A-3 HT_EMP After Editing the Prompt, New Line, Width Attributes

      Description of frm_chg_item.gif follows
      Description of the illustration frm_chg_item.gif

    Note that some items are pushed too far to the right. This display is caused by the width of the Special Information item. Oracle HTML DB lays out regions as tables and of a width of each column is determined by the largest display width of the items in that column.

Fixing Item Alignment

There are several approaches to fixing item alignment:

  • For the items Middle Initial, Last Name and Manager items, set New Field to equal No.

    This places the items directly after the items they follow, but in the same column. This approach is best used for positioning embedded buttons next to items. Note that this setting can make text items appear squashed.

  • Change the Column Span field of the Special Information item.

    For example, setting the Column Span for the Special Information item to 5 would enable multiple items to display above and below it. This change causes five items to display above Special Information (First Name, Middle Initial, and Last Name).

    Be aware, however, that using Column Span to fix the display of the name does not result in a consistent layout. The Manager item would still be in the same column as Middle Initial. Because the Manager item is larger than Middle Initial, Last Name would still be pushed too far to the right. To fix this, you could change the Column Span of the Manager item to 3 so it displays above Special Information.

  • Reset the column width in the middle of the region by adding an item of type Stop and Start HTML Table. This forces the close of an HTML table using the </table> tag and starts a new HTML table. Inserting a Stop and Start HTML Table item just after the Last Name item, results in an even layout. Note that a Stop and Start HTML Table item only displays its label. You can prevent the label from displaying at all by setting it to null. To do this, you simply remove the defaulted label.

To add a Stop and Start HTML Table item and reset the column width:

  1. Navigate to the Page Definition for page 900.

  2. Under Items, click Create.

  3. On Identify Item Name and Display Position:

    1. In Sequence, enter 4.5.

    2. From Region, select Employee Info.

    3. For Label, remove X.

  4. Accept all the other defaults and click Create Item.

    The Page Definition appears.

  5. Click the title Items.

  6. For Special Information, change the Column Span to 3 and click Apply Changes.

  7. Click the Run icon.

Changing Label Placement

Item labels can display above, below, or to the left of an item. Labels can display left, right, or center justified. For labels set to left, you can further specify the vertical alignment options of top, bottom or center. Change the position of the Special Information label to above the item.

To change the placement of the Special Information label:

  1. Navigate to the Page Definition for page 900.

  2. Under Items, select the name of item P900_EMP_SPECIAL_INFO.

  3. Scroll down to Label.

  4. From the Horizontal/Vertical Alignment list, select Above.

  5. Click Apply Changes.

Adding a Region Header and Footer

Regions can have headers and footers. These typically contain text or HTML that displays at either the top or bottom of the region.

To add a region footer:

  1. Navigate to the Page Definition for page 900.

  2. Under Regions, select the region name Audit Information.

  3. Scroll down to Header and Footer Text.

  4. Enter the following in Region Footer:

    <i>The Record Create Date is the date that the record was initially entered in to the system. <br>The Record Update Date is the date that the record the record was last updated.</i>
    
    
  5. Click Apply Changes.

  6. Run the page.

  7. Expand the Audit Information region.

    Figure A-4 Audit Information Region with Footer

    Description of frm_reg_foot.gif follows
    Description of the illustration frm_reg_foot.gif

As shown in, the text of the footer is wrapped with the italic HTML tag and there is an imbedded a break. Without the manual break, the text would take up the entire width of the region (as defined by region template).

Making a Region Conditional

When you run page 900, the expectation is that the user will enter a new record. If the user provides a valid Employee ID, the page will retrieve a record from the HT_EMP table and display it for update. This functionality is accomplished using a before header process that was created when you ran the Form on a Table Wizard. While the information that appears in the Audit Information region is important for users when they are editing a record, it is not relevant when they are creating one.

You can have audit information only display when the user is editing a record, by creating a display condition for the Audit Information region so it only displays if the Employee ID is not null. Since the Employee ID is set by a trigger, it only exists for records retrieved from the database. You can control the display of audit information by using a built-in condition that checks for the presence of a value for the item containing the Employee ID (that is, P900_EMP_ID).

To create a conditional display for the Audit Information region:

  1. Navigate to the Page Definition for page 900.

  2. Under Regions, select the region name Audit Information.

  3. When the Region Definition appears, scroll down to Conditional Display.

  4. From the Conditional Display list, select Value of Item in Expression 1 is NOT NULL.

  5. In Expression 1, enter P900_EMP_ID.

  6. Click Apply Changes.

Adding Another Region for HTML Text

You have the option of displaying regions in columns rather than in rows. This exercise explains how to create another region to display hint text to the user.

To create a region to display hint text:

  1. Navigate to the Page Definition for page 900.

  2. Under Regions, click Create.

  3. On Identify Region Type, select HTML.

  4. On Region Type, select HTML.

  5. On Identify Region Attributes:

    1. In Title, enter Hint.

    2. From Region Template, select Sidebar Region.

    3. From Column, select 2.

  6. In Enter HTML Text Region Source, enter the following:

    Use this page to enter and<br>
    maintain employee information.
    
    
  7. Click Create Region.

  8. Run the page. (See Figure A-5.)

    Figure A-5 Page 900 with Hint Region

    Description of frm_hint.gif follows
    Description of the illustration frm_hint.gif

Changing Item Types

This exercise describes how to change item types to make data entry easier for the user. To change an item type, navigate to the Item attributes page and select another Display As option.

Changing an Item to a Radio Group

Because the Part or Full-time item only has two valid choices, this item is a good candidate for either a check box or a radio group.

To change the Part or Full-time item to a radio group:

  1. Navigate to the Page Definition.

  2. Under Items, select P900_EMP_PART_OR_FULL_TIME.

  3. From Display As, select Radiogroup.

  4. For Label, remove the label text (it will be redundant).

  5. Under List of Values, create a static list of values:

    • From Named LOV, select Select Named LOV

    • In List of values definition, enter:

      STATIC:Full-time;F,Part-time;P
      
      

    This definition will display as two radio buttons with the labels Full-time and Part-time, but the value that being inserted into the database will be either F or P.

  6. Click Apply Changes.

  7. Run the page. (See

Figure A-6 Part or Full-time item Changed to a Radio Group

Description of frm_radio.gif follows
Description of the illustration frm_radio.gif

Notice that Full-time and Part-time displays as radio group that is stacked in one column. You can have these button display side by side.

To have the Full-time and Part-time radio buttons display side by side:

  1. Navigate to the Page Definition for page 900.

  2. Under Items, select P900_EMP_PART_OR_FULL_TIME.

  3. Scroll down to Lists of Values.

  4. Set Columns to 2.

  5. Click Apply Changes.

By changing this setting to match the number of valid values (that is, Full-time and Part-time), the values display side by side.


See Also:

"Creating Lists of Values" for more information on creating shared (or named) LOVs at the application level

Changing an Item to a Select List

In the DDL you used to create the HT_EMP table, Department is validated by a check constraint. You can implement Department as a radio group, a select list, or a Popup LOV.

To change Department to a select list:

  1. Navigate to the Page Definition for page 900.

  2. Under Items, select P900_EMP_DEPT.

  3. From Display As, select Select List.

    The other Select List choices are for either redirecting the user to another page or URL based on the selection, or submitting the current page which is used when other information needs to be retrieved based upon the selection in the Select List.

  4. Under Lists of Values, create a static list of values:

    1. From Named LOV, select Select Named LOV

    2. In List of values definition, enter:

      STATIC:SALES,ACCOUNTING,MANUFACTURING,HR
      
      
    3. From Display Null, select Yes.

    4. In Null display value, enter:

      - No Assignment -
      
      

      The last two selections take into account that the EMP_DEPT column can contain nulls. As a best practice, whenever you implement a select list and have a column that can be null, you should set Display Null to Yes. Failure to do so, results in the item defaulting to the first item in the select list.

  5. Click Apply Changes.

  6. Run the page. (See Figure A-7.)

Figure A-7 Department Changed to a Select List

Description of frm_sel_list.gif follows
Description of the illustration frm_sel_list.gif

Changing an Item to a Check Box

The item Telecommute is ideal for a check box. When you change the Display Type, you can also move it up on the page and place is next to the Full-time and Part-time radio group.

To change Telcommute to a check box:

  1. Navigate to the Page Definition for page 900.

  2. Under Items, select P900_EMP_TELECOMMUTE.

  3. From Display As, select Checkbox.

  4. Under Displayed:

    1. In Sequence, enter 5.5.

    2. From Begin on New Line, select No

  5. Scroll down to List of Values.

  6. To have the label precede the check box:

    1. From Named LOV, select Select Named LOV

    2. In List of values definition, enter:

      STATIC:;Y
      
      

      This displays the check box after the label, but will not display a value associated with the check box. If the check box is checked, the value passed to the database will be Y.

  7. Click Apply Changes.

  8. Run the page.

About Label Templates

You can control the look of an item label by using a label template. Sample Application includes two label templates:

  • Required Label

  • Not Required Label

The Required Label template prepends a red asterisk (*) to the label. You may create your own label templates to control the look of labels using different fonts, borders, backgrounds, and images.

To change a label template:

  1. Navigate to the Page Definition for page 900.

  2. Under Items, select an item name.

  3. Scroll down to Label and make a selection from the Template list.

  4. Click Apply Changes.

  5. Run the page.

Changing Buttons

The wizard that created the form in this tutorial also created buttons. These buttons display conditionally based upon whether the page is being used to create a new record (that is P900_EMP_ID equals null), or the page is being used to update an existing record. These buttons were created as HTML buttons and positioned at the top of the region.

You can also position buttons at the bottom of the region, to the left or right of the page title, above the region, below the region, or in any button position defined in the region template.

To change a button position:

  1. Navigate to the Page Definition for page 900.

  2. Click the heading Buttons.

  3. Make a new selection from the Position column.

  4. Click Apply Changes.

  5. Run the page.

Buttons can also have templates associated with them to refine how they look.