5 How to Work with Check Boxes

Change Product Available Radio Group to a Check Box

To change the Product Available radio group to a check box:

1. Navigate to the Page Definition for page 6. Select Edit Page 6 from the Developer Toolbar.

2. Under Items, select P6_PRODUCT_AVAIL.

3. From Display As, select Checkbox.

4. Scroll down to List of Values.

5. Under List of Values:

   1. From Named LOV, select Select Named LOV.

   2. In List of values definition, enter:

      STATIC:;Y
      
      

      In this instance, the display value is null and the return value is Y. If a display value were provided, it would appear to the left of the check box and could be used in place of the label.

6. Click Apply Changes.

   The Page Definition appears.

7. Run the page by clicking the Run Page icon.

As shown in Figure 5-2, note that the Product Available item now displays as a check box.

Figure 5-2 Product Available Item as a Check Box

Description of the illustration chk_check1.gif

Alter the Check Box Position

Next, you move the check box label to the right side of the check box.

To change the position of the check box label:

1. Navigate to the Page Definition for page 6. Select Edit Page 6 from the Developer Toolbar.

2. Under Items, select P6_PRODUCT_AVAIL.

3. For Label, delete the text Product Available.

4. Under List of Values, change the List of values definition to:

   STATIC:Product Available;Y
   
   

5. Click Apply Changes.

6. Run the page by clicking the Run Page icon.

As shown in Figure 5-3, note that the label Product Available now displays to the right of the check box.

Figure 5-3 Product Available Label Moved to the Right

Description of the illustration chk_check2.gif

Removing the label and adding the display value to the LOV causes the HTML DB engine to render the check box first and then the display value, Product Available.

Change Default Check Box Behavior

In certain circumstances, you may want a check box to be enabled by default. You can accomplish this by setting the default value attribute of the check box item. One disadvantage of this approach is that you need to perform some extra steps to disable it. Because of the way you defined the Product Available check box, it is virtually impossible to disable it.

Consider the following example:

1. Navigate to the Home page by selecting the Home tab.

2. From the Tasks list, select Add a New Product.

3. On the Add/Modify Product page:

   1. Fill in the required fields (fields marked with an asterisk).

   2. Disable the Product Available check box.

   3. Click Create.

4. Disable the Product Available check box again and click Apply Changes.

   The Product Page appears.

5. Select the Edit icon for product you just added.

   Notice that the Product Available check box is enabled even though you disabled it twice when you added the product. This behavior results from the fact:

   • The Product Available check box has a default value of Y.

   • When Product Available is NULL, it defaults to the default value Y which enables the check box.

Create a Multi Value Check Box

To a create muli value check box:

1. Navigate to the Page Definition for page 3.

2. Under Items, click the Create icon.

3. For Item Type, select Check Box and click Next.

4. On Display Position and Name:

   1. For Item Name, enter P3_SHOW.

   2. For Region, select Products (1) 10.

   3. Click Next.

5. For List of Values:

   1. For Display Null Option, select No.

   2. In List of Values Query, enter:

      SELECT distinct category a, category b
      FROM demo_product_info
      ORDER BY 1
      
      

      Note that to create a multi value check box, the List of Values query needs to return more than one row.

   3. Click Next.

6. On Item Attributes:

   1. For Label, remove the default text by clicking Clear.

   2. Click Next.

7. For Source:

   1. For Item Source, select Static Assignment.

   2. For Item Source Value, enter:

      Audio:Computer:Phones:Video
      
      

      When a multi value check box is submitted, the value of the item is a colon delimited string of values. Using this string as the source will ensure all boxes are checked when HTML DB engine renders the page.

   3. Click Create Item.

Alter Check Box Display Values

To edit check box display values (or labels) to appear in bold:

1. Navigate to the Page Definition for page 3.

2. Under Items, select P3_SHOW.

3. Scroll down to Element.

4. In Form Element Option Attributes, enter:

   class="fielddatabold"
   
   

   Form Element Option Attributes are used exclusively for check boxes and radio buttons and control the way the HTML DB engine renders individual options.

5. Click Apply Changes.

Change Where the Check Boxes Display

Next, you edit attributes so that the category check boxes display above the report. To accomplish this, you need to change the Display Point attribute of the region associated with P3_SHOW.

To change the display point of the Products region:

1. Navigate to the Page Definition for page 3.

2. Under Region, select Products.

3. From Display Point, select Page Template Body (3. items above region content).

4. Click Apply Changes.

If you ran page 3 now, you would notice the category check boxes display vertically. Next, you will change the display so the category check boxes display horizontally.

To alter where the category check boxes display:

1. Navigate to the Page Definition for page 3.

2. Under Items, select P3_SHOW.

3. Scroll down to List of Values.

4. In Columns, enter 4.

5. Click Apply Changes.

Create a Go Button to Submit the Page

In order for the report to be driven by the product category check boxes, you need to submit the page.

To create a button to submit the page:

1. Navigate to the Page Definition for page 3.

2. Under Buttons, click the Create icon.

3. For Button Region, select Products (1) 10 and click Next.

4. For Position, select Create a button displayed among this region's items and click Next.

5. For Button Attributes:

   1. For Button Name, enter P3_GO.

   2. In Sequence, enter 40.

   3. Click Create Button.

Next, you need to create a branch to tell the HTML DB engine where to go after the user clicks the Go button.

To create a branch to page 3:

1. Navigate to the Page Definition for page 3.

2. Under Branches, click the Create icon.

3. For Branch Point and Type, accept the defaults and click Next.

4. For Page, select 3 and click Next.

5. Click Create Branch.

In order to generate a report based on the category check box values, you need to change the report query.

To edit the report query:

1. Under Regions, select Products.

2. Scroll down to Source.

3. In Region Source, change the WHERE clause to read:

   WHERE p.image_id = i.image_id (+)AND instr(':'||:P3_SHOW||':',category) > 0
   
   

4. Click Apply Changes.

5. Run the page by clicking the Run Page icon.

As shown in Figure 5-4, notice you can filter the report by selecting a category check box at the top of the page.

Figure 5-4 Product Page with Category Check Boxes and Go Button

Description of the illustration chk_chkboxs.gif

Adjust Default Check Box Behavior

Although the category check boxes correctly filter the content on page 3, if you deselect all the check boxes, notice the report returns all products. This behavior results from the fact that if a check box has a NULL value (that is, it is deselected), it defaults to the default value Y. The default value of Y in turn enables the check box.

You can alter this behavior by adding a computation that remembers the state of the check box.

To add a computation that tracks the state of the check box:

1. Navigate to the Page Definition for page 3.

2. Under Computations, click the Create icon.

3. For Item Location, select Item on This Page and click Next.

4. For Item:

   1. For Compute Item, select P3_SHOW

   2. For Computation Point, select After Submit.

   3. For Computation Type, select Static Assignment.

   4. Click Next.

5. For Computation:

   1. For Computation:

      none(bogus_value)
      
      

   2. Click Next.

   
   

   Note: A static assignment of an item needs to be something other than Y or NULL.

   
   

   Next, create a condition that controls when the computation executes.

6. On Condition:

   1. For Condition Type, select Value of Item in Expression 1 is NULL.

   2. In Expression 1, enter:

      P3_SHOW
      
      

      As a result of these settings, this computation will only execute when the value of the check box item, P3_SHOW is NULL.

7. Click Create.

Run the page again and deselect all the category check boxes. Notice that this time the report contains the expected result (no returned records).

Call HTMLDB_ITEM.CHECKBOX

To edit the query to call HTMLDB_ITEM.CHECKBOX:

1. Navigate to the Page Definition for page 3.

2. Under Regions, click Products.

3. In Region Source, add the new line appearing in bold face to the query.

   SELECT p.product_id edit_product, p.product_id view_product_id,
   htmldb_item.checkbox(1,p.product_id) del, 
   p.product_name, p.product_description, p.category, p.product_avail, p.list_price, '<img src="#OWNER#.custom_image_display?p_image_id=' || nvl(i.image_id,0) || '" 
   height="50" width="50" />' img
   FROM demo_product_info p, demo_images i
   WHERE p.image_id = i.image_id (+)
   AND instr(':'||:P3_SHOW||':',category) > 0
   
   

   HTMLDB_ITEM is an Oracle HTML DB supplied package you can use to generate certain form elements dynamically. Note the value passed in for p_idx in the above example is 1. You reference the check box values using the global variable HTMLDB_APPLICATION.G_F01 later on.

4. Select the Report Attributes tab.

5. Under Column Attributes, locate the Del column.

6. Click the Up arrow until the DEL column is directly beneath VIEW_PRODUCT_ID. (See Figure 5-5).

   Figure 5-5 Report Column Attributes Page

   
   Description of the illustration chk_rpt_attr.gif
   
   

7. Click Apply Changes.

Add a Button to Submit Check Box Array Values

To add a button to submit the check box array values:

1. Navigate to the Page Definition for page 3.

2. Under Buttons, click the Create icon.

3. For Select a region for the button, select Products 1 (10) and click Next.

4. For Position, select, select Create a button in a region position and click Next.

5. For Button Attributes:

   1. For Button Name, enter DELETE_PRODUCTS.

   2. For Label, enter Delete Products.

   3. Click Next.

6. For Button Template, accept the default selection and click Next.

7. For Position, select Top of Region and click Next.

8. For Branch to Page, select 3 Products and click Create Button.

Add a Process

To add a process that executes when the user clicks the Delete Products button:

1. Under Processes, click the Create icon.

2. For Process Type, select PL/SQL and click Next.

3. For Name, enter Delete Products and click Next.

4. Enter the following PL/SQL process and click Next:

   FOR i in 1..HTMLDB_APPLICATION.G_F01.count
   LOOP
      DELETE FROM demo_product_info
      WHERE product_id = HTMLDB_APPLICATION.G_F01(i);
   END LOOP;
   
   

   HTMLDB_ITEM is an Oracle HTML DB supplied package you can use to generate certain form elements dynamically. When a page is submitted, the values of each column are stored in global package arrays, which you can reference using the PL/SQL variable HTMLDB_APPLICATION.G_F01 to HTMLDB_APPLICATION.G_F50. In this exercise, the value passed in for p_idx in EMPNO column is 1, so you reference the EMPNO column values using the global variable HTMLDB_APPLICATION.G_F01.

5. On Messages:

   1. In Success Message, enter:

      Product(s) deleted.
      
      

   2. In Failure Message, enter:

      Unable to delete product(s).
      
      

   3. Click Next.

6. Click Create Process.

If you run the page, the Delete Products button appears above the report. (See Figure 5-6). To remove a product from the report, select the Del check box and click Delete Products.

Figure 5-6 Products Report with Delete Products Check Box

Description of the illustration chk_del_prod.gif