Creating a Visual Catalog with Maintain

1. Creating a Visual Catalog with Maintain Mark Derwin and Mark Rawls Information Builders Information Builders Summit 2011 User Conference June 2011

2. Creating a Visual Catalog with MaintainOverview • Create dynamic displays for images with thumb nails. • Display larger image and allow for update and include. • The Maintain language is perfect for creating these catalogs. • Create databases to dynamically build the forms. • Once deployed, users can access them from any browser: • IE, Firefox, Safari, Opera or Chrome • And any smart device: • iPad, iPhone, Droid, Blackberry, etc…

3. Creating a Visual Catalog with MaintainOverview – Display the Catalog

4. Creating a Visual Catalog with MaintainOverview – Update Existing Information

5. Creating a Visual Catalog with MaintainCatalog Master • The database is a single segment file, so suffix can be anything. In this case, FOCUS. • File has 3 keys. If you have more or less categories, you can change this.

6. Creating a Visual Catalog with MaintainMaintain Commands – Data Structures • Variables in Maintain can be Computed and have 1 value: • Compute var/fmt = val; • All formats (except TXT available) • Or be part of a Stack. • A stack is a checker board where • The columns are the database or computed fields. • You can Compute non-database fields into a stack. • The rows are multiple values. • Access a stack row, column or cell. • Can be named anything and there is no limit to the amount of stacks in an application.

7. Creating a Visual Catalog with MaintainMaintain Commands – Data Structures • You can load a stack from: • The Database – NEXT • Another Stack – COPY • A TABLE procedure – EXEC • A Winform – User Entry • You can Clear a Stack – STACK CLEAR stkname • Sort a stack – STACK SORT stkname by val • Create a Stack without loading it – INFER • Loop through a Stack – REPEAT • Stacks have 2 system variables: • Stkname.FOCINDEX – This is the current stack row • Stkname.FOCCOUNT – Total rows in the stack

8. Creating a Visual Catalog with MaintainLaunching the Maintain Development Environment MDE • In Dev Studio locate the summitlab11 project • Expand the Maintain Files folder • Double click on demo to open the MDE

9. Creating a Visual Catalog with MaintainDisplaying the Code • Code created for you. • First step in Top case is to set path to the images • Second step is to load up the Category drop down • Use Exec

10. Creating a Visual Catalog with MaintainLoading the Drop Down boxes • Use Exec to perform Non-Maintain procedures. • Here we use Table with DST. To get ONLY unique values. • Pass variables and receive stacks. • Variables retrieved sequentially. • Must create the stack to retrieve the data.

11. Creating a Visual Catalog with MaintainDisplaying the Form • Expand the Demo folder • Expand the Forms folder • Click on Form1 to display • All objects have Properties and Events

12. Creating a Visual Catalog with MaintainAdding a Category Selection Box • Click on the Combo Box icon. • Draw a rectangle on the form. • Click on the rectangle. • Select From a Variable • Assign Catstk.Category as the List Source. • Click Ok

13. Creating a Visual Catalog with MaintainAdding a Sub Category Selection Box • Click on the Combo Box icon again. • Draw another rectangle on the form. • Click on the rectangle. • Select From a Variable • Assign SubCatstk.SubCategory as the List Source. • Click Ok

14. Creating a Visual Catalog with MaintainAdding HTMLTable to the form • Click on the HTMLTable icon • Draw a rectangle under the combo boxes • Select Prodstk • Select Prodname, itemno, price and thumb. • Do not click Ok yet

15. Creating a Visual Catalog with MaintainAdding HTMLTable to the form • Double-click on thumb • Change title to Image • Change Width to 10 • Justification to Centered • Change Content to HTML • Click Ok • Double-click on Prodname. • Change Link to Body Only • Click Ok

16. Creating a Visual Catalog with MaintainAdding HTMLTable to the form • Click OK to return to the form. • Click on Form and change BackColorto white. • Click on HTMLTable • Find the HTMLTable properties • Select AlternateRowColor • Change Border to 0 – None • Change Font to: • MS Sans Serif 12 • Change GridLines to 0 – None • Change HeaderFont to: • MS Sans Serif Bold 14

17. Creating a Visual Catalog with MaintainAdding Events to the form • Events determine what happens when something happens on your form. • All form objects have events. • Events can be: Maintain cases, JavaScript, Web Links, Form Close or Application close. • Types of events are: Click, Change, Open, Focus, Blur, Double Click, etc… • All events for a form are displayed on one events page. • Many ways to get to this page: • Click on an event on the events sheet of any object. • From the Form menu – Edit event handlers • Click on the Edit Events icon.

18. Creating a Visual Catalog with MaintainAdding Events to the form • Click on the first ComboBox (ComboBox1) • Click on the Events Tab • Click on Change and the Events form opens • Drag getsub from Functions into ComboBox1 Change Event

19. Creating a Visual Catalog with MaintainAdding Events to the form • Select ComboBox2 from the dropdown and Change • Drag Loader from Functions into ComboBox2 Change Event • Save and Run the procedure.

20. Creating a Visual Catalog with MaintainAdding Events to the form • We take the criteria selected in the first Combo Box and use it to populate the second. Then we load up the HTMLTable.

21. Creating a Visual Catalog with MaintainLoading the HTMLTable • We take the selections from the Combo Boxes and use them as criteria in our NEXT statement. • Catstk().category = Selected Category • We then loop through the stack and create the HTML to display in the HTMLTable column Thumb. • When the user makes a selection, we copy THAT row into detstk, create a larger image and display form2.

22. Creating a Visual Catalog with MaintainAdding Buttons • Clicking on the hyperlink allows you to update a row, but we want include as well. • Create two buttons on your form. • Addbtn and Xbtn • Click on the button icon on the Controls Palette • Draw a rectangle. Change the text to Add New and the name to Addbtn • Repeat for the Exit Button. Name it Xbtn

23. Creating a Visual Catalog with MaintainAdding Events and Links • Go to the Events page by clicking on Events Click for either button. • Select HTMLTable1 and Clicklink- Drag and drop show_detail into event • Select Addbtn and Click - Drag and drop Addnew1 into event. • Select Xbtn and Click - Click on the Close project icon on the top row • Save and Click on Form2.

24. Creating a Visual Catalog with MaintainCreating Form2 • Change the BackColor of the form. • Expand the Stacks folder. • Drag detstk onto the form and click Select All • Deselect Pic and Description • Click Ok to place forms on field.

25. Creating a Visual Catalog with MaintainAdding Description • Select the Multi-Edit box from the Control Palette. • Draw a wide rectangle under the Image field. • Double-click on the rectangle and assign the variable detstk.Decription • Click Ok • Find the Wrap property on the Properties sheet and change it to 2 – Hard.

26. Creating a Visual Catalog with MaintainAdding Image • Select the HTML icon from the Controls Palette. • Draw a rectangle next to description. Click on the rectangle. • Select the variable Detstk.pic to display the image. • We COULD use the image control but this gives us control over the size. • Otherwise image would appear as the size it is save as.

27. Creating a Visual Catalog with MaintainAdding Browse Button • The Browse button allows us to Grab an image from disk or network • Click on the HTML icon on the Controls Palette and draw a rectangle. • Add the text exactly as below, not from a variable. • <td><input type="file" name="INPUTFL" value=""></td> • Click Ok to save.

28. Creating a Visual Catalog with MaintainFinishing the Form • Add three buttons under HTML2 • First: Update, name: UpBTN • Second: Include, name: InbBTN • Third: Close, name: CloseBTN • Expand the Variables folder. • Drag Val onto the form under the buttons. • Go to the Events page.

29. Creating a Visual Catalog with Maintainform2 Events – Please note the lower case “f” • Select UpBTN and Click. Select the J-Scroll to add a JavaScript trigger • This code grabs the Browsed value, places it in Val2 & performs Updater1 • document.form2.Val_Edit.value=document.form2.INPUTFL.value; • IWCTrigger("updater1"); • Select IncBTNand Click. Select the J-Scroll to add a JavaScript trigger • document.form2.Val_Edit.value=document.form2.INPUTFL.value; • IWCTrigger(“Include1"); • Select CloseBTN and Click. Click on the Close form icon

30. Creating a Visual Catalog with MaintainDynamic Winform Commands • Click on Demo to display the code. • Uncomment the Winform Set commands in Show_detail and addnew1. • Most winform properties are dynamic. • If form is not displayed, MUST use SHOW_INACTIVE before setting. • These commands toggle the Update and Include buttons.

31. Creating a Visual Catalog with MaintainThe rest of the code • First grab ONLY the image name by using MNTGETTOK. • Update or include the record to the database. • Copy the record to your image directory – Exec Newimage. • If Update – Display new information to HTMLTable on Form1. • If Include – Clear information on Form1. • Save and Run.

32. Creating a Visual Catalog with MaintainMoving the Image file • Since we are only storing the image name, we have to move the file. • This EXEC’d procedure takes the name of the file, &1, and copies it to the location of the images. • My example is local, if you have permissions, you can copy to Networks. • We MAY be on the D drive now.

33. Creating a Visual Catalog with MaintainFinishing Touches • Open Form1. • Select Image from the Controls Palette and draw a rectangle in the corner. • Select New and navigate to the Summitlab11 folder. • Select logo.jpg and click Open, Next, and Finish. • Click Overwrite Existing, Ok and OK to place the image on the Form. • Repeat for form2.

34. Creating a Visual Catalog with MaintainFinishing Touches • Select the Text icon from the Controls Palette. • Add Text above each of the Drop Down Boxes on Form1 • Change the Font to Bold 12.