Creating a Visual Catalog with Maintain
Mark Derwin and Mark Rawls
Information Builders
Information Builders Summit 2011 User Conference
June 2011
Copyright 2011, Information Builders. Slide 1
Creating a Visual Catalog with Maintain
Overview
 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…
Copyright 2007, Information Builders. Slide 2
Creating a Visual Catalog with Maintain
Overview – Display the Catalog
Copyright 2007, Information Builders. Slide 3
Creating a Visual Catalog with Maintain
Overview – Update Existing Information
Copyright 2007, Information Builders. Slide 4
Creating a Visual Catalog with Maintain
Catalog 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.
Copyright 2007, Information Builders. Slide 5
Creating a Visual Catalog with Maintain
Maintain 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.
Copyright 2007, Information Builders. Slide 6
Creating a Visual Catalog with Maintain
Maintain 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
Copyright 2007, Information Builders. Slide 7
Creating a Visual Catalog with Maintain
Launching 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
Copyright 2007, Information Builders. Slide 8
Creating a Visual Catalog with Maintain
Displaying 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
Copyright 2007, Information Builders. Slide 9
Creating a Visual Catalog with Maintain
Loading 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.
Copyright 2007, Information Builders. Slide 10
Creating a Visual Catalog with Maintain
Displaying the Form
 Expand the Demo folder
 Expand the Forms folder
 Click on Form1 to display
 All objects have Properties and Events
Copyright 2007, Information Builders. Slide 11
Creating a Visual Catalog with Maintain
Adding 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
Copyright 2007, Information Builders. Slide 12
Creating a Visual Catalog with Maintain
Adding 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
Copyright 2007, Information Builders. Slide 13
Creating a Visual Catalog with Maintain
Adding 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
Copyright 2007, Information Builders. Slide 14
Creating a Visual Catalog with Maintain
Adding HTMLTable to the form
Double-click on Prodname.
Change Link to Body Only
Click Ok
•Double-click on thumb
•Change title to Image
•Change Width to 10
•Justification to Centered
•Change Content to HTML
•Click Ok
Copyright 2007, Information Builders. Slide 15
Creating a Visual Catalog with Maintain
Adding HTMLTable to the form
 Click OK to return to the form.
 Click on Form and change
BackColor to 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
Copyright 2007, Information Builders. Slide 16
Creating a Visual Catalog with Maintain
Adding 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.
Copyright 2007, Information Builders. Slide 17
Creating a Visual Catalog with Maintain
Adding 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
Copyright 2007, Information Builders. Slide 18
Creating a Visual Catalog with Maintain
Adding Events to the form
 Select ComboBox2 from the dropdown and Change
 Drag Loader from Functions into ComboBox2 Change Event
 Save and Run the procedure.
Copyright 2007, Information Builders. Slide 19
Creating a Visual Catalog with Maintain
Adding 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.
Copyright 2007, Information Builders. Slide 20
Creating a Visual Catalog with Maintain
Loading 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.
Copyright 2007, Information Builders. Slide 21
Creating a Visual Catalog with Maintain
Adding 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
Copyright 2007, Information Builders. Slide 22
Creating a Visual Catalog with Maintain
Adding 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.
Copyright 2007, Information Builders. Slide 23
Creating a Visual Catalog with Maintain
Creating 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.
Copyright 2007, Information Builders. Slide 24
Creating a Visual Catalog with Maintain
Adding 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.
Copyright 2007, Information Builders. Slide 25
Creating a Visual Catalog with Maintain
Adding 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.
Copyright 2007, Information Builders. Slide 26
Creating a Visual Catalog with Maintain
Adding 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.
Copyright 2007, Information Builders. Slide 27
Creating a Visual Catalog with Maintain
Finishing 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.
Copyright 2007, Information Builders. Slide 28
Creating a Visual Catalog with Maintain
form2 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 IncBTN and 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
Copyright 2007, Information Builders. Slide 29
Creating a Visual Catalog with Maintain
Dynamic 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.
Copyright 2007, Information Builders. Slide 30
Creating a Visual Catalog with Maintain
The 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.
Copyright 2007, Information Builders. Slide 31
Creating a Visual Catalog with Maintain
Moving 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.
Copyright 2007, Information Builders. Slide 32
Creating a Visual Catalog with Maintain
Finishing 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.
Copyright 2007, Information Builders. Slide 33
Creating a Visual Catalog with Maintain
Finishing 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.
Copyright 2007, Information Builders. Slide 34