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

Copyright 2007, Information Builders. Slide 2 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…

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 Copyright 2007, Information Builders. Slide 15  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

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.   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