Creating a Visual Catalog with Maintain

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 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 ChromeAnd any smart device:

iPad, iPhone, Droid, Blackberry, etc…

Creating a Visual Catalog with MaintainOverview – Display the Catalog


Creating a Visual Catalog with MaintainOverview – Update Existing Information


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.


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.


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 stknameSort a stack – STACK SORT stkname by valCreate a Stack without loading it – INFER Loop through a Stack – REPEATStacks have 2 system variables:

Stkname.FOCINDEX – This is the current stack row Stkname.FOCCOUNT – Total rows in the stack


Creating a Visual Catalog with MaintainLaunching the Maintain Development Environment MDE

In Dev Studio locate the summitlab11 projectExpand the Maintain Files folderDouble click on demo to open the MDE


Creating a Visual Catalog with MaintainDisplaying the Code

Code created for you.First step in Top case is to set path to the imagesSecond step is to load up the Category drop down

Use Exec


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.


Creating a Visual Catalog with MaintainDisplaying the Form

Expand the Demo folderExpand the Forms folderClick on Form1 to displayAll objects have Properties and Events


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


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


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




Double-click on Prodname.Change Link to Body OnlyClick Ok

• Double-click on thumb• Change title to Image• Change Width to 10• Justification to Centered• Change Content to HTML• Click Ok


Click OK to return to the form.Click on Form and change

BackColor to white.Click on HTMLTableFind the HTMLTable propertiesSelect AlternateRowColorChange Border to 0 – NoneChange Font to:

MS Sans Serif 12Change GridLines to 0 – NoneChange HeaderFont to:

MS Sans Serif Bold 14


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.



Click on the first ComboBox (ComboBox1)Click on the Events Tab Click on Change and the Events form opensDrag getsub from Functions into ComboBox1 Change Event



Select ComboBox2 from the dropdown and ChangeDrag Loader from Functions into ComboBox2 Change EventSave and Run the procedure.



We take the criteria selected in the first Combo Box and use it to populate the second. Then we load up the HTMLTable.


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.


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


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.


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.


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.


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.


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.


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.


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


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.


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.


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.


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.


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.


Creating a Visual Catalog with Maintain

Documents

Transcript of Creating a Visual Catalog with Maintain