1. Copyright 2007, Information Builders. Slide 1 Enhancing Maintain Applications with HTML Mark Derwin and Mark Rawls Information Builders

2. Copyright 2007, Information Builders. Slide 2 Presentation Information  Authors: Mark Derwin and Mark Rawls  Company: Information Builders  Presentation Title: Enhancing Maintain Applications with HTML  Presentation Abstract: Deployed Maintain forms are displayed as DHTML. You can enhance objects, like the HTMLTable, by adding simple HTML commands to your code. This lab shows you how.

3. Copyright 2007, Information Builders. Slide 3 Enhancing Maintain Applications with HTML Creating a New Project  Right-click on Projects on localhost and select New Project…  Enter HTMLTable and Click Next >

4. Copyright 2007, Information Builders. Slide 4 Enhancing Maintain Applications with HTML Creating a New Project  The Movies Master and FOCUS files are already included in this directory so we don’t need to add any files.  Click Finish

5. Copyright 2007, Information Builders. Slide 5 Enhancing Maintain Applications with HTML Creating a New Project  Double click on the Master Files folder under HTMLTable to display Master files  Highlight Movies.foc and Movies.Mas  Click on the Icon with the + to include to files into the project

6. Copyright 2007, Information Builders. Slide 6 Enhancing Maintain Applications with HTML Creating a New Project  Right-click on the Maintain Files Folder and select New >  Select Maintain Procedure  Name it LAB1 and click Open

7. Copyright 2007, Information Builders. Slide 7 Enhancing Maintain Applications with HTML Inside the MDE  MAINTAIN – All Maintains start with the word MAINTAIN in upper case  END – All Maintains end with the word END in upper case  All other commands can be mixed case  Use -*, $$, $* *$ for comments

8. Copyright 2007, Information Builders. Slide 8 Enhancing Maintain Applications with HTML Adding a Data Source  Right-click on LAB1 and select Use data sources…  Double-click on movies to move it from Available data to Data sources to use  You can use up to 15 data sources per procedure  Click OK  Notice that the MAINTAIN command line now contains the file name

9. Copyright 2007, Information Builders. Slide 9 Enhancing Maintain Applications with HTML Loading the Stack  A stack is an array containing database or computed fields  Columns are fields and rows are data  Reads Master File to know field names, formats, lengths and position  Load up a stack with the NEXT command  We are loading 10 records into a stack named STK  Click Save

10. Copyright 2007, Information Builders. Slide 10 Enhancing Maintain Applications with HTML Creating a Form  Expand the LAB1 folder  Expand the Forms folder  Double-click on Form1 to display the form  Maximize the form

11. Copyright 2007, Information Builders. Slide 11 Enhancing Maintain Applications with HTML Adding an HTML Table  Select the HTML Table object from the Control Palette  Click on the upper left corner of the form, drag the cursor to the right side of the form to create a rectangle.  Select Stk and move over: Moviecode, Title and Category  Click OK

12. Copyright 2007, Information Builders. Slide 12 Enhancing Maintain Applications with HTML Running the Application  Save and Run  Right-click on LAB1 and select Run Procedure  Once Deployment is successful, click Close

13. Copyright 2007, Information Builders. Slide 13 Enhancing Maintain Applications with HTML Running the Application  Click X to return to the MDE  If code is not displayed, double-click on LAB1

14. Copyright 2007, Information Builders. Slide 14 Enhancing Maintain Applications with HTML Adding a Checkbox  Add a Checkbox to an HTMLTable to allow the user to select a row  Use HTML Tags  Input Type: CheckBox  Name: Must be unique for each row  Value: 1 or blank. You can change retrieval value  Use Form.GetHTMLField to retrieve the values from the HTMLTable.  You cannot resort this stack after you create the Checkbox

15. Copyright 2007, Information Builders. Slide 15 Enhancing Maintain Applications with HTML Enhancing the Code  Create a cbox field in STK for every row in the stack – Stk.Foccount  Give each check box a unique name – Concatenate counter to ‘check’  If checked, the returned value is 1. That can be changed  Create GetData case to retrieve selections  Create Sel field to retrieve values from HTMLTable – Uses GetHTMLField  Save!

16. Copyright 2007, Information Builders. Slide 16 Enhancing Maintain Applications with HTML Editing the HTML Table  Double-click on Form1 to display the form  Double-click on the HTMLTable to display the columns  Scroll down. Notice that cbox and Sel are on the column list

17. Copyright 2007, Information Builders. Slide 17 Enhancing Maintain Applications with HTML Editing the HTML Table  Add Cbox and Sel to the Table columns  Use the arrows to make Cbox the first field  Double-click on Cbox to edit the column

18. Copyright 2007, Information Builders. Slide 18 Enhancing Maintain Applications with HTML Editing the HTML Table  Change the Width of Cbox to 6.  Change the Content type from: 0 – Text To1 – HTML  Click OK to exit this screen  Click OK to return to the form

19. Copyright 2007, Information Builders. Slide 19 Enhancing Maintain Applications with HTML Adding a Button  Select the button object from the tools palette.  Draw a rectangle under the HTMLTable  Change the text to Process  Click on the Events Tab for the button  Select the Click Event and the Events screen opens

20. Copyright 2007, Information Builders. Slide 20 Enhancing Maintain Applications with HTML Adding a Button  Button1 & Click are selected and Maintain function is clicked  Expand the Functions folder  Drag the GetData case from Functions into the Event  Save and Run - Right-mouse click on LAB1 and select Run Procedure

21. Copyright 2007, Information Builders. Slide 21 Enhancing Maintain Applications with HTML Running the Application  To pre-check a value, use the keyword CHECKED Compute Stk(I).cbox/a100 = " ";  NOTE: Do not resort the stack when using this technique!

22. Copyright 2007, Information Builders. Slide 22 Enhancing Maintain Applications with HTML Adding a List Box  Add a List Box to an HTMLTable to allow the user to select a value from a drop down list  Use HTML Tags  Select  Name: Must be unique for each row  Value: Retrieval and display  Value can be static or dynamic  Retrieve database values and assign them  Use Form.GetHTMLField to retrieve the values from the HTMLTable.  You cannot resort this stack after you create the List Box

23. Copyright 2007, Information Builders. Slide 23 Enhancing Maintain Applications with HTML Adding a List Box  Double click on LAB1  Create a lbox field in Stk  There are two values for each entry:  Retrieval and Display  This code leaves row 1 blank  Add a line in GetData  NewRate contains the selected value.  SAVE  Click on Form1 to display the form.  Double-click on the HTMLTable

24. Copyright 2007, Information Builders. Slide 24 Enhancing Maintain Applications with HTML Adding a List Box  Add fields Lbox, Rating and Newrate to the columns  Double-click on Title and change its width to 20. Click OK  Double-click on Lbox to change its format

25. Copyright 2007, Information Builders. Slide 25 Enhancing Maintain Applications with HTML Adding a List Box  Change the width to 10  Change the content type to 1 – HTML  Click OK to save  Click OK to return to the Form  Save and Run  NOTE: Do not resort the stack when using this technique!

26. Copyright 2007, Information Builders. Slide 26 Enhancing Maintain Applications with HTML Running the Application  When you process, all list boxes reset  Retrieve all values before screen resets  This example shows static values. You can substitute values for values in the database and only show valid items per line. Like Cars by Country or Employees by Department.

27. Copyright 2007, Information Builders. Slide 27 Enhancing Maintain Applications with HTML Presetting the List Box with Database Value compute x1/10=''; compute x2/10=''; compute x3/10=''; compute x4/10=''; compute x5/10=''; compute x6/10=''; if stk(i).rating = ' ' then compute x1='selected'; if stk(i).rating = 'G' then compute x2='selected'; if stk(i).rating = 'NR' then compute x3='selected'; if stk(i).rating = 'PG' then compute x4='selected'; if stk(i).rating = 'G13' then compute x5='selected'; if stk(i).rating = 'R' then compute x6='selected'; Compute Stk(I).lbox/a250 = " " | " G " | " NR " | " PG " | " PG13 " | " R " | " "

28. Copyright 2007, Information Builders. Slide 28 Additional Techniques - Homework

29. Copyright 2007, Information Builders. Slide 29 Enhancing Maintain Applications with HTML Adding an Input Field  Add an input field to an HTMLTable to allow the user to enter a value.  Use HTML Tags  Input Type: Text  Value: Blank, Static or dynamic  Size: Display Length  Use Form.GetHTMLField to retrieve the values from the HTMLTable.  You cannot resort this stack after you create the input field

30. Copyright 2007, Information Builders. Slide 30 Enhancing Maintain Applications with HTML Adding Input Fields  Add a field for input  VALUE can be blank, static or dynamic  SIZE is only kind of respected  Edit HTMLTable and include Inbox and Inval fields  Edit Inbox column  Change width to 10  Change Content type to 1 – HTML  Retrieve data in GetData  NOTE: Do not resort the stack when using this technique!

31. Copyright 2007, Information Builders. Slide 31 Enhancing Maintain Applications with HTML Adding Input Fields  You can change the input fields to password fields by replacing the word text with password: " ";

32. Copyright 2007, Information Builders. Slide 32 Enhancing Maintain Applications with HTML Adding a Radio Button  Add a Radio Button to an HTMLTable to allow the user to make a selection  Use HTML Tags  Input Type: Radio  Value: Retrieve and Display  Values can be blank, static or dynamic  Dynamic not recommended. Too many options may get truncated  Use Form.GetHTMLField to retrieve the values from the HTMLTable.  You cannot resort this stack after you create the input field

33. Copyright 2007, Information Builders. Slide 33 Enhancing Maintain Applications with HTML Adding Radio Buttons  Click on LAB1 for code  Add rbutton and Rval to STK for display and retrieval.  Double-click Form1 and add rbutton and Rval to the HTMLTable  Edit rbutton column  Change width to 25  Change Content Type to 1 – HTML  Save and Run

34. Copyright 2007, Information Builders. Slide 34 Enhancing Maintain Applications with HTML Adding Radio Buttons  Top Case Code Compute Stk(i).rbutton/a250 = " G " | " NR " | " PG " | " PG13 " | " R " Compute I=I+1;  Case GetData Code Compute Stk(I).Rval/a4 = Form1.GetHTMLField('radiox' || I);

35. Copyright 2007, Information Builders. Slide 35 Enhancing Maintain Applications with HTML Adding Radio Buttons  You can set a default checked entry by adding the word CHECKED to the desired row: " NR “