Enhancing Maintain Applications with HTML

1. Enhancing Maintain Applications with HTML Mark Derwin and Mark Rawls Information Builders

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. Enhancing Maintain Applications with HTMLCreating a New Project • Right-click on Projects on localhost and select New Project… • Enter HTMLTable and Click Next >

4. Enhancing Maintain Applications with HTMLCreating 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. Enhancing Maintain Applications with HTMLCreating 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. Enhancing Maintain Applications with HTMLCreating a New Project • Right-click on the Maintain Files Folder and select New > • Select Maintain Procedure • Name it LAB1 and click Open

7. Enhancing Maintain Applications with HTMLInside 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. Enhancing Maintain Applications with HTMLAdding 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. Enhancing Maintain Applications with HTMLLoading 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. Enhancing Maintain Applications with HTMLCreating a Form • Expand the LAB1 folder • Expand the Forms folder • Double-click on Form1 to display the form • Maximize the form

11. Enhancing Maintain Applications with HTMLAdding 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. Enhancing Maintain Applications with HTMLRunning the Application • Save and Run • Right-click on LAB1 and select Run Procedure • Once Deployment is successful, click Close

13. Enhancing Maintain Applications with HTMLRunning the Application • Click X to return to the MDE • If code is not displayed, double-click on LAB1

14. Enhancing Maintain Applications with HTMLAdding 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. Enhancing Maintain Applications with HTMLEnhancing 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. Enhancing Maintain Applications with HTMLEditing 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. Enhancing Maintain Applications with HTMLEditing 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. Enhancing Maintain Applications with HTMLEditing the HTML Table • Change the Width of Cbox to 6. • Change the Content type from: 0 – Text To 1 – HTML • Click OK to exit this screen • Click OK to return to the form

19. Enhancing Maintain Applications with HTMLAdding 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. Enhancing Maintain Applications with HTMLAdding 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. Enhancing Maintain Applications with HTMLRunning the Application • To pre-check a value, use the keyword CHECKED Compute Stk(I).cbox/a100 = "<input type=checkbox name=check" || I | " CHECKED value=1>"; • NOTE: Do not resort the stack when using this technique!

22. Enhancing Maintain Applications with HTMLAdding 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. Enhancing Maintain Applications with HTMLAdding 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. Enhancing Maintain Applications with HTMLAdding 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. Enhancing Maintain Applications with HTMLAdding 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. Enhancing Maintain Applications with HTMLRunning 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. Enhancing Maintain Applications with HTMLPresetting 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 = "<select name=list " || I || ">" | " <option value=' ' " || x1 || "> </option> " | " <option value='G' " || x2 || "> G</option> " | " <option value='NR' " || x3 || "> NR</option> " | " <option value='PG' " || x4 || "> PG</option> " | " <option value='PG13'" || x5 || ">PG13</option> " | " <option value='R' " || x6 || "> R</option> " | " </select>"

28. Additional Techniques - Homework

29. Enhancing Maintain Applications with HTMLAdding 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. Enhancing Maintain Applications with HTMLAdding 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. Enhancing Maintain Applications with HTMLAdding Input Fields • You can change the input fields to password fields by replacing the word text with password: "<input type=password VALUE='' name=inputx " || I | " SIZE=10>";

32. Enhancing Maintain Applications with HTMLAdding 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. Enhancing Maintain Applications with HTMLAdding 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. Enhancing Maintain Applications with HTMLAdding Radio Buttons • Top Case Code Compute Stk(i).rbutton/a250 = "<input type=radio name=radiox " || I || " value='G'>G " | "<input type=radio name=radiox " || I || " value='NR'>NR " | "<input type=radio name=radiox " || I || " value='PG'>PG " | "<input type=radio name=radiox " || I || " value='PG13'>PG13 " | "<input type=radio name=radiox " || I || " value='R'>R " Compute I=I+1; • Case GetData Code Compute Stk(I).Rval/a4 = Form1.GetHTMLField('radiox' || I);

35. Enhancing Maintain Applications with HTMLAdding Radio Buttons • You can set a default checked entry by adding the word CHECKED to the desired row: "<input type=radio name=radiox " || I || " value='NR' CHECKED>NR “